BYOB styles customization

The BYOB bundle builder widget supports visual customization so merchants can match it to their store theme. This document covers all available settings and CSS variables.

How it works

The BYOB block in the Shopify theme editor includes color pickers, a roundness slider, a button style preset, and a Custom CSS textarea. Each layer builds on the previous one.

The priority order:

1. Defaults — the widget ships with a black-and-white design
2. Color pickers & roundness — visual settings in the theme editor (accent, text, background, secondary text, border, roundness)
3. Button style preset — the "Button style" dropdown (filled/outline/minimal) adjusts button and chip appearance
4. Custom CSS — anything in the textarea wins over all of the above

How to apply

Color pickers (recommended)

In the Shopify theme editor:

1. Go to Theme > Customize > App embeds > BYOB
2. Scroll to the Colors section
3. Use the color pickers and roundness slider to match the store theme
4. Save

Available pickers:

Custom CSS (advanced)

For fine-grained control beyond the color pickers, use the Custom CSS textarea. Paste a CSS block targeting #byob-app-embed-wrapper  :

#byob-app-embed-wrapper {
  --byob-color-accent: #2563eb;
  --byob-radius: 8px;
}

Only include the variables you want to change — everything else keeps its default or derives automatically.

Variables reference

Core variables

Setting these automatically updates the rest of the widget. Most customizations only need these. All are controllable via the color pickers.

> Note: Horizontal margins and product grid columns are already controlled by the block's slider and dropdown settings. No need to set those via CSS.

Derived variables

These are calculated automatically from the core variables above. They can also be set directly via the secondary text and border color pickers. Only set them in Custom CSS if you need values different from both the pickers and the automatic derivation.

Buttons

Pack option chips

The pack size selector buttons (e.g. "Pack of 4", "Pack of 6").

Product description truncation

The product description text shown in the BYOB widget is automatically truncated using CSS line-clamp. The defaults differ by context:

Area                 | Variable                          | Default
Product selector     | --byob-modal-description-clamp    | 6 (first 6 lines)
Mini cart (mobile)   | --byob-mobile-description-clamp   | 2 (first 2 lines)
Mini cart (desktop)  | —                                 | No limit (full text)

To customize, set these variables in the Custom CSS textarea. For example, to show the full description in the product selector and keep mobile at 2 lines:

#byob-app-embed-wrapper {
  --byob-modal-description-clamp: none;
  --byob-mobile-description-clamp: 2;
}

To limit the product selector to 3 lines instead of 6:

#byob-app-embed-wrapper {
  --byob-modal-description-clamp: 3;
}

Set the value to none to remove truncation entirely, or use any number to set the exact line count.

Button style presets

The "Button style" dropdown in the block settings provides three built-in looks. Custom CSS overrides whichever preset is selected.

• Filled (default) — solid accent-colored buttons with surface-colored text
• Outline — transparent buttons with accent-colored borders, subtle hover
• Minimal — no borders, light gray background tints, understated look

Recipes

Quick rebrand (just set 2 variables)

#byob-app-embed-wrapper {
  --byob-color-accent: #2563eb;
  --byob-radius: 10px;
}

This updates buttons, selected chips, accent borders, and the disabled button tint — all from one color.

Match a store theme

Find the store's colors in the Shopify theme settings or by inspecting the storefront. Map them like this:

Shopify themes store colors as RGB triplets (e.g. 155,4,111  ). You can use them directly with rgb()  :

#byob-app-embed-wrapper {
  --byob-color-accent: rgb(155, 4, 111);
  --byob-color-text: rgb(46, 42, 57);
  --byob-color-surface: rgb(253, 251, 247);
  --byob-radius: 10px;
}

Terracotta warm

Earthy, warm palette with rounded corners:

#byob-app-embed-wrapper {
  --byob-color-text: #3b2820;
  --byob-color-surface: #faf6f1;
  --byob-color-accent: #c2593a;
  --byob-color-text-muted: #8a7468;
  --byob-color-border: #d9c8bc;
  --byob-radius: 15px;
}

Royal purple

Rich purple accent with a soft lavender surface:

#byob-app-embed-wrapper {
  --byob-color-text: #2d1b4e;
  --byob-color-surface: #f5f0fa;
  --byob-color-accent: #7c3aed;
  --byob-color-text-muted: #8b7a9e;
  --byob-color-border: #d4c5e8;
  --byob-radius: 0px;
}

Pastel pop

Playful pastel mint surface with bold dark accents and thick outlined buttons — inspired by AriZona Beverages. Use the Outline button style preset alongside these variables:

#byob-app-embed-wrapper {
  --byob-color-text: #211f1f;
  --byob-color-surface: #e3f8e8;
  --byob-color-accent: #211f1f;
  --byob-color-text-muted: #5a7a60;
  --byob-color-border: #b8e6c1;
  --byob-btn-primary-border: 2px solid #211f1f;
  --byob-option-bg: #fef3d0;
  --byob-option-border: 2px solid #211f1f;
  --byob-option-selected-bg: #f9c8d0;
  --byob-option-selected-color: #211f1f;
  --byob-option-selected-border: 2px solid #211f1f;
  --byob-radius: 8px;
}

Override a derived value

If the automatic muted text color isn't right, override just that one:

#byob-app-embed-wrapper {
  --byob-color-accent: #9b046f;
  --byob-color-text-muted: #8b7f96;
}

The rest still derives from the core colors; only the overridden variable uses the explicit value.

Tips

• Start with the color pickers — most stores only need to set the accent, text, and background colors in the theme editor. No CSS needed.
• Use Custom CSS for fine-tuning — override specific button, chip, or hover variables when the pickers aren't enough.
• Keep contrast accessible — when setting --byob-color-accent  , make sure the surface color contrasts enough to be readable as button text (dark accent + light surface works best).