The five templates

Each template receives a props object with everything it needs already prepared — plain values, formatted strings, and ready-to-use functions. This page lists every prop for each of the five templates. Values marked honor it exist for a reason — the built-in buttons follow them, so a button that ignores them looks clickable when the built-in one wouldn't be.

The exact prop list for the template you're editing is also shown in the app, right inside the editor.

Full layout — the whole arrangement

Root class: oxify-bundle-builder-layout

Replaces where every piece sits rather than what any one of them looks like. It's the biggest of the five and has its own guide, covering the props.slots pieces, the wrapper class that decides whether the sidebar is a sticky column or a full-width block, and ready-to-paste recipes.

Product card — one card per product

Root class: oxify-bb-product-card

Rendered once per product in the active category — and on the All tab, once per product per category, grouped so each category's products stay together. Column count (including the mobile Cards Per Row (Mobile) setting) is controlled by the grid, so keep your card fluid — avoid fixed widths.

Recipe — a minimal card with a sale badge:

<div className="oxify-bb-product-card">
  <img src={props.displayImage} alt={props.product.title} />
 
  {props.discountPercentage > 0 && (
    <span className="my-badge">Save {props.discountPercentage}%</span>
  )}
 
  <div>{props.product.title}</div>
  <div>{props.isPriceLoading ? "…" : props.formattedPrice}</div>
 
  <button onClick={props.onAddToKit} disabled={props.isAddButtonDisabled}>
    {props.isOutOfStock ? props.outOfStockText : props.buttonText}
  </button>
</div>

Category tabs — the switcher above the grid

Root class: oxify-bb-tabs

Rendered once — and only while the Tab Button Template row's own switch is on.

Recipe — starting template:

<div className="oxify-bb-tabs" data-alignment={props.alignment}>
  {props.tabs.map((tab) => (
    <button
      key={tab.id}
      className={"oxify-bb-tab " + (tab.isActive ? "active" : "")}
      onClick={() => props.onCategoryChange(tab.id)}
    >
      {tab.image && <img src={tab.image} alt={tab.name} />}
      <span>{tab.name}</span>
    </button>
  ))}
</div>

Sidebar — kit summary and add-to-cart

Root class: oxify-bb-kit-sidebar

Rendered once, beside the products grid. This template also replaces the Buy Box sidebar (Sidebar Widget → Buy Box) when active.

The merchant's text settings reach you through props — title, buttonText, instructionText and the badge text. Only instructionText, emptyText and the badge text have tokens, and those are already filled in for you.

<a
  href={props.checkoutUrl}
  onClick={(e) => {
    e.preventDefault();
    if (!props.isAddToCartDisabled) props.onAddToCart();
  }}
>
  {props.buttonText}
</a>

Subscribe & Save props

These carry the Subscriptions row's checkbox. They're additive — a template written without them renders exactly as before. For the quick route, drop {props.subscriptionBlock} anywhere in your markup: it's the ready-made checkbox card, already wired to the cart.

Recipe — box tabs with savings badges:

<div className="oxify-bb-kit-sidebar">
  {props.showBoxSelector && (
    <div className="my-boxes">
      {props.boxes.map((box) => (
        <button
          key={box.id}
          className={"my-box " + (box.id === props.selectedBoxId ? "is-selected" : "")}
          onClick={() => props.onBoxChange(box.id)}
        >
          <span>{box.title}</span>
          {props.getBoxBadgeText(box) && (
            <span className="my-box-badge">{props.getBoxBadgeText(box)}</span>
          )}
        </button>
      ))}
    </div>
  )}
 
  {/* …kit items and the add-to-cart button… */}
</div>

Toast — the confirmation message

Root class: oxify-bb-toast

Rendered only while a message is active — and only if the merchant's Add to Cart Message switch is on. The message disappears by itself after about three seconds.

Recipe — starting template:

<div className="oxify-bb-toast">
  <div className="oxify-bb-toast-content">{props.message}</div>
</div>

More worked examples — variant swatches, category headings, kit slots, your own subscribe checkbox — are in Recipes.