How to Add Kaching Bundles to a Replo Landing Page (Without Wrong Cart Items)

Merchants driving paid traffic to Replo landing pages often run into cart errors when adding volume quantity breaks with Kaching Bundles. The cart defaults to one item, passes the wrong variant, or leaves the cart drawer stuck.

To fix this, embed the Kaching Bundles Widget directly inside Replo’s Product Component container. Remove competing native selectors so Kaching controls quantity. Keep only one embed per component. Test on the live published page rather than inside the editor.

Never build separate desktop and mobile Kaching embeds within the same Replo Product Component. Enforce single form ownership. Verify dynamic product binding. Check every tier using our 15-case QA matrix before spending ad budget.

Why Kaching Bundles and Replo Clash (The DOM Form Problem)

Page builders like Replo construct pages with isolated Document Object Model (DOM) elements. When building a landing page, Replo seals product data inside dedicated containers. Standard Shopify Online Store 2.0 themes structure pages using sections and blocks. These keep form state linked across the page.

In Replo, form elements stay inside component boundaries. If an app widget sits outside the right container, it cannot read the active product form. It fails to capture data. The Kaching Bundles Widget relies on the native form container to capture selections and submit line items to the cart.

+----------------------------------------------------------+
|  Replo Product Component Container                       |
|                                                          |
|  +----------------------------------------------------+  |
|  |  Kaching Bundles Widget (Single Source of Truth)   |  |
|  |  - Renders volume tiers (1, 2, 3 units)            |  |
|  |  - Controls variant and quantity selection         |  |
|  +----------------------------------------------------+  |
|                                                          |
|  +----------------------------------------------------+  |
|  |  Native Form Submit Button (Reused by Kaching)     |  |
|  +----------------------------------------------------+  |
+----------------------------------------------------------+

When merchants add duplicate widgets or leave native selectors active, two form systems fight for the cart payload. Redundant Replo selectors can confuse shoppers because Kaching selections take precedence. Duplicate embeds can submit the first widget’s selection instead of the one the shopper used. Fixing these errors requires strict product-form ownership.

The 4 Rules of Product-Form Ownership

Follow four simple rules to keep cart transfers smooth between Replo pages and Kaching Bundles:

Rule 1: Respect the Product Component Container

Always put the Kaching Bundles Widget inside Replo’s Product Component container. If you place the widget in a regular column or layout block, it cannot link to product data. The form breaks. Without this container, the widget cannot track variant picks or pass bundle lines to the cart form.

Rule 2: Enforce Single Embed Ownership

Maintain exactly one Kaching widget embed per Product Component. Page builders tempt designers to make two blocks for desktop and mobile screens. Do not do this. Replo reads values from only the first widget element in the DOM tree. Duplicate embeds can submit the first widget’s selection instead of the one the shopper used. Use one responsive widget across all screen sizes.

Rule 3: Maintain Single State Ownership

Give Kaching Bundles sole state ownership over quantity and variant choices. By default, Kaching hides the theme native quantity input visually to prevent duplicate inputs and buyer confusion. On Replo pages, delete native quantity boxes and extra variant pickers. Shoppers must use only the bundle block.

Rule 4: Route Cart Submissions Through One Pipeline

Never create custom checkout buttons next to Kaching. The Kaching web component snippet reuses the native form submit element to process bundle orders. Cart additions must pass through the primary form action. This keeps line item data and applies tier discounts.

Adding Kaching Bundles to Replo: Step-by-Step Integration

Adding Kaching Quantity Bundles into Replo takes only a few minutes with official partner steps. Complete two checks before building your layout. First, turn on the Kaching Bundles app embed in your Shopify theme settings. Second, set up an active bundle deal for your target product in the Kaching app admin.

Step 1: Open the Replo Page and Identify the Container

Open your landing page in the Replo editor. Find your offer section. Select the Product Component container. Make sure this component links to your target Shopify product.

Step 2: Insert the Kaching Bundles Widget

In the Replo components sidebar, open the app library. Drag the Kaching Bundles Widget into your layout. Place it inside your Product Component. Put it right where you want your tier cards to show. Keep it right above the main button.

Step 3: Remove Competing Form Controls

Check the elements inside your Product Component. Delete any native Replo quantity boxes. If your bundle lets shoppers pick variants inside the widget, remove competing native variant selectors. This stops cart conflicts.

Step 4: Publish and Verify on the Live Storefront

The Kaching widget does not show inside the Replo visual editor. That is normal for web component blocks. Click Publish in Replo. Open the live page in a new window. Check that the tier cards show up.

Custom Liquid Fallback for Complex Layouts

If you use custom layouts where the native Replo block is missing, use the official Custom Liquid snippet. In the Replo editor, add a Custom Liquid block inside your Product Component. Open Config, click Launch Code Editor, paste the snippet, click Save, and publish.

<kaching-bundle product-id="{{ product.id }}"></kaching-bundle>

This web component needs three parts to run: a valid Product ID, placement inside a product form, and an active submit button.

Shopify renders product forms with the form ‘product’ tag, creating an HTML <form action=”/cart/add” method=”post”> element. When adding Custom Liquid in Replo:

1. Put the <kaching-bundle product-id=”{{ product.id }}”></kaching-bundle> snippet inside your <form action=”/cart/add”> container.
2. Make sure the container keeps the native Form Submit Button, since the Kaching snippet does not make its own button.
3. Check that the product tag passes a real product ID.

