Documentation
Feedback
Guides

Store Framework
Guides
Rendering a badge on top of a product

To render a badge on top of a Product Summary component, for example, product collection on a Shelf block, you combine the Product Highlights app and Stack Layout.

{"base64":"  ","img":{"width":1854,"height":751,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":392124,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-rendering-a-badge-0.png"}}

Before you start

  1. Knowledge of how the Product Summary, Product Highlights, Stack Layout, and Product collections work is required for this recipe. If you have any doubts regarding them, we strongly recommend you access their technical documentation: Product Summary, Product Highlights, Stack Layout and Collections.

  2. Ensure you have already installed VTEX IO CLI on your machine.

  3. Also, make sure you have as a dependency "vtex.product-summary": "2.x" in your theme’s manifest.json.

Step-by-step

  1. In your theme’s manifest.json file, add the Product Highlights app and Stack Layout as a dependency:

    “dependencies” : { "vtex.product-highlights": "2.x", "vtex.stack-layout": "0.x”, }
  2. Open a product template you desire.

  3. Then, add the stack-layout component to the blocks list of the desired template, for example:

    { "product-summary.shelf": { "children": [ "stack-layout#prodsum", ] }, ...
  4. In the theme’s template, declare the stack-layout component, and add the "product-summary-image#shelf" and "vtex.product-highlights@2.x:product-highlights#collection" as its children to render the image and the badge, respectivetly.

    "stack-layout#prodsum": { "children": [ "product-summary-image#shelf", "vtex.product-highlights@2.x:product-highlights#collection" ] },
  5. Then declare the props of the children. The first is "product-summary-image#shelf" props, responsible for rendering the product's image.

    "product-summary-image#shelf": { "props": { "showBadge": true, "aspectRatio": "1:1", "maxHeight": 300 } },
  6. After declare the props and the children of vtex.product-highlights@2.x:product-highlights#collection: product-highlight-wrapper and product-highlight-text.

    The product-highlight-text only renders the text already defined in the Collection page in a store’s Admin. For more information about it, refer to Collections articles and the Product Highlights app

    "vtex.product-highlights@2.x:product-highlights#collection": { "props": { "type": "collection" }, "children": ["product-highlight-wrapper"] }, "product-highlight-wrapper": { "props": { "blockClass": "collection" }, "children": ["product-highlight-text"] }, "product-highlight-text": { "props": { "message": "{highlightName}" } }, ...

Once you have declared the blocks’ props, link the app and see the changes live at the Development workspace you are working.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Linking an app
App Development
Product Highlights
VTEX IO Apps
Workspace
App Development
Product Summary
VTEX IO Apps
Stack Layout
VTEX IO Apps
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page