Documentation
Feedback
Guides
Storefront Development

Storefront Development
(Legacy) CMS Portal
List of template controls

The controls listed in this article can be used by your store's frontend developer to create the store page layout in the Storefront > Layout module.

General controls

You can use the controls listed below in most pages in your store.

ControlDescription
<vtex.cmc:breadCrumb/>Breadcrumb: Indicates the user's current location in your store website and the pages they accessed to get to the current one. Works in product, department, category, and search pages.
<vtex.cmc:fullTextSearchBox/>Search control: Displays the search bar in your store. For more information, read Search Control - fulltextSearchBox.
<vtex.cmc:welcomeMessage/>Welcome message: Displays a welcome message to anyone visiting your store. To customize this message, go to the Store Settings > Storefront module and click Settings. In the Store Texts tab, look for the topbarSaudacao command in the ID options and select it. In the text box that will display automatically, you can edit the welcome message and then Save.
<vtex:metaTags/>Meta tags: Defines the page meta tags — tags that are useful for search engines to identify your content easily.
<vtex.cmc:canonicalPage disable="true"/>Disable canonical tag: If this control is set to true, the canonical tag will be disabled in the page. Using this tag indicates duplicate content to search engines and prioritizes it correctly in page tracking.
<vtex.cmc:departmentLinks/>Department links: Displays links for the first level of categories (departments) created in the Admin. For the category to be listed, the Menu field must be enabled when creating the category.
<vtex.cmc:departmentNavigator/>Department menu: Displays a menu with your store departments and categories (levels 1 and 2). To display the link for the complete list, the Menu field must be enabled when creating categories. This menu also displays brands that have the Display in Home menu option enabled and category specifications, such as size and color. This control is indicated for use as a side menu.
<vtex.cmc:searchTitle/>Page title: Displays the title of departments, categories, and search pages.
<vtex.cmc:productQuickView/>QuickView: This control needs to be added before closing the </body> tag in the QuickView page template. It is key for loading the files needed in the page.
<vtex.cmc:ProductQueryStringReferenceShelf/>Shelf: Allows you to configure a shelf in your store using the attributes listed below.

Below, you can see a description of the Shelf control <vtex.cmc:ProductQueryStringReferenceShelf/> attributes:

Tag attributeDescription
layoutShelf template ID. Required attribute.
itemCountNumber of items to be displayed. Required attribute.
columnCountNumber of columns. Required attribute.
showUnavailableThe page will display out-of-stock products when this attribute is set to true.
selectionMode=”batch-buy”Optional attribute that allows sorting products in bulk.
isTrackableThis control is trackable when this attribute is set to true.
InternalCampaignName of the internal campaign audience.
InternalPartInternal ViewPart name.

Shelf control example:


_10
<vtex.cmc:ProductQueryStringReferenceShelf layout="e2ed81f5-6241-4418-a47b-018d7482fcf0" itemCount="3" columnCount="3" showUnavailable="true" isTrackable="true" InternalCampaign="Landing highlight" InternalPart="Window display highlight"/>

Product page controls

