Design Settings
These settings apply only to this option set, so you can give different products completely different looks without one style affecting everything.
Each Option Set has its own design settings that control how the options widget (the options panel on your product page) looks on the storefront. These settings are independent per Option Set, so different sets can have different visual styles.
Accessing design settings
Open the Option Set editor → click the Design tab in the top nav.
Typography
| Setting | Description |
|---|---|
| Font family | The font used for all element labels and input text in this option set. Choose from Google Fonts or your uploaded custom fonts. |
| Font size | Base font size in pixels for labels and input text |
| Font weight | Normal, medium, semi-bold, or bold |
Colors
| Setting | Description |
|---|---|
| Label color | Color of all element labels |
| Input text color | Color of text customers type inside inputs |
| Input background | Background fill of text inputs and similar fields |
| Input border color | Border color for inputs in their default (unfocused) state |
| Input focus border color | Border color when an input is focused/active |
| Error color | Color used for validation error messages |
| Required indicator color | Color of the asterisk (*) on required fields |
| Swatch border / selected | Border and selection ring colors for Color Swatch and Image Swatch elements |
Layout & Spacing
| Setting | Description |
|---|---|
| Label position | Place labels above the input (default) or to the left |
| Element spacing | Vertical gap between elements in pixels |
| Input padding | Inner padding of input fields |
| Input border radius | Corner rounding — 0 = sharp square corners, higher numbers = rounder corners, 9999 = fully rounded (capsule-shaped). |
| Swatch size | Width/height of color and image swatch items in pixels |
| Swatch gap | Horizontal/vertical gap between swatches |
| Swatch border radius | Corner rounding of swatch items |
Button styles
| Setting | Description |
|---|---|
| Button background | Background color of Button Group items |
| Button selected background | Background when a button is selected |
| Button text color | Text color of buttons |
| Button selected text color | Text color when selected |
| Button border color | Border for unselected buttons |
| Button border radius | Corner rounding for buttons |
Widget container
| Setting | Description |
|---|---|
| Widget border | Toggle an outer border around the entire option set widget |
| Widget border color | Color of the outer border |
| Widget border radius | Corner rounding of the outer container |
| Widget padding | Inner padding around the set’s content |
| Widget background | Background fill of the widget container |
Presets
Rather than setting every value individually, you can apply a Design Preset — a saved combination of settings. See Presets for how to create and apply them.