Option Group

The Option Group option type allows you to organize and group related options together, enhancing the product page's clarity and user experience. This feature is particularly powerful for complex products where multiple related choices are available, making it easier for customers to navigate and make selections. The grouped options can be expanded or collapsed, offering a streamlined, organized presentation.


Basic Option Settings

1. Option Name

This is the internal name used within your app to identify the Option Group. It helps you organize and manage the options during setup.

2. Label on Product

This label will appear above the Option Group on the product page, guiding customers on the content of the group.

3. Option List

A collection of the options that will be included within this group. This list can comprise various option types, enabling you to create a tailored combination of options that meet your specific needs.

4. Conditional Logic

Allows the Option Group to be displayed or hidden based on customer selections. This is useful for showing the group only when specific criteria are met.


Advanced Option Settings

1. Expand

Controls whether the Option Group is initially expanded or collapsed on the product page, allowing customers to focus on relevant details.

2. Hide "Label on Product"

This setting hides the label from being displayed on the product page, useful when you want a cleaner look without a title.

3. Display Type: Accordion

Displays the Option Group in an accordion style, allowing customers to expand or collapse the group for better navigation and usability.

4. Tooltip

Provides a brief explanation or additional context for the Option Group. This helps customers understand what’s included without cluttering the interface.

5. Help Text

Offers more detailed information directly below the Option Group, guiding customers through their choices with additional support.

6. Class Name

Assigns a custom CSS class to the Option Group, allowing for targeted styling and behavior adjustments. This is useful for maintaining a consistent design across your product pages.

Last updated