Knowledge Base

Search

  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

Using Markup Tags

A markup tag is a snippet of code that creates a relative reference to an object in your store. Markup tags can be incorporated into page links and used in the HTML content of a CMS page, block or email template.  Markup tags are enclosed in double, curly braces, and can be generated by the Frontend App tool, or typed directly into HTML content.

For example, rather than hard-coding the path to a page, you can use a markup tag instead of the absolute store URL.  You can also use markup tags to refer to images that are in media storage, or to display a block. The markup tags featured in the following examples include:

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 your 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, so a path can be added.

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

Media URL

The Media URL markup tag represents the location and filename of an image in media storage, and 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 references a block by its identifier, and can be used to place a block on a page, in another block, banner, or email template.

{{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 type="core/template" name="contactForm" template="contacts/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"}}

Frontend App “Widget”

The Frontend App 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 by the Frontend App tool includes the block reference, location of the code module, and corresponding PHTML template. In markup tag, a “frontend app” is referred to as a “widget.” 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/widget/link/link_block.phtml" id_path="product/31"}}