Markup tags

A markup tag is a directive that contains snippet of code with a relative reference to an object in your store such as a variable, URL, image, or block. Markup tags can be used anywhere the editor is available and incorporated into the HTML of email and newsletter templates, as well as other types of content.

Markup tags are enclosed in double, curly braces, and can either be generated by the Widget tool, or typed directly into HTML content. For example, rather than hard-coding the full path to a page, you can use a markup tag to represent the store URL. The markup tags featured in the following examples include:

Custom variable

The Variable markup tag can be used to insert a custom variable into an email template, blocks, newsletters, and content pages.

{{CustomVar code= “my_custom_variable”}}

Store URL

The Store URL markup tag represents the base URL of your website, and is used as a substitute for the first part of a full URL, including the domain name. There are two versions of this markup tag: One that goes directly to your store, and the other with a forward slash (/) at the end that is used when a path is added.

{{store url=‘apparel/shoes/womens’}}

Media URL

The dynamic media URL markup tag represents the location and file name of an image that is stored on a content delivery network (CDN). The tag can be used to place an image on a page, block, banner, or email template.

{{media url=‘shoe-sale.jpg’}}

Block ID

The Block ID markup tag is one of the easiest to use, and can be used to place a block directly on a CMS page, or even nested inside another block. You can use this technique to modify a block for different promotions or languages. The Block ID markup tag references a block by its identifier.

{{block id=‘block-id’}}

Template tag

A template tag references a PHTML template file, and can be used to display the block on a CMS page or static block. The code in the following example can be added to a page or block to display the Contact Us form.

{{block class=“Magento\Contact\Block\ContactForm” name=“contactForm” template=“Magento_Contact::form.phtml”}}

The code in the next example can be added to a page or block to display a list of products in a specific category, by category ID.

{{block type=“catalog/product_list” category_id=“22” template=“catalog/product/list.phtml”}}

Widget code

The Widget tool can be used to display lists of products, or to insert complex links, such as one that goes to a specific product page, based on product ID. The code that is generated includes the block reference, location of the code module, and corresponding PHTML template. After the code is generated, you can copy and paste it from one place to another.

The code in the following example can be added to a page or block to display the list of new products.

{{widget type=“catalog/product_widget_new” display_type=“new_products” products_count=“10” template=“catalog/product/widget/new/content/new_grid.phtml”}}

The code in the next example can be added to a page or block to display a link to a specific product, by product ID.

{{widget type=“catalog/product_widget_link” anchor_text=“My Product Link” title=“My Product Link” template=“catalog/product/widgetlink/link_block.phtml” id_path=“product/31”}}

Use markup tags in links

You can use markup tags with HTML anchor tags and link directly to any page in your store. The link can be incorporated into content pages, blocks, or email and newsletter templates. You can also use this technique to link an image to a specific page.

Step 1. Identify the destination URL

If possible, navigate to the page that you want to link to, and copy the full URL from the address bar of your browser. The part of the URL that you need comes after the .com/. Otherwise, copy the URL Key from the CMS page that you want to use as the link destination.

Full URL to category page

https://mystore.com/apparel/shoes/womens
https://mystore.com/apparel/shoes/womens.html

Full URL to product page

https://mystore.com/apparel/shoes/womens/nine-west-pump
https://mystore.com/apparel/shoes/womens/nine-west-pump.html

Full URL to CMS page

https://mystore.com/about-us

Step 2. Add the markup to the URL

The Store URL tag represents the base URL of your website and is used as a substitute for the HTTP address part of the store URL, including the domain name and .com. There are two versions of the tag, which you can use, depending on the results you want to achieve.

store direct_url - Links directly to a page.

store url - Places a forward slash at the end, so additional references can be appended as a path.

In the following examples, the URL Key is enclosed in single quotes, and the entire markup tag is enclosed in double curly braces. When used with an anchor tag, the markup tag is placed inside the double quotes of the anchor. To avoid confusion, you can alternate using single-and double quotes for each nested set of quotes.

If you are starting with a full URL, delete the HTTP address (http:// or https://) part of the URL, up through and including the .com/. In its place, enter the Store URL markup tag, up through the opening single quote.

Store URL markup tag

https://mystore.com/apparel/shoes/womens

{{store url='apparel/shoes/womens'}}

Otherwise, enter the first part of the Store URL markup tag and paste the URL key or path that you copied earlier.

Store URL markup tag with URL key

{{store url=

To complete the markup tag, enter the closing double quotes and double braces.

{{store url='apparel/shoes/womens'}}

Step 3. Complete the anchor tag

Wrap the completed markup tag inside an anchor tag, using the markup tag instead of the target URL. Then, add the link text and closing anchor tag.

Markup in anchor tag

<a href=“{{markup tag goes here}}”>Link Text</a>

Paste the completed anchor tag into the code of any CMS page, block, banner, or email template, where you want the link to appear.

Complete link with markup

<a href=“{{store url=‘apparel/shoes’}}”>Shoe Sale</a>