Product options
Controls how product variant selectors (swatches, buttons, dropdowns) appear on product cards throughout your store.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Product options
Settings
General
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Enable product options on cards** | Shows variant options directly on product cards. | On / Off | On |
| **Visible labels** | Comma-separated option names to show when product options are disabled. Only visible when product options are turned off. | Text field | None |
| **Picker type** | Sets the style used for variant selectors on product cards. | Swatch, Button, Dropdown | Swatch |
| **Swatch shape** | Sets the shape of color and image swatches. Visible when picker type is not Button. | Circle, Square | Circle |
| **Swatch size** | Sets how large swatches appear. Visible when picker type is Swatch. | Extra small, Small, Medium, Large | Small |
| **Button size** | Sets how large option buttons appear. Visible when picker type is not Dropdown. | Extra small, Small, Medium, Large | Medium |
| **Gap** (buttons) | Controls the space between option buttons. Visible when picker type is not Dropdown. | 0 – 20 px (step 1) | 10 px |
| **Dropdown size** | Sets how large the dropdown selector appears. Visible when picker type is Dropdown. | Extra small, Small, Medium, Large | Medium |
| **Gap** (dropdown) | Controls the space between dropdown selectors. Visible when picker type is Dropdown. | 0 – 24 px (step 1) | 16 px |
| **Border radius (desktop)** | Sets how rounded the option selector corners are on desktop. Visible when picker type is not Dropdown. | 0 – 100 px (step 1) | 99 px |
| **Border radius (mobile)** | Sets how rounded the option selector corners are on mobile. Visible when picker type is not Dropdown. | 0 – 100 px (step 1) | 99 px |
| **Swatch border width** | Sets the thickness of the border around swatches. Visible when picker type is not Button. | 0 – 3 px (step 1) | 1 px |
| **Max swatches** | Limits how many swatches are shown before the rest are hidden behind a count indicator. | 2 – 10 (step 1) | 6 |
Option type mapping
Use these fields to override the global picker type for specific option names. Enter option names separated by commas. Any option name listed here will use the corresponding picker style instead of the default picker type set above.
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Button labels** | Comma-separated option names that should use the button picker. | Text field | None |
| **Dropdown labels** | Comma-separated option names that should use the dropdown picker. | Text field | None |
Colors (light mode)
Colors -- Buttons
Button -- Default
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the default background color for option buttons in light mode. | Color picker | #ffffff |
| **Text color** | Sets the default text color for option buttons in light mode. | Color picker | #111111 |
| **Border color** | Sets the default border color for option buttons in light mode. | Color picker | #d1d5db |
Button -- Hover
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the background color for option buttons on hover in light mode. | Color picker | #f3f4f6 |
| **Text color** | Sets the text color for option buttons on hover in light mode. | Color picker | #111111 |
| **Border color** | Sets the border color for option buttons on hover in light mode. | Color picker | #111111 |
Button -- Active
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the background color for the selected option button in light mode. | Color picker | #111111 |
| **Text color** | Sets the text color for the selected option button in light mode. | Color picker | #ffffff |
| **Border color** | Sets the border color for the selected option button in light mode. | Color picker | #111111 |
Colors -- Swatches
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Swatch border** | Sets the border color around swatches in light mode. | Color picker | #d1d5db |
| **Swatch hover ring** | Sets the ring color that appears when hovering over a swatch in light mode. | Color picker | #111111 |
| **Swatch active ring** | Sets the ring color around the currently selected swatch in light mode. | Color picker | #111111 |
Colors -- Dropdown
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the background color of the dropdown in light mode. | Color picker | #ffffff |
| **Text color** | Sets the text color of the dropdown in light mode. | Color picker | #111111 |
| **Border color** | Sets the border color of the dropdown in light mode. | Color picker | #d1d5db |
| **Item hover background** | Sets the background color of dropdown items on hover in light mode. | Color picker | #f3f4f6 |
| **Active background** | Sets the background color of the selected dropdown item in light mode. | Color picker | #111111 |
| **Active text** | Sets the text color of the selected dropdown item in light mode. | Color picker | #ffffff |
Colors (dark mode)
Colors -- Buttons
Button -- Default
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the default background color for option buttons in dark mode. | Color picker | #1f2937 |
| **Text color** | Sets the default text color for option buttons in dark mode. | Color picker | #f9fafb |
| **Border color** | Sets the default border color for option buttons in dark mode. | Color picker | #374151 |
Button -- Hover
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the background color for option buttons on hover in dark mode. | Color picker | #374151 |
| **Text color** | Sets the text color for option buttons on hover in dark mode. | Color picker | #ffffff |
| **Border color** | Sets the border color for option buttons on hover in dark mode. | Color picker | #ffffff |
Button -- Active
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the background color for the selected option button in dark mode. | Color picker | #ffffff |
| **Text color** | Sets the text color for the selected option button in dark mode. | Color picker | #111111 |
| **Border color** | Sets the border color for the selected option button in dark mode. | Color picker | #ffffff |
Colors -- Swatches
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Swatch border** | Sets the border color around swatches in dark mode. | Color picker | #374151 |
| **Swatch hover ring** | Sets the ring color that appears when hovering over a swatch in dark mode. | Color picker | #ffffff |
| **Swatch active ring** | Sets the ring color around the currently selected swatch in dark mode. | Color picker | #ffffff |
Colors -- Dropdown
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Background color** | Sets the background color of the dropdown in dark mode. | Color picker | #1f2937 |
| **Text color** | Sets the text color of the dropdown in dark mode. | Color picker | #f9fafb |
| **Border color** | Sets the border color of the dropdown in dark mode. | Color picker | #374151 |
| **Item hover background** | Sets the background color of dropdown items on hover in dark mode. | Color picker | #374151 |
| **Active background** | Sets the background color of the selected dropdown item in dark mode. | Color picker | #ffffff |
| **Active text** | Sets the text color of the selected dropdown item in dark mode. | Color picker | #111111 |