The bundle block should look like part of your product page, not like an app bolted onto it. Three tabs control that: Settings for layout and behaviour, Colors for every colour, and Text for fonts and sizes. Two settings on the Settings tab also change what your theme displays, and those are the ones worth understanding before you switch them on.
In this article:
Layout and spacing
On the Settings tab:
Setting | What it does |
|
|
| Size and corner rounding of offer images |
| Gap between offers |
| The button label. The in-flight state reads |
Per-offer, on the Offers tab, Layout switches between Horizontal and Vertical.
Pricing display, including the two theme settings
Setting | What it does |
| Shows the per-unit price on each offer |
| Shows a crossed-out original |
| Uses the product's own compare-at price from Shopify |
|
|
| Changes the price your theme displays |
| Changes the savings badge your theme displays |
⚠️ The last two reach outside the bundle block. Update theme product price rewrites the price shown by your theme's own product section to match the selected offer. It makes the page consistent, and it also means your product page price changes as customers click between offers. If that is unexpected, this is the setting responsible. See Why does my product image change when a bundle is active?
Show individual unit price is worth turning on for quantity breaks. "3 for $54" means less than "3 for $54, that's $18 each" when the single unit price is $24.
Variant images and swatches
Setting | What it does |
| Shows an image per variant in the bundle |
| Uses your theme's own swatch styling instead of Atlas's |
| Changes the main product image when a variant is picked |
| Size and corner rounding |
| Which variant each offer starts on |
| Configure the swatches themselves |
| Let Atlas configure swatches for you |
⚠️ Two of these are behind common surprises. Display variant's image as main product image when selected is why the main product photo changes when a customer picks a colour in the bundle. Use native theme swatches hands swatch rendering to your theme, and if your theme does not support them the swatches can disappear. Both are covered in the troubleshooting articles below.
If swatch options will not load you may see We couldn't load product options from Shopify. Please try again in a moment., or a more specific message asking you to select a collection or at least one product first. Some selected products could not be read. Remove and re-add them, then try again. means one product in your selection is the problem.
Colours
The Colors tab groups every colour control:
Group | Covers |
| Line accent, title, subtitle, background, selected background, hover background, bundle title, border, radio button, border radius, border thickness |
| Badge background, badge text, gradient start and end |
| Price and compare-at price |
| Inner badge background and text |
| Upsell background, selected background, text, selected text |
| Gift background, selected background, text, selected text |
| Selector background, text, border, and variant label colour |
| Timer background, text, and gradient |
Most groups support gradients. Gradient direction offers Left to right, Right to left, Top to bottom, Bottom to top, Top left to bottom right and Top right to bottom left.
On a quantity selector bundle there are extra gradient controls: Use gradient for background, Use gradient for selected background and Use gradient for border, each with its own start colour, end colour and direction, plus a separate Selected background for the offer the customer has chosen.
Offer gradients apply to a scope you choose with Add background gradient to: None, Main offer, Selected offer, or All offers. There is also a gradient font colour, labelled Font color (overrides offer text colors).
💡 Take your colours from your theme rather than inventing them. Copy the hex values your theme uses for buttons, borders and body text, and the block stops looking like a separate app.
Text and fonts
The Text tab groups typography by area: Main text, Badge & label text, Price text, and Upsell & gift text.
Each group offers Font size (px) and Font weight & style, with weights from Light (300) through Extra bold (800), each with an italic variant.
Font sizes are validated on save. Exceeding a range returns {Label} must be between {min} and {max}:
Field | Minimum | Maximum |
Title Font Size | 10 | 30 |
Subtitle Font Size | 10 | 20 |
Badge Font Size | 8 | 16 |
Price Font Size | 12 | 24 |
Compare Price Font Size | 12 | 20 |
The quantity selector layout
One bundle layout, the quantity selector, has its own settings group with card-based controls:
Setting | Default |
| 4 |
| 2 |
| 12 |
| 2 |
| Adjustable |
It also has its own fields: Header badge with placeholder e.g. Most popular, and Offer label with placeholder e.g. Save 20%, plus card, badge and text colours. With no offers configured the preview reads No offers to display. Add offers to see the preview.
A practical order to work in
Get the offers right first. Design decisions are easier once the content is settled.
Set the layout and spacing.
Set colours, starting from your theme's existing values.
Set fonts last, and only where the defaults genuinely clash.
Preview on mobile before publishing.
ℹ️ The editor preview shows unsaved changes, so you can experiment freely. Nothing reaches your store until you publish the bundle.