CSS variables and styling

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 the built-in styles that hang off it keep working, along with any Custom CSS you wrote against that class.

2. Use the CSS variables

Most of the colors, sizes, and radii a merchant picks on the Design tab are exposed as CSS variables on the builder's container (oxify-bundle-builder-container), so your markup can follow those settings automatically instead of hard-coding values that go stale the moment someone changes a color:

<div
  style={{
    background: "var(--oxify-bb-card-bg)",
    color: "var(--oxify-bb-card-text)",
    borderRadius: "var(--oxify-bb-product-card-border-radius)",
  }}
>
  <span style={{ color: "var(--oxify-bb-card-price)" }}>{props.formattedPrice}</span>
</div>

The full set follows the pattern --oxify-bb-*. To see every variable the builder sets, inspect the oxify-bundle-builder-container element in your browser's dev tools — they're listed in its style attribute. The ones you'll reach for most:

Colors come through as rgba(…) values and sizes include their unit, so you can drop a variable straight into a style.

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 Settings card on the same Design tab — click Add custom CSS if you don't see it, and make sure its switch is on. That keeps your JSX markup readable instead of full of inline styles.

Inner classes worth reusing

The starting templates are built from the app's own classes, which is why "Reset to default" gives you something that already looks right. You can reuse them in your own markup to pick up the same styling:

Fonts, images, and icons

Does this slow the storefront down?

The compiler never reaches the storefront. It only runs in the admin, when you click Compile or switch a template on. Your storefront receives the already-compiled result — shoppers don't download the code editor, the compiler, or your original JSX. Because the compiled code travels with the builder's settings, keeping templates compact is worthwhile.