Theming & CSS vars

The widget's colours are controlled by CSS custom properties. You can override them in two ways: from the panel (no code required) or with a CSS rule in your shop.

From the panel

Go to Search → Search Engines → [your engine] → Design and set the colours visually. Changes are reflected immediately without touching your shop's code.

Setting CSS variable
Primary colour --ss-primary
Secondary colour --ss-secondary
Text colour --ss-text
Text on primary --ss-text-on-primary
Text on secondary --ss-text-on-secondary
Regular price colour --ss-price-regular
Sale price colour --ss-price-sale
Original price colour --ss-price-old

With CSS

If you need finer control, override the variables directly in your shop's stylesheet. The most reliable target is the widget's root element, marked with the data-ss-root attribute — every template set carries it regardless of its markup:

[data-ss-root] {
    --ss-primary:          #ff3366;
    --ss-text-on-primary:  #ffffff;
    --ss-price-sale:       #cc0000;
}

The built-in template sets use their own class names on that same root element — .ss-overlay for the overlay styles, .ss-wrapper for the anchored one — so .ss-overlay { --ss-primary: ... } works too, but only for those specific sets. [data-ss-root] works across all of them, including custom ones.

Panel colours and CSS overrides can coexist — your CSS rule will always win due to cascade specificity.

💡 This page only covers styling an existing template set. Building a template set's markup from scratch — including custom conditionals and Display options support — is covered in Custom Design (Advanced).

Next steps