Custom CSS
Add your own CSS when the built-in design settings don't go far enough.
This is the developer escape hatch. Everything you can do with the Colors, Typography, and Spacing & Sizing cards, do there first — those settings survive app updates cleanly.
Add custom CSS
Open your bundle and go to the Design tab.
Open the Custom CSS Settings card, marked Only for Developers.
Type your CSS into the Custom CSS field.
Click Save and check a real product page.
CSS applies to this bundle only. It doesn't carry over to other bundles.
Find the right selector
Open a product page showing the bundle on your storefront.
Right-click the element and choose Inspect.
Copy the class from the element panel and write your rule against it.
When your theme fights back
Theme stylesheets sometimes load after the app's and win. If a rule looks correct but nothing changes:
- Make the selector more specific by adding a parent class.
- As a last resort, add
!importantto the declaration.
Things to check before you ship
- Look at the page on mobile as well as desktop.
- Test in an incognito window so you're not seeing cached CSS.
- Keep the CSS short. Long overrides break when the block's markup changes.
Keep a copy
Paste your CSS somewhere outside the app too. It makes it far easier to reapply on a duplicated bundle, or to roll back.