Style Customizer

The Style Customizer controls how the bundle widget looks on your storefront. Changes appear in the preview as you make them.

Open it from Settings → Widget style → Open style customizer, or with Customize style above the preview in the bundle editor. The Widget style card shows your current colours (Primary, Text, Savings, Background, Border) and a sketch of the widget in them. Badges count the layouts and screen sizes you styled on their own, for example "2 layout overrides" and "3 tablet and mobile changes". A theme's app block can still change these settings on one page, in the theme editor.

Radius Bundles

#Layout

The customizer opens full screen:

• The top bar: Select Template Type picks the bundle type you're styling: Fixed bundle, BOGO, Buy X Get Y, Volume discount, Mix & match, Frequently bought together, or Cart page banner. Desktop, Tablet and Mobile switch the preview size. "Not live until you save" reminds you that nothing reaches your store until you click Save (top right). Discard drops your changes.
• The left panel: the layouts for that type at the top (click one to preview and style it), then the Style list: Layout options, Colors, Header, Product Cards, Price & button, Widget box and Advanced. Each row shows a short summary; click it to open the section, and the back arrow to return. Restore defaults, Export and Import sit at the bottom.
• The preview: the widget with sample products, updated as you change settings.

Radius Bundles

A section that has settings shared across layouts starts with Styles apply to: All layouts (shared by every layout of this type) or <layout> only to give the current layout its own look. See Per-layout customization. For Reset section, Restore defaults, Export and Import, see Reset, export and import.

Choosing Cart page banner replaces the Style list with the Cart Banner section.

#Custom or Follow theme

The Colours choice at the top of the Colors section sets the colour mode store-wide:

• Custom: set accent, text, background and border colours for the bundle widget.
• Follow theme: the widget uses your theme's button, text and background colours, including dark mode, and updates when you change your theme. The savings colour is kept and blended toward the theme's text colour so it stays readable on any background.

When Follow theme is on, the presets and colour pickers are hidden (except the savings colour). All other sections remain available.

#Section 1: Colors

Sets the color palette for the widget. Not shown when Cart Banner is selected.

Radius Bundles

#Quick Start presets

Eight one-click presets each apply a colour and shape combination:

A preset applies all its values at once. You can change any setting afterwards; nothing is locked. Presets are hidden when Follow theme is on.

#Color pickers

Hidden when Follow theme is on, except for Savings color:

• Accent color: buttons, badges, and interactive elements
• Text color: headings, product names, body text
• Background: the widget container background
• Border color: borders and dividers between products
• Savings color: discount text and savings amounts. Visible in both colour modes.
• Reward color: the free shipping and free gift lines on Volume discount tiers. Leave it empty to use the savings colour.
• Checkbox color: Frequently bought together only. The colour of the add-on checkboxes.

#Section 2: Header

Controls the bundle title and the savings badge. Not shown when Cart Banner is selected.

#Bundle title

• Show bundle title: on by default. Default for all bundles. A bundle can hide it on its Display step.
• Title size: Small / Medium / Large. Only shown when Show bundle title is on.

#Savings badge

The badge that shows "Save 15%" or "Save $9.00":

• Show savings badge: on by default. Default for all bundles. A bundle can hide it on its Display step. Turn off both this and Show bundle title to remove the whole header. Not shown for Mix & Match.
• Badge position: Left, Right, or Inline with the price text. Not shown for BOGO, Buy X Get Y, or Mix & Match (those layouts display savings differently).
• Badge style: Filled or Outline. Not shown for Mix & Match.

Badge position and style are only shown while Show savings badge is on.

#Section 3: Product Cards

Controls how individual product cards look inside the widget. Not shown when Cart Banner is selected.

Radius Bundles

#Images

• Image size: Small / Medium / Large, controls the image dimensions within the card. Responsive. Not shown for Mix & Match (those cards use a fixed aspect ratio).
• Image fit: Cover (fills the image area, may crop) or Contain (shows the full image, may show space around it). Responsive.
• Image position: Left (image beside text, for List and Classic Card layouts) or Top (image above text). Responsive.
• Image frame: toggle, Fixed bundle, Buy X Get Y and BOGO. Shows a border, background, and rounded corners around each product image. Turn off to let the photo sit directly in the card.

#Card style

By default, product cards use the widget background from Colors.

• Custom card background: turn on to give product cards their own background colour, then pick it in Card background. With Follow theme on, the switch stays but the colour picker is hidden.
• Show card border: on/off. Every bundle type.
• Card shadow: on/off. Fixed bundle only, and only while Custom card background is on.

#Section 4: Price & button

