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 content pages, blocks, email templates, newsletters, and so on.

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:

Inserting many directives, especially widgets like the Recently Viewed / Compared Products type, can produce a negative effect on the first page load when the page is not cached. For this reason, we advise that you use them with caution. In most cases, it should not create an issue. But this is something that you should discuss with your development team.

Custom Variable

The Variable markup tag can be used to insert a custom variable into an email templates, 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 the 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"}}