Install
One file: sections/mf-bundle-builder.liquid. It appears in the theme editor as EX · Bundle & save.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"https://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-bundle-builder.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Bundle & Save" (bundle-builder) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor. - Customize. Online Store → Themes → Customize → Add section → EX · Bundle & save. Every text, color and product is a setting.
Pro
The Liquid for Bundle & Save is part of Unlimited
The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.
Why it converts
Tiered quantity discounts raise average order value; a preselected middle tier anchors the choice above a single unit.
Specs
About this section
Bundle & Save is a Pro Shopify Online Store 2.0 section that sells more units of one product through quantity tiers. It resolves the product from its own product setting, then from the product page it sits on. Each tier is a block with a label, a caption, a quantity from 1 to 10, a discount from 0 to 60 percent, an optional badge such as Most popular, and a preselect checkbox. Tiers render as selectable cards built on real radio inputs: a fan of stacked product thumbnails shows the quantity, and Liquid computes the bundle total, the per-unit price, the struck regular total and a savings pill from the variant price. The selected card lifts with a gradient border and a soft glow. When the product has variants, a variant select recomputes every price in the browser. A summary bar shows the running total and an Add bundle to cart button that adds the chosen variant at the chosen quantity through Shopify's AJAX Cart API, dispatches cart:refresh and mf:cart:added, and falls back to the normal product form without JavaScript. Merchants also set the heading, subheading, rating line, labels, reassurance note, after-add behaviour, padding and eight colors. Shopify applies the price through an automatic discount (Amount off products with a minimum quantity), and a setup note appears only in the theme editor. On mobile the cards become compact rows; reduced motion removes the lift, fan and count-up. It is one self-contained .liquid file.
Questions
Does the section apply the discount itself?
No. Liquid cannot change cart prices, so the section displays the tier prices and Shopify applies them. In Shopify admin go to Discounts, create an automatic Amount off products discount with a minimum quantity of items for each tier (for example 15% from 2 items, 25% from 3). A reminder listing your tiers appears in the theme editor only.
Which product does it sell?
The product chosen in the section's Product setting. Leave it empty on a product template and the section uses the product being viewed. Without a product outside a product page, shoppers see nothing and the theme editor shows a designed demo.
How do tiers and the preselected card work?
Each Tier block sets a label, caption, quantity, discount and optional badge. Tick Preselect this tier on the one you want to anchor, usually the middle tier; if several are ticked the first wins. Up to five tiers are supported and the grid adapts to how many you add.
Is it accessible and does it work without JavaScript?
Tiers are native radio inputs in a fieldset, fully keyboard operable with a visible focus ring, and the add-to-cart result is announced to screen readers. The radios and variant select belong to a real Shopify product form, so the chosen quantity still reaches the cart if JavaScript fails.
More sections
Pro