VTEX system offers some controls for the creation of shelves.
Products attributes can be stored in variables, and these are used in every template. To declare the variables and receive an attribute of a product, use the following command:
#set($id = $product.Id)
#set($uri = $product.Uri)
#set($escapedName = $product.HtmlEscapedName)
#set($evaluationRate = $product.EvaluationRate)
Shows the product ID.
Shows the product name.
Shows a brief description of the product.
Shows the product link.
$product.GetImageTag(number corresponding to the image)
Shows the image and the type of image you want. It follows this list of image types:
- ProductImageShowcaseLittle (Size: 65×65) = 1;
- ProductImageShowcaseMedium (Size: 90×90) = 29;
- ProductImageShowcaseLarge (Size: 130×130)= 30;
- MainProductImage (Size: 250×250)= 2;
- ThumbProductImage (Size: 45×45)= 3;
- ZoomProductImage (Size: 344×344)= 10;
- File = 11;
- ProductManual = 12.
Note: The sizes of the images are according to the layout of the store
Shows the value of a product field by passing the ID of this field as a parameter.
Shows the "From" price of the product.
Shows the best price of the product.
Indicates whether there is a better price for the product (used in conditionals).
Shows the number of installments of the best payment condition for the product.
Shows the value of the installment of the best payment condition for the product, that is, the value of the largest interest-free installment for this product.
Shows the largest installment with or without interest for this product.
Shows the value of the installment of the product's highest payment condition, that is, the value of the largest installment with or without interest for that product.
Shows the price PLUS the rates applied to it.
Note: Rate values that are set by region, ie by using zip codes, will not be displayed on the shelves. If there is more than one rate that includes the same product, the values are summed and displayed by the control.
Shows the absolute difference of the "From" price to the best price of the product.
Shows the difference (in percentage) of the price "From" to the best price of the product.
Displays the name of the product's department.
Displays the link of the product's department.
Displays the name of the product's category.
Displays the link of the product's category.
Shows the name of the product's brand. Ex.: "Oliveira Juices"
Shows the product's brand in a format recommended for creating links. Ex.: "oliveira-juices"
Shows the brand's link.
Includes a buy button to add to the list shelf, where the product with specification added by the customer is sent directly to the cart. If the product in question has already been purchased for the list, a specific class will be added to the item. This way, you can customize the layout also for this status.
Note: Control must be added to the shelf template used in the “Lista-Prateleira” page template.
Includes a buy button in the shop window that takes the customer directly to the cart if there is only 1 SKU.
Includes a buy button that inserts the product into the cart and keeps the customer in the shop window.
OBS: The above control needs the
$product.AmountInCart control to add a desired quantity textbox to add to the cart.
Inserts a textbox element to set the desired quantity of the product to be added to the cart.
OBS: This control is used in conjunction with the control
Shows the product rating.
Shows the collections of highlights of which the product is part.
Shows the promotions with highlight of which the product is part.
Note: If the promotion has any condition of freight, payment method or cluster, it will not be presented until these conditions are met.
Indicates whether the product has items in stock (used in conditionals).
Shows the rates registered for the product.
Shows the Quick View button.
Shows the check box to select the products that will be compared.
Displays the value for the "Fidelity Value" field of the SKU form.
Shows the percentage value on shelves of type "Who bought also bought".
Shows the percentage value on shelves of type "Who saw also bought".
Shows the percentage value on shelves of type "Who saw also saw".
Shows the individual amount of products in the shop window and a checkbox for each product SKU allowing you to select which SKUs will be added to the list. To add more than one SKU it is necessary to change the quantity inside the box and then select the checkbox for the SKU. If the quantity is changed and the checkbox of an SKU is selected, the quantity of this SKU will not change, only the next SKUs selected after changing the quantity in the box.
Updated 21 days ago