CSS variables and styling
Keep your custom markup in sync with the Design tab's colors, sizes, and radii.
Three things work in your favor when styling a custom template.
1. Keep the root class
Each template lists a root class in The five templates — for example oxify-bb-product-card. Keep it on your outermost element, and every existing layout, spacing, and color setting from the Design tab still applies to your markup.
2. Use the CSS variables
Every color, size, and radius a merchant picks on the Design tab is exposed as a CSS variable on the container, so your markup can follow those settings automatically instead of hard-coding values that go stale the moment someone changes a color:
The full set follows the pattern --oxify-bb-*. The ones you'll reach for most:
| Variable | Comes from |
|---|---|
--oxify-bb-card-bg / --oxify-bb-card-text / --oxify-bb-card-price | Product card colors |
--oxify-bb-product-card-border-radius / -border-width | Product card settings |
--oxify-bb-add-kit-btn-bg / -text / -border-radius | Add button settings |
--oxify-bb-tab-bg / -text / -selected-bg / -selected-text | Tab colors |
--oxify-bb-sidebar-bg / -title / -price / -width | Sidebar settings |
--oxify-bb-toast-background-color / -text-color | Toast settings |
--oxify-bb-corner-radius / --oxify-bb-spacing | Global spacing & sizing |
3. Add your own CSS in the Custom CSS card
For anything beyond what a variable covers, give your elements their own class names and style them in the Custom CSS card on the same Design tab — that keeps your JSX markup readable instead of full of inline styles.
Fonts, images, and icons
| Asset | How to add it |
|---|---|
| Images and icons | Reference any URL directly in an <img src="…">. |
| Custom fonts | Load them via Custom CSS with @font-face or @import. |
Does this slow the storefront down?
No. The compiler only runs in the admin, when you click Compile. Your storefront receives the already-compiled result — the code editor and the compiler itself are never downloaded by shoppers.
Do the Design-tab settings still work?
Yes, as long as you keep the root class and use the --oxify-bb-* variables. Merchant-set text — button labels, sidebar title, instruction text, toast message, badge text — reaches your template through props, already substituted with the real values.