Divider

Display a visual line separator between options or option sections.

Overview

Divider is a static option type that displays a horizontal line to visually separate options or groups of options on your product page. It's a non-interactive element that helps organize and structure your option layout.

Use Divider for:

• Separating two individual options
• Dividing sections of related options
• Creating visual breaks between option groups
• Organizing complex option sets into clear sections
• Improving readability of long option lists

Key characteristics:

• No customer input required
• Cannot be marked as required
• Label is hidden by default
• Fully customizable appearance (color, thickness, style)
• Purely visual element with no functionality

Configuration

Basic Settings

Setting	Description
Label	Option name (shown in admin only, hidden on storefront by default)
Hide Label from storefront	Enabled by default - divider displays without a label

Advanced Settings

Setting	Description
Internal Label	Admin-only identifier (replaces label in options list)
Help Text	Additional context (appears based on display mode setting)

Divider Appearance Settings

Setting	Description
Divider Color	Hex color code for the divider line (e.g., #000000 for black, #CCCCCC for light gray)
Thickness	Line thickness in pixels (e.g., 1px, 2px, 3px)
Line Style	Visual style of the divider line: Solid, Dashed, Dotted, Double, Groove, or Ridge

Line Style Options

Solid

• A continuous, unbroken line
• Most common style for simple separators
• Best for subtle divisions

Dashed

• A line made of short dashes with gaps between them
• Creates a more casual, less formal appearance
• Useful for optional or less critical divisions

Dotted

• A line made of small dots
• Lighter visual weight than solid or dashed
• Good for subtle section breaks

Double

• Two parallel lines close together
• Creates emphasis and stronger visual separation
• Best for major section divisions

Groove

• A 3D effect that appears carved into the page
• Creates depth with shadow and highlight effects
• Adds visual interest and dimension

Ridge

• A 3D effect that appears raised from the page
• Opposite of groove - appears to protrude
• Creates emphasis through elevation effect

How to Add Divider

1. Navigate to Option Sets and open your option set
2. Click Add Option
3. Select Divider from the Option Type dropdown
4. Enter a Label (optional - hidden on storefront by default)
5. Configure Divider Appearance Settings:
   • Set Divider Color (hex color code)
   • Set Thickness (in pixels)
   • Select Line Style (Solid, Dashed, Dotted, Double, Groove, or Ridge)
6. (Optional) Click Advanced Settings to add Internal Label or Help Text
7. Click Save in the contextual save bar

Use Cases

Separating Two Options

Label: (Hidden) Divider Color: #E5E5E5 Thickness: 1px Line Style: Solid

Result: A subtle gray line appears between two options, creating clear visual separation

Section Break Between Option Groups

Label: (Hidden) Divider Color: #CCCCCC Thickness: 2px Line Style: Solid

Result: A more prominent divider separates major sections (e.g., personalization options from shipping options)

Stylized Section Divider

Label: (Hidden) Divider Color: #333333 Thickness: 3px Line Style: Double

Result: A bold double-line divider creates strong visual emphasis between sections

Subtle Visual Break

Label: (Hidden) Divider Color: #E0E0E0 Thickness: 1px Line Style: Dotted

Result: A light dotted line provides minimal visual separation without being too prominent

Decorative Divider

Label: (Hidden) Divider Color: #666666 Thickness: 2px Line Style: Groove

Result: A 3D groove effect adds visual interest and depth to the option layout

Emphasized Section Marker

Label: (Hidden) Divider Color: #000000 Thickness: 2px Line Style: Ridge

Result: A raised ridge effect creates emphasis and draws attention to the section break

Styling

Divider appearance is controlled entirely through its configuration settings:

• Color: Set via Divider Color hex code
• Thickness: Set via Thickness in pixels
• Style: Set via Line Style dropdown (CSS border-style values)
• Spacing: Follows option spacing from Borders & Shapes

The divider inherits spacing from your theme's option spacing settings but uses its own color, thickness, and style configurations.

Best Practices

Choose appropriate thickness:

• Use 1px for subtle separations between related options
• Use 2px for standard section breaks
• Use 3px+ for major divisions (use sparingly)
• Consider your overall design aesthetic

Select matching colors:

• Match divider color to your theme's border colors
• Use lighter colors (#E5E5E5, #CCCCCC) for subtle breaks
• Use darker colors (#333333, #000000) for emphasis
• Ensure sufficient contrast for visibility

Match style to purpose:

• Solid: Standard, professional separators
• Dashed/Dotted: Lighter, less formal divisions
• Double: Strong section breaks
• Groove/Ridge: Decorative, emphasis divisions

Strategic placement:

• Place between unrelated option groups
• Use to separate required from optional options
• Add before important sections to draw attention
• Don't overuse - too many dividers create visual clutter

Keep label hidden:

• Divider label is hidden by default for good reason
• Visual line is self-explanatory
• Only show label if you need text above the divider
• Consider using Descriptive Text option if you need a labeled section break

Consider mobile experience:

• Ensure divider is visible on small screens
• Test thickness and color contrast on mobile devices
• Verify spacing doesn't create awkward gaps
• Keep dividers subtle to avoid overwhelming mobile layouts

Coordinate with theme:

• Match divider color to your theme's color palette
• Ensure thickness complements other borders in your design
• Use consistent styling across all dividers in an option set
• Test divider appearance with your theme's overall aesthetic

Related

• Descriptive Text - Text-based section breaks
• Internal Label - Admin-only identification
• Help Text - Additional context display
• Borders & Shapes - Option spacing and border styling