Design

The Design tab allows you to customize the appearance and layout of your product options on the storefront. You can select a predefined theme, customize colors, borders, spacing, option layouts, tooltips, buttons, additional prices, and other visual elements. You can also add custom CSS for advanced styling.

This guide explains each setting available in the Design tab and how to configure it.

Step 1: Open the Design Tab

1. From your app dashboard, go to Settings.

2. Click Design.

3. The Design tab contains the following sections:

• Theme

• Option styling

• Storefront Surfaces

• Custom CSS

Configure each section according to the appearance you want on your storefront.

Step 2: Select a Theme

The Theme section provides predefined designs that you can use as a starting point for styling your product options.

1. Default: Provides a clean, neutral design with balanced spacing.

2. Lizard: Provides a fresh, high-contrast green design suitable for bold catalogs.

3. Crave: Provides a warm, appetite-driven design suitable for food and retail stores.

4. Ritual: Provides a soft, neutral design with a subtle accent.

• Active Status Badge: Indicates the currently selected theme and confirms that your changes apply to this active theme.

• Navigation Arrows (< >): Use the arrows to browse additional preset themes; the < arrow is disabled at the beginning of the list.

After selecting a theme, you can further customize its appearance using the Option styling and Storefront Surfaces settings.

Step 3: Configure Text & Background

Open the Text & Background tab under Option styling to control the colors of option text, backgrounds, selected states, and other text elements.

1. Heading: Sets the color of the option heading or title.

2. Description: Sets the color of the description displayed below or beside the option heading.

3. Placeholder: Sets the color of placeholder text displayed inside an empty input field.

4. Entered text: Sets the color of text entered or selected by the customer.

5. Disabled text: Sets the text color of disabled options or fields.

6. Disabled background: Sets the background color of disabled options or fields.

7. Selected / focus accent: Sets the accent color used when an option is selected or an input field receives focus.

8. Option background: Sets the background color of the option area.

9. Hover effect: Defines the visual effect displayed when the customer moves the cursor over an option.

• None: No visual change occurs when hovering.

• Lift: Gives an elevation effect, subtle vertical movement to make the element appear lifted.

• Scale: Slightly enlarges or expands the element to draw attention.

• Shadow: Adds or intensifies a drop shadow behind the element to create depth.

• Glow: Applies a colored outer highlight or glow around the element borders.

Step 4: Configure Box & Border

Open the Box & border tab to control the dimensions, borders, spacing, and shape of option choices and swatches.

1. Swatch width (px): Sets the width of a swatch in pixels.

2. Swatch height (px): Sets the height of a swatch in pixels.

3. Lock ratio:  Controls the width-to-height proportion of the swatch. Keeps the swatch proportions consistent when its dimensions are changed.

4. Border style: Defines the type of border displayed around an option or swatch.

5. Border color:  Sets the color of the option border.

6. Border radius (px):  Controls how rounded the corners of the option are.

7. Border thickness (px):  Controls the thickness of the option border.

8. Padding (px):  Controls the space between the option content and its border.

Step 5: Configure Layout & Behavior

Open the Layout & Behavior tab to control the spacing and arrangement of options and their choices.

1. Title-to-description gap (px):  Controls the space between the option title and its description.

2. Heading-to-input gap (px):  Controls the space between the option heading and the input or choice area.

3. Option-to-option gap (px):  Controls the space between separate options.

4. Choices gap (px):  Controls the space between individual choices within an option.

5. Show price on option value:  Displays the additional price next to an option value when enabled.

6. Show character counter:  Displays a character counter for applicable text fields.

7. Choices direction:  Controls how the choices are arranged, such as horizontally across the available space.

• Horizontal

• vertical

Step 6: Configure Other Styles

Open the Other styles tab to customize additional elements such as buttons, date pickers, required messages, and price displays.

Button Settings

1. Button background: Sets the background color of applicable option buttons.

2. Button text: Sets the text color displayed inside the button.

3. Button hover background: Sets the background color when the customer hovers over the button.

4. Button hover text: Sets the text color when the customer hovers over the button.

Date Picker Settings

5. Date-picker calendar selected day: Sets the text color of the selected date in the date picker.

6. Today marker: Sets the color used to identify the current date.

7. Border radius (px): Controls the roundness of the date picker elements.

Other Settings

8. Required mark: Sets the color of the required-field indicator.

9. Message text: Sets the color of validation or informational messages.

Price Display Settings

10. Choice price style: Determines how an additional price is displayed next to an option choice.

11. Choice price color: Sets the color of the additional price displayed for an option choice.

12. Title price style: Determines how an additional price is displayed alongside the option title.

13. Title price color: Sets the color of the price displayed next to the option title.

Step 7: Configure Tooltip Settings

Under Storefront Surfaces, select the Tooltip tab to customize the appearance and position of help text and tooltips.

1. Help-text position: Determines where the help text appears in relation to the option.

2. Text: Sets the color of the tooltip or help text.

3. Background: Sets the background color of the tooltip.

4. Border: Sets the border color of the tooltip.

Step 8: Configure Add to Cart Settings

Select the Add to Cart tab under Storefront Surfaces to customize the appearance of the Add to Cart element.

1. Text: Sets the text color of the Add to Cart element.

2. Background: Sets the background color of the Add to Cart element.

3. Border: Sets the border color.

4. Hover background: Sets the background color when the customer hovers over the element.

5. Hover text: Sets the text color when the customer hovers over the element.

6. Padding (px): Controls the internal spacing around the button content.

7. Border radius (px): Controls how rounded the corners are.

8. Border thickness (px): Controls the thickness of the border.

Step 9: Configure Additional Price Settings

Select the Additional Price tab under Storefront Surfaces to customize the appearance of additional pricing displayed with product options.

1. Text: Sets the text color of the additional price area.

2. Background: Sets the background color of the additional price area.

3. Border: Sets the border color.

4. Price: Sets the color of the additional price amount.

5. Border radius (px): Controls how rounded the corners are.

6. Border thickness (px): Controls the thickness of the border.

7. Padding (px): Controls the internal spacing around the additional price content.

Step 10: Add Custom CSS

The Custom CSS section allows you to apply additional styling when the standard Design settings do not provide the level of customization you need.

• Enter your CSS rules in the provided editor.

• Use CSS to make additional changes to elements such as spacing, typography, borders, positioning, or other visual properties.

• After adding CSS, review the storefront to confirm that the styling is applied correctly.

The Design tab provides a complete set of controls for customizing how product options appear on your storefront. You can begin with a predefined theme and then adjust individual elements such as colors, borders, spacing, layouts, tooltips, buttons, date pickers, and additional prices.

For more advanced customization, use the Custom CSS section. After completing your configuration, always preview the product on the storefront to make sure the design looks and behaves as expected for your customers.

Need Help?

If you have any questions or need assistance, we will be happy to help.

• Live Chat for quick assistance.

• Submit a Support Ticket for detailed questions or issues.

• Email: support@optionia.com