# Match the widget to your brand

> Set your brand colors, font and corner radius, and fine-tune the bundle builder's look.

Source: https://help.attravo.com/bundle-builder/articles/match-the-widget-to-your-brand
Updated: 2026-10-06

A widget that looks like the rest of your store feels trustworthy, and shoppers buy from what they trust. All the brand settings live in one place and apply to every bundle.

## Set your brand colors and font

1. In the app, go to **Settings**. It opens on the **Appearance** tab.
2. Under **Brand**, set:
   - **Primary color**: your accent for buttons, progress and highlights.
   - **Secondary color**: text and icons that sit on the primary color, like step numbers and badges.

![The Primary color and Secondary color fields](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/12cf6fe9-057e-41ee-be3a-61ba6247a821/brand-1-colors-a75e7d98c3.webp#w=1432&h=296)

3. Choose a **Font family**, or keep **Inherit from theme** to use your theme's font, and set the **Border radius** for how rounded cards and buttons are.

![The Font family and Border radius fields](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/12cf6fe9-057e-41ee-be3a-61ba6247a821/brand-2-font-radius-e9b928d95b.webp#w=1432&h=228)

4. Click **Save** in the bar at the top of the page.

The **Live preview** shows each change as you make it, and switches to the page the setting affects:

![Changing the primary color updates the live preview](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/12cf6fe9-057e-41ee-be3a-61ba6247a821/brand-3-live-preview-46e3fac2e9.mp4#w=896&h=1988)

Your storefront picks up saved changes within about 3 minutes.

## Fine-tune the bundle builder

The bundle builder on your bundle page has its own color and style settings. Leave a color on its default to keep the builder's own look, and change only what should match your brand.

1. Under **Bundle builder colors**, set colors for **Text**, **Step headers**, **Buttons** and **Discount progress**. A color you set gets a **Reset to default** link, and **Reset all to default** clears them all.

![The Buttons group in Bundle builder colors](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/12cf6fe9-057e-41ee-be3a-61ba6247a821/brand-4-builder-colors-15cd9dc977.webp#w=1432&h=240)

2. Under **Bundle builder style**, choose:
   - **Heading style**: **Capitalize Each Word**, **As written** or **ALL CAPS**.
   - **Step heading alignment** and **Card text alignment**.
   - **Text size**, from 80% to 140%.
   - **Product image shape** and **Product image fit**, so photos sit well in the cards.
   - **Show View product link on cards**.

![Heading style, alignment and text size](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/12cf6fe9-057e-41ee-be3a-61ba6247a821/brand-5-builder-style-54044cdda3.webp#w=1432&h=432)

3. Click **Save**.

> [!NOTE]
> On product pages, the **PDP Bundle Box** block uses its own colors, corner radius and font. See [Style bundles on product pages](https://help.attravo.com/bundle-builder/articles/style-bundles-on-product-pages.md).