While Product Options inherits your theme’s styling automatically, custom CSS gives you pixel-perfect control. Match exact brand colors, adjust spacing, or create unique effects—all without editing theme files.
Adding Custom CSS
Go to Settings in the app
Find the Custom CSS section
Enter your CSS code in the text area
Click Save
Your custom styles are applied to all Product Options elements.
Common Styling Examples
Change label color:
.product-options-label {
color: #333333;
font-weight: bold;
}Style dropdown select:
.product-options-select {
border: 2px solid #000000;
border-radius: 8px;
padding: 12px;
}Customize swatch size:
.product-options-swatch {
width: 40px;
height: 40px;
border-radius: 50%;
}Style required indicator:
.product-options-required {
color: #ff0000;
}
CSS Class Reference
Container classes:
.product-options-container- Main wrapper.product-options-group- Option group container.product-options-field- Individual option wrapper
Form element classes:
.product-options-label- Option labels.product-options-select- Dropdown elements.product-options-input- Text inputs.product-options-textarea- Paragraph inputs.product-options-checkbox- Checkbox elements.product-options-radio- Radio button elements
Swatch classes:
.product-options-swatch- Swatch container.product-options-swatch.selected- Selected swatch.product-options-swatch-image- Image swatches.product-options-swatch-color- Color swatches
State classes:
.product-options-required- Required field indicator.product-options-error- Validation error state.product-options-disabled- Disabled state
Theme-Specific Adjustments
If your theme has conflicts, inspect elements using browser developer tools to identify specific selectors. Add more specific selectors to override theme styles:
.product-form .product-options-select {
/* More specific selector overrides theme */
border-color: #000000;
}