Custom CSS for swatches
Most changes don't need code. Try the style editor's settings first (see swatch styles). When a setting doesn't exist, add CSS to the style. Custom CSS works on every plan.
Where to add CSS
- Go to Appearance/Style and click Customize on a style. Or, in a saved group, click Edit next to its appearance.
- Open the CSS section of the editor.
- Type your CSS in Scoped CSS. The preview updates as you type.
- Click Save.
CSS belongs to the style, not to one group. Every group that uses the style gets it.
How Scoped CSS works
The app wraps your CSS in the style's container. In swatch, Dropdown and Slider styles, the field's note says: "IMPORTANT: This CSS is scoped to the group container, so you don't need to add any selectors for the container. Just add the styles you want to apply and any nested/child selectors."
That means:
- A rule with no selector styles the container itself.
- A selector, like
label, matches elements inside the container. &stands for the container, so& [data-option-value]matches each option inside it.
Your rules stay inside the group's container.
Which selectors work
The editor checks each selector against the preview next to it. If nothing in the preview matches, it underlines the selector with "Invalid selector." and offers Remove. It's a warning only. It doesn't stop you saving.
The check only sees the preview. A selector for something the preview doesn't show, like a sold-out swatch, gets flagged too. Some parts of a selector are skipped during the check:
:hoveris ignored, so[data-option-value]:hoveris checked as[data-option-value].::beforeand::afterare not checked.- Values in
data-attributes are ignored, so[data-option-value="red-shirt"]is checked as[data-option-value]. - Only the part before
:has(is checked.
The Button style always accepts label and .fd-options-button__options, even when the check can't find them.
These selectors match parts of a swatch style:
label: the label above the swatches..fd-options-swatch__options: the box that holds the swatches.[data-option-value]: each swatch. The value is the product's handle.[data-option-value].active: the selected swatch.[data-option-value].unavailable: a sold-out swatch.
In the Button style, [data-option-value] and .active work the same way, and .fd-options-button__options is the box that holds the buttons.
Examples
Bold, uppercase label
label {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}Outline the selected swatch
[data-option-value].active {
outline: 2px solid #000;
outline-offset: 2px;
}Add space and a divider above the group
No selector, so it styles the container:
padding-top: 12px;
border-top: 1px solid #e5e5e5;Tighten the text under each swatch
The Swatch: Polaroid preset ships with this rule:
[data-option-value] {
line-height: 1em;
}Global CSS
Each style also has a Global CSS field. In swatch and Button styles, its note says it "will be injected into the head of the page. Use this to override certain things where necessary." Global CSS is not scoped and not checked, so it can affect your whole store. Use Scoped CSS unless you need to style something outside the group.
