Custom CSS

When the built-in appearance settings don’t get you all the way, add your own CSS. The product-group widget and the collection widget each have their own Custom CSS field.

Note

Before reaching for CSS, check the rest of the Advanced section. It also has margin and alignment controls, which cover most spacing and positioning needs without writing any code.

Where to add it

1. Open Color Swatches and go to Appearance.
2. On the Product groups tab, find the Product swatches settings (for product pages) or the Collection swatches settings (for collection pages).
3. Expand the Advanced section.
4. Paste your CSS into the Custom CSS field and click Save.

Each widget has its own field, so product-page and collection-page styles stay separate.

Writing your CSS

Scope your rules to the widget’s classes so they don’t leak into the rest of your theme. The swatch markup uses classes prefixed with pl-swatches. For example:

/* Square swatches with a bold ring on the active one */
.pl-swatches__swatch {
  border-radius: 4px;
}
.pl-swatches__swatch-wrapper--active .pl-swatches__swatch {
  outline: 2px solid #111;
}

To find the exact class for an element, open a product or collection page on your storefront, right-click a swatch, and choose Inspect. The classes you’ll target all start with pl-swatches.

Custom JS

The Advanced section also has a Custom JS field, but it’s read-only: support sets it up for you, and you can switch it on or off with the Enable custom JS checkbox.

To run your own scripts, listen for the widget’s load events from your theme instead, or contact support and we’ll add the JS for you.

Need a hand

If you’re not sure which selector to target, contact support with a screenshot of the change you want and we’ll send you the CSS.