The foot of the widget: the price summary and the add-to-cart button. Not shown when Cart Banner is selected.

#Price summary

The summary box appears for List, Grid, Slider, Compact, Split Deal, and Classic Card layouts only.

• Show summary box: toggle it on or off.
• Summary background: set a background color for the summary area (hidden when Follow theme is on, or when the summary box is off).
• Summary style: Minimal (just text), Card (with a border), Highlight (with accent-colored background) or Inline (one line). Not shown for BOGO and Buy X Get Y.

#Button

Radius Bundles

• Button style: Filled (solid background) or Outline (border only)
• Button shape: Match corners (the button's radius follows Corner roundness in Widget box) or Pill (fully rounded regardless of Widget box settings)
• Button size: Small / Medium / Large. Responsive.
• Button width: Auto (fits the label text) or Full Width (spans the widget width). Not shown for Mix & Match, or for the Compact Grid and Sleek layouts, where the button always fits its label.
• Button color: defaults to the accent color. Override here if you want the button a different color from other accents. Hidden when Follow theme is on.

#Section 5: Layout options

Shows only the controls that apply to the active bundle type and layout. If the current combination has no layout-specific settings, this section is hidden. Not shown when Cart Banner is selected.

#List layout (Fixed Bundle and Volume Discount only)

• Divider style: separator between products: None, Line, or Plus. Responsive.

#Grid layout (Fixed Bundle and Volume Discount only)

• Columns: 1, 2, 3 or 4. Responsive.
• Plus between items: toggle. Shows a + icon between cards in the grid.

#Slider layout (Carousel, Compact Grid, Classic Card)

• Slides visible: 1, 2, 3 or 4 at once. Responsive. (Carousel only)
• Navigation: None, Arrows, Dots, or Both. Responsive.
• Always show arrows: shown when Navigation is Arrows or Both. Keeps the arrows on screen instead of only on hover.
• Peek at the next slide: shows a sliver of the next slide so shoppers can tell there's more. Not shown for BOGO or Buy X Get Y.
• Autoplay: toggle; when on, set the autoplay speed (2–10 seconds).

#BOGO: Classic Card layout

• FREE tag color: color of the FREE label on the reward card.
• Card border style: Solid, Dashed, or Dotted.

#Buy X Get Y: Split Deal layout

• Direction: Row (trigger and reward side by side) or Column (stacked). Responsive.

#Volume Discount

• Savings style: Text or Pill. With Pill, Pill color sets its colour. Every Volume layout.
• Cards per row: Auto, 2, 3 or 4. Pricing Cards only. Responsive.
• Slider style: Detailed or Simple, and Slider color. Quantity Slider only.

Radius Bundles

#Mix & Match

• Columns: number of product columns in the grid. Options: 1 to 5. Responsive. Each Mix & Match layout (Filter Grid, Builder, Steps, Gamified) has its own column setting.
• Group header color: accent color for group headings in the Checklist layout. Defaults to the accent color.
• Sticky bar on mobile: pins the summary and checkout bar to the bottom of the screen on mobile (Filter Grid, Builder, and Gamified layouts only). Leave off if your theme already shows a sticky cart bar.
• Summary style: Pill or Bar (Filter Grid, Checklist and Steps). With Bar, Progress color sets the bar colour.
• Card style: Standard or Compact (Filter Grid, Checklist and Steps).
• Builder style: Standard or Box first (Builder).
• Step header: Circles or Tabs (Steps).
• Gamified style: Ring or Bar (Gamified).
• Progress bar fill: Solid or Gradient. Also shown on the BOGO and Buy X Get Y Checklist layouts and the Volume Quantity Slider.

#Frequently Bought Together

• Separator style: icon between products: Plus, Line, or None.
• Classic strip style: Standard or Tiles. With Tiles, Tile tint sets the tile colour.
• Checklist style: Standard or Cards.
• Mosaic style: Standard or Refined (Numbered mosaic layout).
• Complete the set style: Standard or Refined. Scroll sideways lets a long set scroll instead of wrapping.

#Section 6: Widget box

Controls the widget's outer container. Not shown when Cart Banner is selected.

Radius Bundles

• Corner roundness: Sharp (0 px), Modern (mid-radius), or Rounded (fully rounded). Applies to cards and the widget container. Button shape follows this unless set to Pill.
• Shadow depth: None, Soft, or Strong.
• Spacing: overall padding density. Compact, Comfortable, or Spacious. Responsive.
• Custom widget width: toggle. Off by default; each layout uses its own default width. Turn on to set a maximum width.
  • Widget max width: slider from 300 px to 2000 px. Only shown when Custom widget width is on. The widget stays fluid below this value. Responsive.
• Widget alignment: Left, Center, or Right within its container. Responsive.
• Widget border: toggle the outer widget border on or off.
• Container style: Boxed keeps the background, border, padding, and shadow. Flat removes them so the widget sits flush in the page.

#Section 7: Advanced

Fine-grained control over typography and responsive breakpoints. Not shown when Cart Banner is selected.

#Typography

• Body text size: Small / Medium / Large. Controls product names, prices, and label text. Responsive.

#Breakpoints

Three presets set the pixel values at which the widget switches between desktop, tablet, and mobile styles:

The default is Standard. These breakpoints are independent of your theme's own breakpoints.

To use exact pixel values, turn on Custom breakpoint and set Tablet breakpoint and Mobile breakpoint directly.

#Section 8: Cart Banner

your-store.myshopify.com

The Cart Banner section appears when you select Cart page banner in Select Template Type. Look at the top chooses Custom colours or Match theme. It replaces sections 1–7 and controls the savings banner on your cart page.

#Colors

• Text color: body text in the banner
• Background: banner container background
• Border color: border accent around the banner
• Highlight color: price and savings emphasis text

#Shape & Depth

• Corner roundness: Sharp, Modern, or Rounded
• Shadow depth: None, Soft, or Strong
• Spacing: Compact, Comfortable, or Spacious. Responsive.
• Border line: Solid, Dashed, or Dotted
• Space below: the gap between the banner and the cart items, 0 to 80 px (default 30).

#Typography

• Text size: Small / Medium / Large. Responsive.

#Icon

Choose an icon to the left of the banner message: Price Tag, Percent Badge, Gift, Sparkle, Hot Deal, Checkmark, or No Icon. Set the icon color separately.

The savings banner is enabled or disabled in Settings → General → Show savings in the cart.

#Per-layout customization

By default, every setting you change applies to all layouts for the active bundle type.

To style one layout differently from the others:

1. In the layout list at the top of the left panel, click the layout you want to style.
2. Open a section. Under Styles apply to, choose <layout> only.
3. A blue "<layout> only" strip appears above the Style list while you're in this mode, so you can open several sections for the same layout.
4. Change any settings. Each field you change sits in a light blue box marked "Set for {Layout} only", with a reset arrow that returns it to the value shared by all layouts.
5. To go back to editing every layout, click All layouts in the strip. Selecting another layout also ends it.

When the selected layout has values of its own, a Clear {layout} values button appears next to Styles apply to. It removes them, so the layout uses the shared settings again.

Radius Bundles

Layouts that have separate settings show a count next to their name in the layout list, and each settings section shows how many of its settings the selected layout sets for itself.

#Responsive overrides

21 fields support per-device values. The desktop setting is the base value. Switch the preview to Tablet or Mobile and these fields show a small device icon next to their name. A grey icon means the field uses the desktop value; click it to set a different value for that screen size. A blue icon means the field has its own value there.

Examples:

• Grid columns: 4 on desktop, 2 on tablet, 1 on mobile
• Spacing: Spacious on desktop, Compact on mobile
• Image size: Large on desktop, Small on mobile

Click a blue icon to go back to the desktop value for that screen size.

Radius Bundles

#Reset, export and import

Radius Bundles

#Reset one section

Open a section and click Reset section at its top right. After you confirm, every setting in that section goes back to its default. Other sections stay as they are.

Radius Bundles

Radius Bundles

#Restore all defaults

Restore defaults, at the bottom of the left panel, puts every style setting back to its default, for every bundle type. It asks you to confirm first. The change waits as an unsaved edit: until you click Save, Discard brings your saved look back.

#Export and import

Export downloads your current look as a file named radius-styles- followed by the date, for example radius-styles-2026-10-28.json. It includes changes you haven't saved yet. Use it as a backup, or to copy your look to another store.

Import loads a style file. After you confirm, it replaces every style in the customizer, including unsaved changes. Nothing goes live until you click Save, and Discard still brings your saved look back. A file that isn't a Radius Bundles style file is refused with "This file isn't a Radius Bundles style file."

To back up all of your app settings, not only the styles, use Download settings in Settings → Tools.

#Unsaved changes

A save bar appears at the bottom when you have unsaved changes:

• Discard: reverts all unsaved changes to the last saved state
• Save: pushes all style settings to Shopify metafields, making them live on the storefront immediately

There is no auto-save. If you close the customizer without saving, your changes are lost.

Related: Widget customization overview | Widget setup | Text & languages | Custom CSS