How to Display Bundle Offers on a Shopify Product Page

Put the bundle offer between the price and the add-to-cart button, preselect the option that is the best value, show the saving both as an amount of money and as a price per unit, and keep the single-unit option in plain view. The offer should read as part of choosing the product, in the same place the shopper already chooses a size or colour. This guide goes through placement, the default selection, how to present the saving, images, the mobile layout and how many offers one page can carry.

Where should a bundle offer sit on the product page?

Directly above the add-to-cart button, below the price and the variant picker. That is where the shopper's eyes are when they decide how much to buy.

Placement further down the page fails for a simple reason: a shopper who has already pressed the button has made the decision. An offer under the description, or in a tab, is seen only by the shoppers who scroll that far, and on a phone that is a long way.

Two details matter:

• The button must reflect the choice. If the shopper picks three, the price on or beside the button should be the price for three. A button that still shows the single price makes people doubt the offer.
• Variants come first. Let the shopper choose the size or scent, then the quantity or bundle. If each unit in a pack can be a different variant, show those pickers only after the pack is chosen.

On a Shopify theme this is done by placing an app block in the product section from the theme editor. Marka Bundles & Upsells shows its offers through one such block, with no theme code to edit, and each offer can be previewed before it is published.

Which option should be preselected?

The one that is the best value for the shopper and that you can afford to sell all day. A default is the path of least effort, so it shapes what people buy more than any other design choice in the offer.

Be honest about it. The selected option must be obvious, the quantity must be stated in words, and the button price must match. Nobody should discover at checkout that they bought three. A shopper who feels tricked may return the order, and is unlikely to buy again.

If your margin on the top tier is thin, do not default to it. Default to the tier where both sides do well; the reasoning for choosing those points is in our guide to setting quantity break tiers.

How should the saving be shown?

In money, and per unit. A percentage alone makes the shopper do arithmetic, and people who have to do arithmetic tend to choose the option they already understand, which is one unit.

Say a candle sells for $24, two for $43 and three for $60. Each option should show:

• One: $24.
• Two: $43, which is $21.50 each. Save $5.
• Three: $60, which is $20 each. Save $12.

The per-unit price lets the shopper compare the tiers at a glance. The amount saved gives them the reason.

Show the saving against the price the single unit actually sells for on that page today. An inflated comparison price costs you the customer's trust the moment they notice it. Rules on savings claims also vary by country, so check the requirements for each market you sell in.

Do bundles of different products need images?

Yes. For a quantity break the shopper knows what they are getting: more of the same. For a fixed bundle or a mix and match set, they need to see every item.

• Show a thumbnail and name for each product in the set.
• Make the first gallery image a photograph of the whole set together, so the bundle looks like one considered thing.
• State sizes and quantities. 'Cleanser 150 ml, toner 100 ml, moisturiser 50 ml' answers the question a photo cannot.

The name and the few words under it do as much work as the pictures; see how to name and describe product bundles.

How should it look on a phone?

Stacked, with each option as a full-width row large enough to tap with a thumb. Side-by-side cards that fit three across on a desktop become unreadable at phone width.

Check these on a real device:

• The selected tier and the add-to-cart button are visible together, or within one short scroll.
• Each row shows quantity, total price, per-unit price and saving without truncation.
• Tapping a row selects it; there is no tiny radio button to aim for.
• The offer does not push the button so far down that a single-unit buyer has to hunt for it.

Should the single-unit option stay visible?

Always. Some shoppers want one, and a first-time buyer often wants to try before committing to three. If the page makes buying one feel hidden or penalised, they leave instead of trading up.

List one unit as the first row, at its normal price, with no negative wording. The offer earns its keep by making the larger options attractive, never by making the smallest one awkward.

How many offers belong on one page?

One. A quantity break, a bundle and a frequently-bought-together panel on the same page ask the shopper to compare three deals before pressing a button. Pick the offer that suits the product, using the guide to Shopify bundle types, and give it the prime position. A small add-on beneath it is the most a page comfortably carries; our piece on add-on upsells on the product page covers how to do that without clutter.

A short checklist

1. Place the offer between the price and the add-to-cart button.
2. Preselect the best-value tier you can afford, and make the selection obvious.
3. Show total price, per-unit price and the saving in money for every tier.
4. Show an image and name for every item in a mixed bundle.
5. Use full-width, tappable rows on mobile and test on a real phone.
6. Keep one unit as a visible, normal option.
7. Confirm the cart and checkout show the same price as the page.

A well-displayed offer is mostly a matter of position, defaults and plain numbers. Marka Bundles & Upsells covers the first step by rendering offers through a theme app block you position yourself.