ControlDescription
<vtex.cmc:ProductGifts />Display giveaways on the product page: Displays the giveaways attached to the product, if you have configured a Buy One, Get One promotion in your store. See how to configure this type of promotion.
<vtex.cmc:productName/>Product name: Displays the name of the product.
<vtex.cmc:brandName/>Product brand with link: Displays the product's brand with a link to access a list of products in the same brand and category in your store.
<vtex.cmc:ProductImage/>Thumbnail of the main product image: Displays a thumbnail of the main product image.
<vtex.cmc:productReference/>Product reference code: Displays the product reference code.
<vtex.cmc:skuReference/>SKU reference code: Displays the reference code of the SKU.
<vtex.cmc:skuPrice/>List prices, Computed prices, Installments, and “Save” promotion: List prices and “Save” promotions are only displayed if the product's computed price is lower than its list price. The best installment plan will be displayed to the customer based on the total price of the order and the interest-free payment options. It does not display information when the product display mode is SKU list.
<vtex.cmc:skuSelection />SKU selection: Allows selecting the product variation following the Admin configuration (radio and combo).
<vtex.cmc:OtherPaymentMethod/>View other payment methods: Displays the best payment and installment conditions for a SKU. The SKU must be available in stock for the control to be displayed. This control does not work for categories displayed as "List" in products with multiple SKUs.
<vtex.cmc:Delivery/>Availability: Displays the estimated time it will take for the product to be available, depending on the default logistics route.
<vtex.cmc:stockKeepingUnitRewardValue/>Loyalty Program Value: Displays the value of the SKU in the store's loyalty program.
<vtex.cmc:BuyTogether/>Buy together: Displays the SKUs selected in the Display together field when adding a SKU.
<vtex.cmc:ProductDescription/>Product description: Displays the information entered in the Description field of the product form.
<vtex.cmc:productDescriptionShort/>Product short description: Displays the value entered in the Additional description field of the product form.
<vtex.cmc:productSpecification/>Product specification: Additional properties that can be added to your products.
<vtex.cmc:StockKeepingUnitAttributes/>SKU specification: Also displays "unstructured attributes" used for seller products.
<vtex.cmc:stockKeepingUnitMeasures/>Actual SKU dimensions: Shows the SKU height, width, length, and weight.
<vtex.cmc:ProductTag/>Associated tags
<vtex.cmc:PageSearch/>Search within the product page
<vtex.cmc:BuyButton/>Buy button: Displays the button to add the product to the shopping cart. If the product is out of stock, this control will display the “Notify Me” option, if enabled.
<vtex.cmc:BuyInPage/>Buy button (Asynchronous): This control adds the product to the shopping cart asynchronously, without leaving the product page. For this control to work properly, it requires the <vtex.cmc:AmountItemsInCart/> control as described in this article.
<vtex.cmc:stockKeepingUnitAmountAndUnitSelection />Quantity selector with multiplier unit: Renders a fractional quantity field, considering the unit of measure and unit multiplier set for that SKU. The result is the quantity to be purchased.
<vtex.cmc:evaluationRate/>Star ratings given by users: Displays total ratings from users.
<vtex.cmc:UserReview/>Ratings and reviews: Adds the option to rate and review products. Displays customer ratings and reviews.
<vtex.cmc:giftListInsertSku/>Add product to a list
<vtex.cmc:GiftListFormV2/>Form for creating a list
<vtex.cmc:HightLight/>Collection highlight flag
<vtex.cmc:discountHightLight/>Promotion highlight flag
<vtex.cmc:sellerDescription />Seller description: Name and image added to the seller of a given product.
<vtex.cmc:SellerOptions />Seller options: Displays the sellers that offer the product, the product price of each seller, and installment options (up to three different prices).
<vtex.cmc:SalesChannelDropList />Trade policy list: Displays a list of available trade policies.
<vtex:contentPlaceHolder id="ColecaoQVVT"/>”People who looked at this item also looked at” shelf: It adds a control of type Related products in the Legacy CMS Portal that lists products from the same category as the PDP. When editing the element, select QuemViu_Viu_Tambem in the Tipo field and create a new shelf template. It is a quick and easy way to implement "who looked at this, also looked at" section, offering shoppers purchasing alternatives.
<vtex:contentPlaceHolder id="ColecaoQVCT"/>“People who looked at this item also purchased” shelf: It adds a control of type Related products in the Legacy CMS Portal that lists products from the same category as the PDP. When editing the element, select QuemComprou_Viu_Tambem in the Tipo field and create a new shelf template. It is a quick and easy way to implement "who looked at this, also purchased" section, offering shoppers purchasing alternatives.
<vtex:contentPlaceHolder id="ColecaoQCCT"/>People who purchased this item also purchased” shelf: It adds a control of type Related products in the Legacy CMS Portal that lists products from the same category as the PDP. When editing the element, select QuemComprou_Comprou_Tambem in the Tipo field and create a new shelf template. It is a quick and easy way to implement "who purchased this, also purchased" section, offering shoppers purchasing alternatives.
<vtex:contentPlaceHolder id="Similares"/>Similar/Related products: It adds a control of type Related products in the Legacy CMS Portal that lists the SKUs configured as similar in the SKU registration. When editing the element, select Similar in the Tipo field.
<vtex:contentPlaceHolder id="Acessorios"/>Accessories: It adds a control of type Related products in the Legacy CMS Portal that lists the SKUs configured as accessories in the SKU registration. When editing the element, select Acessorios in the Tipo field.
<vtex:contentPlaceHolder id="Sugestoes"/>Suggestions: It adds a control of type Related products in the Legacy CMS Portal that lists the SKUs configured as suggestions in the SKU registration. When editing the element, select Sugestao in the Tipo field.
<vtex.cmc:facebookLike/>Facebook Like

RichSnippets controls

The <vtex.cmc:productRichSnippets /> control adds specific tags for sharing information through social media, such as Google microformats, Facebook Open Graph, and Twitter cards. The testing tools are:

  1. Google Structured Data Testing Tool
  2. Facebook Sharing Debugger
  3. Twitter Card Validator
