Options Components

  • Updated

The options components lets you choose an options list or options dropdown to display your product options on your Replo pages and allow your site's visitors to select different options inside a Shopify Product component.

All these components display the same data about your Shopify product but in different formats. Options dropdown is a dropdown, options list is a list (options list might have several different styles, like circular swatch options, etc).

How To Use The Options Components

To use any of the option components, you can drag them into your product box: they will automatically show all the options for the set product.

The options component must be used inside a product box, as it requires a product to pull options from dynamically.

  1. Navigate to the components section and search for “options.”

  2. Drag the options component you want into the product box.
    Option List Component (1).gif

  3. Next, navigate to the right side panel, click “Config”, scroll down to “Option”, and select the specific option you want to assign to that list. For example, if your product has color and size options, choosing the “Color” option will assign the option component to your color options.
    Option Lists (1).gif

  4. Finally, you can customize how the options will be displayed further from the design tabs or using swatches.

How To Configure The Option Components

How to hide sold-out options, or show sold-out options as unavailable or "crossed out"

Adding specific styles for sold-out options is possible in Replo using States.

  1. From the page layers on the left side panel, select the “Option List” component.
  2. Select the child container of the “Option List” - usually there will only be one, but if you've added additional containers to customize individual option values, you may need to select the container you want to add an "out of stock" state to.
  3. Navigate to the right side panel and create a new state
  4. Give the state any preferred name and set the “Show If” condition to “Option In List Is Unavailable.”
  5. While the new state you created above is active, scroll down and toggle the visibility off on all devices.
  6. Save and preview the page.

Option Lists States (1).gif

How to hide specific options

It might be the case that sometimes you only want to show a certain set of options, instead of every option which is applicable to the product. To do this:

  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

Option List Values.gif

Was this article helpful?