---
title: "How do I change the bundle widget's design and add custom CSS?"
description: "Style the bundle widget on the Design tab: layout, color presets, element styles and custom CSS per bundle or for the whole store. What CSS is allowed."
url: "https://smart-bundles.io/help/bundles/widget-design-and-custom-css"
updated: "2026-11-02"
product: "SMART Bundles App & Upsells"
section: "Help center / Bundles"
---


# How do I change the bundle widget's design and add custom CSS?

Use the bundle's **Design** tab: **General style** for layout, color presets, radius, spacing, font and width, **Element styles** for each part of the widget, and **Custom CSS** at the bottom for anything else. CSS for every bundle goes in the app's main **Settings** > **Custom code**. The app has no custom JavaScript.

![Bundle editor on the Design tab with color presets and style settings next to the live preview](https://smart-bundles.io/screens/admin-bundle-editor-design.png)

*The Design tab: presets, colors and element styles.*

## General style

- **Layout**: **Stacked**, **Grid** or **Horizontal**.
- **Colors**: preset swatches Default, Forest, Purple, Sunset, Rose, Midnight (a dark mode for dark themes), Earth, Gold and Black. A preset replaces every color; over custom colors, the editor asks "Replace your custom colors?" first.
- **Accent**: the default color for the button, radios, checkboxes, switches, progress bar and timer blocks. Then **Card background**, **Selected background**, **Card border**, **Selected border**, **Offer title**, **Subtitle**, **Price**, **Badge** and **Badge text**.
- **Corner radius**, **Spacing**, **Font** (**Theme font** or **System font**), **Widget width** (**Theme default** or **Custom** with a **Maximum width**), and **Space above the widget** / **Space below the widget**.

The live preview on the right updates as you edit. Its icons are **Change preview product**, **Mobile preview** and **Preview as** (a market and currency).

## Element styles

One accordion holds the details: **Offer card**, **Offer text**, **Price and badge** (including **Show struck price**: **Off**, **Price before discount** or **Compare-at price**), **Header**, **Image**, **Product bundle**, **Product picker**, **Variant pickers**, **Checkbox and radio**, **Gifts and upsells**, **Button** and **Sold out**.

- One offer only: on the **Offers** tab, open the offer > **Appearance** for **Badge shape** (**Square**, **Pill**, **Ribbon**), **Badge position** (**Top right**, **Top left**, **Inline after the title**), **Highlight this offer** and **Show as sold out**.
- Extras: the **Countdown timer**, **Progressive gifts**, **Upsell add-ons** and **Subscriptions** cards each have their own **Style** tab.
- Texts: offer texts are on the **Offers** tab, the rest on the **Settings** tab > **Widget text**. See [Translate the widget](https://smart-bundles.io/help/getting-started/translate-the-widget).
- Theme price: **Update theme product price** (Settings tab > **Theme integration**, on by default) makes the theme's price follow the selected offer, as the **Offer total** or the **Price per item**.

## Add custom CSS

1. For one bundle: on the **Design** tab, scroll to the **Custom CSS** card. It is "Applied after the global custom CSS from Settings".
2. For every bundle: in the app's main **Settings**, open **Custom code** > **Custom CSS**. It applies on every page that renders the widget.
3. Each box holds up to 20,000 characters. Save the bundle or the settings, then reload your product page.

The widget is plain HTML on your theme's page, with class names that start with sw-. For example:

```
.sw-root .sw-offer-title { text-transform: uppercase; }
.sw-root .sw-offer--selected { box-shadow: none; }
```

## What CSS is refused

- CSS that loads files is refused on save: url(), image-set(), src(), @import and "</".
- Allowed exceptions: data: images, your store's own /cdn/shop/ files, files on cdn.shopify.com, Google Fonts files, and @import of Google Fonts or Shopify fonts stylesheets.
- A "<" alone is fine, so media ranges such as (width < 750px) work.
- There is no custom JavaScript field. It was removed from the app.

Widget not where you want it? See [Place the bundle widget](https://smart-bundles.io/help/getting-started/place-the-bundle-widget). Styling the Mix and match picker: [Mix and match offer](https://smart-bundles.io/help/bundles/mix-and-match-offer).

**Make the widget match your theme** SMART Bundles App & Upsells is free on the Shopify App Store, with every design setting and custom CSS included. [Install SMART Bundles App & Upsells on the Shopify App Store](https://apps.shopify.com/smart-automatic-discounts).

## Frequently asked questions

### Can I add custom JavaScript to the widget?

No. The app has custom CSS only, per bundle and for the whole store.

### Which CSS wins, the store-wide one or the bundle's?

The bundle's custom CSS comes after the store-wide CSS from Settings > Custom code, so it wins when both set the same property on the same selector.

### My CSS with a font @import was refused. Why?

Only Google Fonts and Shopify fonts stylesheets can be imported. Other hosts are refused because they load files from outside your store.