Some projects require the use of a banner, a shop window display, or even an HTML code that will be used on different pages of the site. A typical example is the free delivery and discounts banner located on the header, right below the menu.
In order to avoid manually adding the same content several times on each page, we have created the Custom Elements area.
Customized controls are very useful for development, and they facilitate the update of contents created for this purpose. They can be used on Page Templates and Subtemplates.
Creating a customized control
To create a Customized Control, go to the Admin and access the Storefront menu. Click Layout and on the CMS folder and then on Custom Elements.
In the Custom Elements area, you can create up to four types of characteristics to customize the Tag.
The types include Banner, BannerDHTML Collection or HTML.
To create a customized control tag, click on Add, enter a name, a tag name, and select the type.
Warning: do not create an HTML type control with an element
title. This may interfere with your store operation.
Application of customized controls on a page template
The application of a customized control tag is similar to the use of the element. The tag should be placed where you want the content to be loaded.
In order to differentiate the customized control created that will be used, enter the tag name that was added together with the control syntax.
See the syntaxes for each type of control below:
- Banner Type:
<vtex:tagname /> - HTML Type:
<vtex.cmc:tagname /> - Collection Type:
<vtex.cmc:tagname />