Variant Component

The variant components lets you choose a variant list, or variant dropdown to display your product options on your Replo pages.

Both of these components display the same data about your Shopify product but in different formats.

How To Use The Variant Components

To use any of the variant components, add them into an existing Shopify Product Component on your page. The variant component must be used inside a product box, as it will require a product to pull options from dynamically.

  1. Navigate to the components section and search for “variants.”
  2. Drag the variants component you want into the product box.
  3. Afterwards, you can customize how the variants will be displayed further from the design tabs or using swatches.
    Drag Variant List.gif

How To Configure The Variant Components

How to hide sold-out variants:

  1. From the page layers on the left side panel, select the “Variant” component.
  2. Select the first child container of the “Variant” component.
  3. Navigate to the right side panel and create a new state (link on how to create states)
  4. Give the state any preferred name and set the “Show If” condition to “Variant In List Is Unavailable.”
  5. While on the new state, you have created above, scroll down and toggle the visibility off on all devices.
  6. Save and preview the page.

Set Variant List On Sale.gif

How to hide specific variants

  1. From the page layers on the left side panel, select the “Option List” component.
  2. Navigate to the right side panel and click on “Config.”
  3. Scroll down to “All Option Values” and select/deselect the options you don’t want to display

Variant List Values (1).gif

How to add an “On Sale” tag to variants that are on sale

  1. From the page layers on the left side panel, select the “Variant” component.
  2. Select the first child container of the “Variant” component.
  3. Navigate to the right side panel and create a new state (link on how to create states)
  4. Give the state any preferred name and set the “Show If” condition to “Variant In List Is On Sale.”
  5. While the new state you created above is active, navigate to the left and open the first child container.
  6. Duplicate the text component nested inside the first child container. After this, you will have two text components inside the container.
  7. Change the text of the duplicated text component to “On Sale” and make sure it’s hidden in the “default” and ‘selected” states.

Set Variant List On Sale (2).gif

 

Was this article helpful?