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 of the list and click Add custom CSS. A Custom CSS Settings row appears.
Click Custom CSS Settings to expand it and type your CSS into the text box.
Make sure the row's toggle is on. On a new builder it starts off, and your CSS isn't used on the storefront until you switch it on.
Click Save and check the builder on your storefront.
The CSS is saved with this builder and only loads where the builder appears, but it isn't limited to the builder's own elements: a rule like button { … } would restyle every button on the page. Start your selectors with the builder's own classes, which begin with oxify-bb- — for example .oxify-bb-product-card.
Once you've saved CSS, the card appears on its own each time you open the Design tab — you only use Add custom CSS the first time.
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.
The colors, sizes and radii from the other Design settings are available to your CSS as --oxify-bb-* variables — see CSS variables and styling.
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.
CSS not enough?
If you need to change the markup rather than just its styling — reorder elements, move the sidebar above the grid, restructure a product card — that's Custom templates, the Custom design template row on the Design tab, where you write the JSX yourself.