Choosing Between Kaching Bundles and Replo Native Bundle Builder

Replo provides an internal Bundle Builder component alongside support for third-party tools. Match the right tool to your campaign offer type.

Pick Kaching Bundles when deploying volume breaks across products or setting tiered discount ladders on landing pages. Pick Replo’s native bundle builder when designing product- or variant-based kits where shoppers assemble bundles across catalog items.

Scaling volume offers on your landing pages increases order value potential while keeping your setup clean. Configure your quantity tiers, then verify quantities and discounts at checkout.

Get 20% OFF with discount code SSK20

Troubleshooting the 4 Most Common Replo Cart Errors

When cart errors happen on Replo pages, they typically stem from template layout conflicts rather than app discount bugs. Here is how to fix the four most common issues.

Error 1: Cart Adds Only 1 Item Despite Selecting Multi-Unit Tiers

• Root Cause: In Replo, single-unit defaults typically occur when duplicate widget embeds compete within one Product Component or when the widget is placed outside the component container. (On specific theme PDP templates like Shrine, omitting the native Quantity Selector block causes the form to default to 1 item).
• Resolution: In Replo, ensure exactly one responsive Kaching widget sits inside the Product Component. If troubleshooting on an affected theme PDP template like Shrine, restore the native Quantity Selector block in the theme editor so Kaching can inject bundle quantities.

Error 2: Cart Displays the Wrong Bundle or Wrong Product

• Root Cause: In Replo, the Product Component is bound to the wrong target product, or the Kaching app deal is not configured for that product. (On theme PDP templates, this occurs when an app block is set to a static product instead of the dynamic source).
• Resolution: In Replo, verify your Product Component is linked to the correct target product, and check the Kaching dashboard to confirm the deal includes it. If managing a Shopify theme PDP template, open Online Store > Themes > Customize, select the Kaching app block, set the Product field to dynamic source, and click Save.

Error 3: Dynamic Buy Now Button Disappears on Multi-Variant Tiers

• Root Cause: Shopify dynamic checkout buttons allow shoppers to purchase multiple units of a single variant quickly. The product-page Buy Now button does not support multiple distinct variants or products in the same purchase.
• Intended Behavior: Kaching hides the dynamic Buy Now button when multi-variant tiers, gifts, or upsells are picked. This avoids checkout errors and routes shoppers safely through standard Add to Cart.

Error 4: Cart Drawer Fails to Open After Bundle Addition

• Root Cause: Cart additions pass through the /cart/add.js POST endpoint, but opening the drawer depends on your store’s specific cart setup.
• Resolution: Identify your active drawer solution. If using a theme drawer, set the theme Cart type to Drawer. If using Replo’s slide-out cart, verify button interaction settings. If using a dedicated drawer app like Kaching Cart, verify the app embed is enabled and ensure open drawer on add to cart is active.

Landing Page Unit Economics: Contribution Profit Modeling

Reviewing bundle success on campaign landing pages requires looking at unit economics at the contribution level rather than gross sales alone.

ShopSideK models order economics using Contribution Profit, defined as:

Contribution Profit = Net Revenue − COGS − Pick/Pack/Packaging − Shipping Subsidy − Payment Processing Fees

This example assumes an illustrative payment processing fee schedule:

Payment Processing Fees = Net Revenue × 0.029 + 0.30

Illustrative Basket Contrast (Illustrative Merchant Scenario)

The financial table below is an Illustrative Basket Contrast comparing two separate order baskets on a landing page: a single unit baseline versus a 3-unit bundle tier. This example shows cost absorption across basket sizes and does not claim causal conversion lift.

In this scenario, shipping a 3-unit bundle yields $57.42 in Contribution Profit compared to $23.54 on a single unit. Even after giving a $24.00 price discount, packing three items into one box protects dollar margins under these modeled costs. Packaging ($3.00 vs $4.50) and shipping costs ($2.00 vs $1.00) are sample numbers. Contribution profit reflects order margin and does not include ad spend, app fees, or store overhead.

The 15-Case Published Page-to-Cart QA Matrix

Before sending paid traffic to your Replo landing page, test all active cases on your live store. Only launch when all active checks pass. Mark unused features as N/A. Start each test with an empty cart. Check your items both in the cart and at checkout.

Sibling Architecture and Related Guides

This guide focuses specifically on embedding Kaching into Replo landing pages and fixing cart errors. To explore related pricing models and layout guides, read our sibling guides:

• For theme product page placement above or below the buy button, read our guide on Shopify Bundle Product Page Placement. It covers theme layout hierarchy.
• To compare quantity breaks against BOGO offers and post-purchase upsells, read our analysis on Quantity Breaks vs BOGO vs Bundle Upsells. It compares offer mechanisms.
• For setting multi-tier volume pricing ladders and analyzing take-rates, explore Profitable Shopify Quantity Breaks. It models tier adoption.
• If your offer includes recurring subscription plans across quantity tiers, see Shopify Subscription Plan per Quantity Tier. It explains recurring orders.
• For resolving discount code stacking and checkout combination rules, review Shopify Bundle Discount Stacking. It covers discount rules.
• To calculate your maximum safe discount depth without hurting profits, read Quantity Break Discount Depth. It provides profit formulas.