Options Component

  • Updated

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

All three of these components display the same data about your Shopify product but in different formats. Options dropdown is a dropdown, options list is a list, and circulation options list uses a circular style.

How To Use The Options Components:

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

The options 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 “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

  1. From the page layers on the left side panel, select the “Option List” component.
  2. Select the first child container of the “Option List.”
  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

  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?