Custom CSS
Add your own CSS when the built-in design settings don't go far enough.
This is the developer escape hatch. Anything you can do in Tab Button Template, Product Card Template, or Sidebar Widget, do there first — those settings survive app updates cleanly.
Add the Custom CSS card
The card isn't shown by default — you add it.
Open your builder and go to the Design tab.
Scroll to the bottom and use the add control to add Custom CSS Settings.
Type your CSS into the Custom CSS field.
Click Save and check the builder on your storefront.
CSS applies to this builder only.
Find the right selector
Open the live builder page on your storefront.
Right-click the element you want to change and choose Inspect.
Copy its class and write your rule against it.
When your theme fights back
Theme stylesheets sometimes load last and win. Make your selector more specific by adding a parent class, and fall back to !important only if you have to.
Before you ship
- Check both mobile and desktop — the builder's layout changes a lot between them.
- Test in an incognito window so you're not looking at cached CSS.
- Keep the CSS short. Long overrides break when the markup changes.
Keep a copy
Paste your CSS somewhere outside the app too. It makes it far easier to reapply on a duplicated builder, or to roll back.