(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
- Product page controls
- Department, category, and search page controls
- Other controls
- Deprecated controls
General controls
You can use the controls listed below in most pages in your store.
Control | Description |
---|---|
<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 attribute | Description |
---|---|
layout | Shelf template ID. Required attribute. |
itemCount | Number of items to be displayed. Required attribute. |
columnCount | Number of columns. Required attribute. |
showUnavailable | The 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. |
isTrackable | This control is trackable when this attribute is set to true . |
InternalCampaign | Name of the internal campaign audience. |
InternalPart | Internal 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
Control | Description |
---|---|
<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:
Property | Possible 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 |
Control | Example 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
Control | Description |
---|---|
<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 attribute | Description |
---|---|
layout | Required attribute. Code of the shelf (template) that will display products. |
itemCount | Required attribute. Number of items per page. |
columnCount | Required attribute. Number of columns. |
showUnavailable | When this attribute is set to true, out-of-stock products will be displayed. |
selectionMode=”batch-buy” | Optional attribute that allows sorting products in bulk. |
isTrackable | When this attribute is set to true, this control is trackable. |
InternalCampaign | Audience name of the internal campaign. |
InternalPart | Internal 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
Control | Description |
---|---|
<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
Control | Description | Page |
---|---|---|
<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 history | Product 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 |