PropertyPossible values
showGoogle{ "1", "true", "on", "yes" }
showFacebook{ "1", "true", "on", "yes" }
Twitter@accountname of the Twitter account
doNotshowPrice{ "1", "true", "on", "yes" }
googleRate{ "1", "true", "on", "yes" }
fbAdmins
fbAppId
ControlExample of use
<vtex.cmc:productRichSnippets showGoogle="1"/>For the product to be indexed on Google, the control needs to be in the <body> tag.
<vtex.cmc:productRichSnippets showFacebook="1" fbAdmins="[fbAdmins]" fbAppId="[fbAppId]"/>For Facebook, the control needs to be in the <head> tag. fbAdmins and fbAppId settings are optional.
<vtex.cmc:productRichSnippets Twitter="[TwitterAccount]"/>For Twitter, the control can be added to <head> or <body> tags. Settings can also be grouped together.

Department, category, and search page controls

ControlDescription
<vtex.cmc:advancedSearchFilter/>Advanced Search Filter
<vtex.cmc:singleDepartmentNavigator/>Department menu: The available attribute is keepCurrentPath. When this attribute is set to true, products will be displayed on the page.
<vtex.cmc:searchNavigator/>Search menu/filter: Displays a menu with your store departments and categories (levels 1 and 2). To display the link to the complete list, the Menu field must be enabled when creating categories.
<vtex.cmc:miniCart/>Minicart control: A shopping cart control used in the top menu of all pages — except Checkout and the order confirmation page. This control displays shopping cart information, such as items, quantities, and prices.
<vtex.cmc:AmountItemsInCart>Number of items in the shopping cart: Displays basic information about the shopping cart. This control is required if you use the <vtex.cmc:BuyInPage/> control. For example, you could use it for KitLook cases.
<vtex.cmc:searchResult/>Product search results. The attributes of this control are described below.

The <vtex.cmc:searchResult/> control attributes are:

Tag attributeDescription
layoutRequired attribute. Code of the shelf (template) that will display products.
itemCountRequired attribute. Number of items per page.
columnCountRequired attribute. Number of columns.
showUnavailableWhen this attribute is set to true, out-of-stock products will be displayed.
selectionMode=”batch-buy”Optional attribute that allows sorting products in bulk.
isTrackableWhen this attribute is set to true, this control is trackable.
InternalCampaignAudience name of the internal campaign.
InternalPartInternal ViewPart name.

Search results example:


_10
_10
<vtex.cmc:searchResult layout="48e223e6-da80-4610-b3d5-4e5cfaf94f13" itemCount="10" columnCount="4" isTrackable="true" InternalCampaign="Search results landing" InternalPart="Search Results" />

For more information, read the tutorial Shelf template controls.

Other controls

ControlDescription
<vtex.cmc:orderList/>Displays the customer order list in the Orders section of My account/account/orders
<vtex.cmc:accountUserProfile/>Displays the customer information in My account/account
<vtex.cmc:accountAddress/>Displays the customer addresses on the My account page – /account
<vtex.cmc:sellerInfo />Displays the seller information on the platform and should be used on the seller detail page in the seller-info folder.

Deprecated controls

ControlDescriptionPage
<vtex.cmc:productPageTitle/>Product title: Deprecated control.Product page
<vtex.cmc:stockKeepingUnitSelection/>SKU selection: Deprecated control. Use <vtex.cmc:skuSelection/> instead.Product page
<vtex.cmc:skuRichSelection changeImage="1"/>SKU checkbox selection: Deprecated control.Product page
<vtex.cmc:shippingValue/>Calculate shipping cost and delivery time frame: Deprecated control. This control has a known issue.Product page
<vtex.cmc:stockKeepingUnitService/>SKU services: Deprecated control.Product page
<vtex.cmc:StockKeepingUnitPriceHistory Months="6" Percentile="100"/>Price historyProduct page
<vtex.cmc:evaluationRate/>Consumer rating (stars): Deprecated control. Previously, this displayed the average star rating from customers.Product page
<vtex.cmc:UserReview/>Ratings and comments: Deprecated control. This previously displayed an option to rate products, a form to add a review, rating results, and added reviews.Product page
<vtex.cmc:welcomeMessage/>User login: Deprecated control. This created the IPI cookie used by the <vtex.cmc:UserReview/> control. Without it, login was required in a loop when trying to add a review.Product page
Contributors
5
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 5 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
5
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 5 contributors
On this page