Colours & branding

Make it yours

The bundle builder is built from a small set of named colours, so you can re-tint it to match your shop without editing any files: pick one Brand colour for the quick win, or set individual colours in CSS for a fuller match. Either way the change flows through every layout: the Add to Cart button, the selected options, the running total and the highlights.

The quick way: pick a Brand colour

Most shops only need this. Go to BundleBoss → Tools and, under Appearance, set a Brand colour. Pick one colour and the builder’s buttons, highlights and links match your shop, on the product page and in the cart, with no code at all. Leave it empty for the default, theme-friendly look.

That single colour is about ninety percent of the effect. If you want to fine-tune individual elements, the CSS below gives you full control.

The Bundle word

On the same Appearance panel you can pick the word your shoppers see for a bundle: “box”, “kit”, “hamper”, “case”, whatever fits your shop (singular, then plural). It shapes the storefront wording everywhere it appears: the pricing pills (“2+ boxes: 10% off”), the order panel (“Box added to your basket”, “3 boxes in your basket”) and the buttons (“Build a new box”). Leave both fields empty for the automatic choice: “box” for build-a-box bundles, “bundle” for everything else.

Corner style

Coming soon

This control is in final testing and is not in the released plugin yet. Below is how it will work.

Also on the Appearance panel, Corner style sets how round the builder’s cards, buttons and chips are. Rounded is the friendly default, Square is sharp and technical, and Soft sits between the two. It matches the builder’s feel to your shop with no code, the same way the Brand colour matches its colour. Your colour swatches stay round whatever you pick, because a colour swatch reads as a dot.

Fine-tune with CSS (advanced)

Go to Appearance → Customize → Additional CSS and paste this, swapping the colour for your brand’s:

:root {
  --bb-accent: #c2188f;       /* buttons, selected options, highlights */
  --bb-accent-deep: #9e1474;  /* the darker shade on hover */
}

Click Publish. That single change is usually all most shops need: it recolours the buttons, the chosen options and the progress highlights in one go. The Customizer previews it live, so you can try a colour before you save, and remove it any time to go back to the default.

Finding your colour

The #c2188f part is a hex code, the standard way to write a colour for the web. There are two easy ways to get the one you want:

• Use a plain colour name. You can skip codes altogether and write a name instead, for example --bb-accent: teal; or --bb-accent: navy;. Most everyday colours work this way.
• Use your exact brand colour. Your logo files or brand guidelines usually list its hex code. If you do not have it to hand, any free colour picker will give you one: pick your colour and copy the # value it shows.

The colours you can set

You can fine-tune any of these the same way. The accent is the big one; the rest are there if you want a fuller match.

Setting	Controls
--bb-accent	The main accent: buttons, selected options, highlights
--bb-accent-deep	The darker accent shown on hover and press
--bb-summary-bg	The background of the sticky summary bar
--bb-ink	Headings and the strongest text
--bb-text	Body text
--bb-muted	Secondary and label text
--bb-border	Card edges and divider lines
--bb-success	The “you save” and in-stock green

Tip

Start with just --bb-accent set to your brand colour. That is about ninety percent of the effect, and you can always add the others later.

This is different from colour swatches

The colours here style the configurator’s own buttons and bars. The little colour circles a customer picks from (for a “Colour” option) are set separately, per attribute. See Colour swatches for those.