Custom CSS

Settings has one Custom CSS field, shared by every campaign’s widget on your store. Use it for the finishing touches a campaign’s own Widget › Style tab doesn’t cover — matching a font, adjusting spacing, restyling a border, or hiding an element — rather than for building a different widget from scratch. The Style tab already covers colors, spacing, corner radius, and effects with plain fields; reach for Custom CSS only when that isn’t enough, since a rule you add here applies everywhere, not to one campaign.

Your CSS loads after the widget’s own styles, so it overrides them without needing !important for most changes.

Limits

Rule	Value
Maximum length	10,000 characters
Forbidden	The characters </ anywhere in the CSS

Plain CSS only. The </ restriction exists because your CSS is embedded inline in a <script> tag on the product page, as well as served from the CDN — that exact character sequence could close the surrounding tag early, and real CSS never legitimately needs it. There’s no other denylist: selectors, @media queries, animations, and custom properties are all fine.

Changes go live on your next publish, which starts as soon as you hit Save — there’s no separate “publish CSS” step.

Tip

Use the Beautify button to reformat what you paste in before saving — useful if you’re copying from a minified source.

Examples

The app doesn’t publish a class reference, so use your browser’s inspector on a live product page to find the class you want to target. These use real classes from the current widget markup.

Match the widget’s font to your theme:

.sfw { font-family: inherit; }

Make the price bold specifically on the Option cards layout:

.w-cards .price { font-weight: 700; }

Hide the “You save” line if you’d rather keep the widget minimal:

.you-save { display: none; }

Tighten the padding only on narrow screens, since @media queries work as normal:

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

Caution

Custom CSS isn’t covered by support. If a rule breaks the widget’s layout — hides the add-to-cart button, overlaps text, or breaks at phone width — that’s on the CSS, not the app. Test on a real product page at a narrow width before you rely on it, and remove the rule if you’re not sure what broke.

Cross-link: Widget layouts, Widget text and translations.