Divider
A Divider is a line that visually separates groups of options - it's not interactive and doesn't collect anything from the customer.
When to use a Divider
Separate personalization options from general options.
Create visual sections, such as "Step 1 - Choose Size", "Step 2 - Choose Color".
Improve clarity on products with many options.
How to add a Divider option
Step 1: Add the option
Open 1. Add options, click Add option, tick Divider under Static text on the New options tab, then click Add options.
Step 2: Style it
Enter a Label on product to name the Divider in your option list (the label is not shown on the storefront), then customize Size (line thickness in px), Color (Theme color or Hex color) and Style (Dotted, Dashed, Solid, Double, Groove or Ridge).
Step 3: Save and test
Click Save, then open the product page on your store to check that the Divider works correctly.
Option settings
Show or hide with Visibility (conditional logic)
Show or hide the Divider based on another option. Available on the Advanced plan and above. Note that a Divider can be shown or hidden by other options, but it cannot be used to trigger another option's visibility. See How to set up Conditional logics?.
Option width
In the Display tab, set Option width (25%, 33%, 50%, 67%, 75% or 100%) to control how much horizontal space the Divider takes.
Related guides
Last updated