Storefront
Customizing the widget
The Style Customizer edits the bundle widget's appearance with a live preview. For the full control reference, see Style Customizer.
#Accessing the customizer
Go to Settings in the left navigation, then click Widget style in the Settings menu. Click Open style customizer.
Controls are on the left; the live widget preview is on the right.
#Layouts
Available layouts differ by bundle type. You choose the layout when you create or edit a bundle, not in the customizer.
Fixed Bundle:
| Layout | Best for |
|---|---|
| Grid | 3+ products; card-based, easy to scan |
| List | 2–4 products; clean and readable |
| Slider | 4+ products; swipeable, good for mobile |
| Compact | Tight spaces or sidebar placement |
Grid and Slider cards have a taller image area, which works well for product photography.
BOGO:
| Layout | Description |
|---|---|
| Classic Card | Card with a FREE label highlight |
| Compact Grid | Smaller card grid with navigation |
| Minimalist | Stripped-back, text-forward |
| Sleek | Horizontal, polished layout |
Buy X Get Y:
| Layout | Description |
|---|---|
| Compact Grid | Smaller card grid with navigation |
| Minimalist | Stripped-back, text-forward |
| Sleek | Horizontal, polished layout |
| Checklist | Checkbox-style product selection |
| Split Deal | Side-by-side trigger and reward |
Volume Discount:
| Layout | Description |
|---|---|
| Tier List | Table of quantity tiers and prices |
| Pricing Cards | One card per tier |
| Quantity Slider | Draggable slider with live price update |
| Savings Calculator | Interactive quantity input with live total |
Mix & Match:
| Layout | Description |
|---|---|
| Filter Grid | Product grid with group tabs and search |
| Checklist | One group per row; shoppers tick items from each |
| Builder | Shopping-cart-style builder; shoppers add from a list |
| Steps | One group per step; guided, linear selection flow |
| Gamified | A progress ring or bar that fills as shoppers pick |
Every Mix & Match layout shows how many items each group still needs. The column count is set per layout in the customizer's Layout options.
Frequently Bought Together:
| Layout | Description |
|---|---|
| Classic strip | Product images in a row joined by + signs, with a ticked list |
| Checklist | A list with a checkbox on every add-on |
| Numbered mosaic | Numbered cards, one per item |
| Complete the set | Cards under a progress bar that fills as more of the set is ticked |
| Inline add-ons | The main product on top and the add-ons in a compact box below |
Sold-out products are marked with a sold-out badge across all bundle types and layouts. The add-to-cart button is blocked when any required product is out of stock.
#Style presets
Eight one-click presets give you a starting point:
- Minimal: Sharp edges, no shadows, high contrast
- Soft: Rounded corners, subtle shadows
- Bold: Strong contrast, fully rounded, heavy shadows
- Elegant: Sophisticated curves and spacing
- Dark: Dark background with cyan accents
- Nature: Green tones, organic feel
- Warm: Orange and amber palette
- Professional: Blue accents, structured, clean
Selecting a preset applies all its values at once. You can then override individual settings without losing the rest of the preset.
#Color and shape controls
In the Colors section, you control:
- Accent color: Buttons, badges, and interactive elements
- Text color: Headings, product names, body text
- Background color: The widget container background
- Border color: Borders and dividers
- Savings color: The color used for discount text and the savings highlight
The Colours switch at the top of the Colors section (Custom or Follow theme) sets whether these colors come from you or from your theme. It applies to every bundle type. Follow theme takes text, background and button colours from your theme, including dark mode; your savings colour is kept.
In the Widget box section, Corner roundness (Sharp / Modern / Rounded) and Shadow depth (None / Soft / Strong) set the shape. Spacing sets the padding density (Compact / Comfortable / Spacious).
#Responsive overrides
Layout and spacing settings support separate values for desktop, tablet, and mobile. For example, you can set Grid to 3 columns on desktop, 2 on tablet, and 1 on mobile. Fields with responsive support show small device icons. Click an icon to set a device-specific value.
Color settings and corner/shape style apply uniformly across all screen sizes.
#Saving
Changes aren't applied until you save. A save bar appears at the bottom of the customizer when you have unsaved changes. Save pushes the styles to Shopify metafields and they take effect on the storefront immediately. Discard reverts to the last saved state.