Place a quantity-break offer after the shopper has selected any required variants but before the Add to cart button. Place an optional complementary bundle after the primary button so it does not delay the base purchase. If the bundle is the product—not an add-on—give it its own primary purchase path.
That is a starting rule, not a universal winner. The right Shopify bundle placement depends on which decision the offer changes, whether the widget must stay inside the product form, and how the sequence works on mobile.
Kaching Bundles & Upsells is a practical fit when you want a quantity-break widget that can be moved through a Shopify app block. It handles the documented placement mechanism; you still need to choose and validate the commercial position.
The placement rule: put the offer where its decision belongs
Do not begin with “above or below Add to cart?” Begin with a more useful question:
Does this offer change the primary purchase, add a secondary purchase, or replace the primary purchase with a bundle?
The answer determines where the offer first belongs.
| Offer job | Defensible starting position | Why |
|---|---|---|
| Change the quantity or configuration being purchased | After required variants, before Add to cart | The shopper must choose the tier before submitting the product form |
| Add a complementary item to an otherwise complete purchase | Immediately after the primary Add to cart area | The add-on remains visible without blocking the base purchase |
| Sell a bundle as the main product | Dedicated bundle PDP or primary bundle-buying flow | Components, options, total price, and inventory are the purchase |
| Explain a bundle that needs proof or comparison | Short prompt in the buying area; full explanation lower on the page | The offer stays discoverable without forcing a large decision block too early |
This map is intentionally different from “put every offer above the fold.” A shopper buying three units of the same serum needs the quantity tiers before pressing Buy. A shopper buying a camera does not necessarily need to evaluate a case-and-memory-card add-on before they can buy the camera.
The same visual widget can therefore deserve two different positions because the offer is doing two different jobs.
Start with the offer’s job
Quantity breaks belong before the buy button
A quantity break changes the quantity and price of the primary product. The selection belongs in the primary purchase sequence:
Product price → required variants → quantity-break tiers → Add to cart
Required variants come first. If a shopper must choose size, color, flavor, or another product option, the bundle selector should not make them believe the purchase is complete before that choice has been made.
The tiers then sit before Add to cart because they determine what the button will submit. Placing them after the button separates the decision from the action it changes. A shopper can press Add to cart and leave without ever seeing the multi-unit option.
That does not mean the widget should sit as high as possible. Price, concise product proof, and required variants may still need to precede it. The aim is continuity, not maximum vertical position.
Complementary bundles should not block the base purchase
A complementary bundle adds another decision to a purchase that can already stand on its own. Examples include:
- a cleanser paired with a moisturizer;
- a coffee maker paired with filters;
- a laptop paired with a sleeve;
- a candle paired with a wick trimmer.
For these offers, immediately after the primary buy area is a safer starting point than inserting a large recommendation block between the shopper’s product choices and the Add to cart button.
The shopper can complete the original job without negotiating a secondary offer first. The bundle is still close enough to the moment of commitment to be considered, but it does not visually take ownership of the page.
There are exceptions. If paid traffic lands on the PDP specifically for a “complete routine” message, the bundle may be the dominant choice rather than a secondary add-on. In that case, treat it like a hero bundle and design the purchase path accordingly.
A hero bundle needs a primary purchase path
Some bundles are not product-page upsells. They are products:
- a build-your-own gift box;
- a routine with several required component choices;
- a fixed kit with its own SKU and inventory behavior;
- a mix-and-match pack where the shopper must fill every slot.
Do not squeeze that journey into a small block attached to one component PDP merely because a theme allows it. The shopper needs to understand what is included, which options remain, the total price, and what will enter the cart.
A dedicated bundle product page or landing flow is usually the clearer architecture. The Shopify bundle apps guide covers options for more complex bundle structures. KACH-097 is about placing an offer within a conventional PDP, not choosing the inventory and fulfillment model for a bundle product.
Protect the product form before moving anything
Placement is partly merchandising and partly page mechanics. A block can look correct while sending the wrong product or failing to submit the selected tier.
Shopify’s product-template documentation describes the product page as containing a product form with product choices and purchase controls. Theme app extensions let merchants place app blocks precisely within compatible theme sections. That flexibility does not remove the widget’s data and form dependencies.
Kaching documents that its Quantity Bundles widget automatically attaches to the first Add to cart form on a product page. If that default location does not suit the page, the Kaching app block can be moved in the product-information section.
The same guide states that a custom snippet needs three things:
- the correct product ID;
- the form that will add the product; and
- the form’s submit button.
That is a hard boundary, not a design preference. Do not move the visible selector into an unrelated section while leaving the functional purchase form somewhere else and assume the connection will survive.
If you add the app block manually, keep its product source set to the product from the current page. Kaching’s troubleshooting documentation warns that selecting a fixed product can make the wrong bundle appear across product pages.
After any move, test the live page rather than relying only on the theme editor:
- Open two eligible products in separate browser tabs.
- Confirm that each page displays the correct deal.
- Select every required variant.
- Select a non-default tier.
- Add it to the cart.
- Confirm the product, variant, quantity, and discount result.
- Repeat on a phone-width viewport and the published theme.
A widget that renders is not necessarily a widget that submits the correct purchase.
Use different sequences on desktop and mobile
Desktop lets the gallery and product information share horizontal space. Mobile converts the same page into one long decision sequence. A widget that feels adjacent to the buy button on desktop can become a full-screen interruption on a phone.
Use these sequences as starting wireframes:
| Offer type | Desktop starting sequence | Mobile starting sequence |
|---|---|---|
| Quantity break | Title/price → variants → tiers → Buy → reassurance | Title/price → concise proof → variants → tiers → Buy or sticky Buy |
| Complementary bundle | Title/price → variants → Buy → complementary offer | Title/price → variants → Buy → compact complementary offer |
| Hero bundle | Bundle promise → components/options → total price → Buy | Bundle promise → progress/options → persistent total → Buy |
| Education-heavy bundle | Buying-zone prompt → Buy → detailed comparison | Short prompt → primary controls → detail lower down, with a return-to-offer path |
These are not four templates to copy without review. Their purpose is to expose sequence problems.
On mobile, check:
- whether the widget pushes required variants or the primary button too far away;
- whether a sticky Buy bar covers the bottom of the selector;
- whether expanded tiers occupy most of the viewport;
- whether price changes remain visible after a tier selection;
- whether the shopper can tell which button completes which offer;
- whether the selected state survives scrolling and variant changes.
Avoid using “above the fold” as the success metric. Mobile fold height varies, and visibility does not prove that the offer was understood. The more useful test is whether the shopper encounters the offer before the action it changes and can complete the purchase without losing context.
Diagnose the current placement before changing it
A low bundle take rate does not automatically mean the widget is too low. Placement is only one failure point.
Use the current funnel to locate the break:
| Observation | More likely question |
|---|---|
| Few eligible visitors see the widget | Is the position too low, collapsed, slow, or absent on a template/device? |
| Visitors see it but rarely select a tier | Is the offer relevant, understandable, and worth the trade-off? |
| They select a tier but do not add it | Does the interaction create variant, button, validation, or mobile friction? |
| They add it but the cart is wrong | Is the widget attached to the correct product/form and is the deal configured correctly? |
| Bundle uptake rises but total PDP conversion falls | Is the offer interrupting the base purchase? |
| AOV rises but contribution per visitor falls | Is the discount or added cost too deep? |
Moving a weak offer higher can simply expose more shoppers to the same problem. Before changing the theme, confirm that the deal applies to the intended products, the savings are clear, the selected state is obvious, and the cart result is valid.
Use a Placement Validation Scorecard
The scorecard connects visibility to a completed and economically useful outcome. Record the baseline before you move the block.
| Metric | What it answers |
|---|---|
| Eligible PDP views | How many visitors had a genuine chance to use the offer? |
| Widget exposure rate | Did the chosen placement become observable? |
| Bundle or tier selection rate | Did exposed shoppers engage with the choice? |
| Add-to-cart completion after selection | Could they complete the action the widget initiated? |
| Primary PDP conversion | Did the offer interfere with the base product purchase? |
| Contribution per eligible visitor | Did the combined outcome improve the money retained from eligible traffic? |
Shopify provides standard customer events for product views and products added to cart. Widget exposure and selection require additional instrumentation if your analytics stack does not already capture them. Kaching documents bundle-selection and variant-related widget events, which a developer or analytics implementation can use; this article does not assume those events are already installed.
Review the scorecard by device. A blended result can hide a desktop improvement and a mobile decline.
Then assign one decision:
| Decision | Evidence pattern |
|---|---|
| KEEP | Downstream completion and contribution support the position without unacceptable damage to primary conversion |
| MOVE | Exposure is weak, but shoppers who see and select the offer complete it successfully |
| SIMPLIFY | Exposure is adequate, but selection or completion fails—especially on mobile |
| INVESTIGATE | Tracking is incomplete, the cart result is invalid, or primary conversion/contribution deteriorates |
Do not invent a universal pass rate. Compare the candidate against the store’s predeclared baseline, allow enough eligible traffic for a meaningful read, and keep the offer, pricing, and traffic treatment stable while placement changes.
Change one placement variable at a time. If you move the block, rewrite its headline, change the tiers, and alter its default selection together, you will not know which change caused the result.
How to reposition Kaching safely
For an Online Store 2.0 theme, the app-block route is the sensible default:
- In Shopify admin, open Online Store → Themes → Customize.
- Open the product template used by the eligible products.
- In the product-information or product-details section, add the Kaching Bundles app block if it is not already present.
- Keep the product source dynamic or set to the product from the current page.
- Drag the block into the starting zone selected by the decision map.
- Save and run the live-page product, variant, quantity, cart, and mobile checks.
Use custom Liquid only when the theme or page builder cannot express the required position with an app block. Kaching’s documentation recommends the app block as the simpler route and explains the additional form requirements for custom placement.
Do not assume the app will choose or test the position for you. Kaching’s current A/B split-testing documentation lists deal, price, layout, image, and button-text variations. It does not document theme-level widget location as an in-app test variable. A placement comparison therefore needs a separate theme and measurement plan unless Kaching documents a new capability.
Cases where moving the widget is the wrong fix
Leave the theme alone until you resolve these conditions:
The economics fail
A better position cannot rescue a tier that gives away more contribution than the additional units or products retain. Validate the discount and variable costs before optimizing exposure.
The offer is hard to understand
If shoppers cannot tell what is included, what they save, or which variants they will receive, the first correction is offer clarity. Moving a confusing block above Add to cart makes the confusion more prominent.
The cart result is invalid
Wrong product, wrong variant, wrong quantity, missing discount, or duplicate line behavior is an implementation failure. Fix it before measuring placement.
The page already presents too many choices
A PDP with subscriptions, one-time purchase, quantity breaks, gifts, warranties, add-ons, accelerated checkout, and a sticky button may need fewer simultaneous decisions. Simplification can be a better test than relocation.
The bundle deserves its own product
If the shopper must configure several components, understand bundle-specific inventory, or compare a full system, use a dedicated bundle flow. Do not make one component’s PDP carry the entire job.
Choose the first placement
Use this final routing rule:
- Quantity break or volume tier: after required variants, before Add to cart.
- Optional complementary bundle: after the primary buy area.
- Bundle as the main product: dedicated PDP or primary bundle flow.
- Offer requiring substantial proof: concise prompt near the buying controls, with the full explanation lower down.
Then protect the product form, inspect the mobile order, and measure exposure through contribution. The first placement is a hypothesis. The scorecard decides whether you keep, move, simplify, or investigate it.
If a movable product-page quantity-break widget matches the offer you are building, claim 20% OFF Kaching for your first 3 months. Use the ShopSideK form on that page to receive the code after you confirm the placement and live-cart test plan.
If you prefer to inspect the listing first, you can also view Kaching on the Shopify App Store.
Frequently asked questions
Should a Shopify bundle widget go above or below Add to cart?
Place a quantity break above Add to cart because it changes the quantity submitted by that button. Start an optional complementary bundle below the primary buy area so it does not block the base purchase. Treat these as starting positions and validate them against primary conversion and contribution.
Should variants appear before the bundle offer?
Yes when the bundle or quantity tiers depend on the selected variant. Required size, color, flavor, or other options should be resolved before the shopper chooses a tier whose availability or price can change with that variant.
Does a Kaching widget need to stay inside the product form?
Kaching documents that its custom widget snippet needs the product ID, a form, and the form’s submit button. Its app block handles those details for normal product-page placement. Do not separate the visible widget from the functional purchase context without verifying the complete custom implementation.
Can Kaching A/B test two product-page positions?
Kaching’s current A/B documentation does not list theme-level widget position as a test variable. It documents testing deals, prices, layouts, images, and button text. Use a separate placement experiment and analytics plan unless the product documentation changes.
How do I know whether the bundle is too low on the page?
Measure eligible PDP views and actual widget exposure. If exposure is weak but exposed shoppers select and complete the offer successfully, moving it is a reasonable next test. If exposure is already adequate, investigate offer relevance, clarity, interaction, and cart behavior before moving it.
Should mobile and desktop use the same bundle placement?
They can use the same theme block, but you should not assume they create the same experience. Review the vertical sequence, sticky controls, expanded widget height, selected-state visibility, and completion metrics separately on mobile and desktop.
