Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Advanced components
Product Highlight by VTEX Segment
Official extension
Version: 0.3.2
Latest version: 0.3.2

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}

The Product Highlight by VTEX Segment app allows shoppers to select a Whitelabel Seller available in their region, and it filters the product listing results accordingly. The app also uses a badge to highlight products of Whitelabel Sellers that are available in the shopper's region.

{"base64":"  ","img":{"width":700,"height":384,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1677098,"url":"https://user-images.githubusercontent.com/55905671/143295939-7d1b5625-5c57-46ad-a197-ef959db268de.gif"}}


Before you start

Before configuring the Product Highlight by VTEX Segment app, make sure to create a collection for each Whitelabel Seller of your store (See Creating Collections Beta for more information). When naming your collection, make sure to use the following naming structure: {sellerId}-{defaultCollectionName}, where the {sellerId} is the sellerId of the Whitelabel Seller and {defaultCollectionName} is the name of the Collection.

{"base64":"  ","img":{"width":2880,"height":1580,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":383687,"url":"https://user-images.githubusercontent.com/55905671/143301880-ee440d48-eced-4750-9cd2-ae3f3588a8e4.png"}}


Configuration

To configure the Product Highlight by VTEX Segment app, you'll need to:

  1. Set up the default configurations of the Product Highlight by VTEX Segment app via the VTEX Admin.
  2. Add the Product Highlight by VTEX Segment to the store theme.

By the end of these steps, you'll have your store products highlighted according to the Whitelabel Seller selected.

Setting up the Product Highlights app

  1. Open the terminal and log in to the desired VTEX account using the VTEX IO CLI.

  2. Install the vtexarg.product-highlight-by-vtex-segment app on your account.


    _10
    vtex install vtexarg.product-highlight-by-vtex-segment

  3. Open the VTEX Admin.

  4. Go to Account Settings > Apps > My apps.

  5. Look for the Product Highlight by VTEX Segment app and click on Settings.

    {"base64":"  ","img":{"width":1932,"height":1374,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":193466,"url":"https://user-images.githubusercontent.com/55905671/143299640-21b00a57-64bc-467c-917b-34a16d44bc51.png"}}

  6. Fill in the presented fields as in the following:

    • Default Seller Id - Enter the default seller ID to use in cases the shopper's region is not detected (e.g., jumboargentinav692lanus692).
    • Default Collection Name - Enter the name of the collection corresponding to the default seller ID (e.g., leyDeGondolas). This is the {defaultCollectionName} part of the Collection Name (See Before you start for more information).
    • Image Url of Highlight - Enter the URL of the ximage badge that will highlight the products. For example:
      {"base64":"  ","img":{"width":80,"height":80,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1764,"url":"https://user-images.githubusercontent.com/60782333/152064990-8990c5a7-3549-49c9-91b0-3bc3ad7604fb.png"}}
  7. Click on Save.

Adding the Product Highlights component to your store theme

  1. Open your store theme in any code editor of your choice.

  2. Open the manifest.json file and add the vtexarg.product-highlight-by-vtex-segment app as a peer dependency of your theme:


    _10
    "peerDependencies": {
    _10
    ...
    _10
    + "vtexarg.product-highlight-by-vtex-segment": "0.x"
    _10
    ...
    _10
    }

  3. Add the product-highlight-by-vtex-segment block to any child of the store.product template (Product Details Page template). For example:


    _15
    "store.product": {
    _15
    "children": [
    _15
    "flex-layout.row#product-main",
    _15
    ]
    _15
    },
    _15
    "flex-layout.row#product-main": {
    _15
    "children": [
    _15
    "flex-layout.col#right-col"
    _15
    ]
    _15
    },
    _15
    "flex-layout.col#right-col": {
    _15
    "children": [
    _15
    + "product-highlight-by-vtex-segment"
    _15
    ]
    _15
    }

Now, see the Customization section to add custom styles to your component.

After linking your store theme app in a development workspace, you'll be able to select a Whitelabel Seller available in your region from a dropdown menu list.

{"base64":"  ","img":{"width":2880,"height":1592,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":350291,"url":"https://user-images.githubusercontent.com/55905671/143302341-6ba9d940-185f-4c9a-98c5-cb158f285d03.png"}}

You'll then be able to see the chosen badge in the product cards of the selected Whitelabel Seller's collection.

{"base64":"  ","img":{"width":2880,"height":1584,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":518673,"url":"https://user-images.githubusercontent.com/55905671/143302850-e8d39857-ffb6-49fc-b1cf-a7496733ac4c.png"}}

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.

CSS Handles
productHighlightByVtexSegmentContainer
imageOfHighlight

See also
VTEX App Store
VTEX IO Apps