The Kaching Quantity Bundles app automatically adds the widget to the product page without the need for any manual input.
Without that, widget snippet is flexible and can be repositioned / embedded to any place in the store.
Snippet:
<kaching-bundle product-id="{{ product.id }}"></kaching-bundle>You can treat the snippet as an app block, and the app block as a snippet. The only difference between the app block and snippet is that the app block allows you to select a product directly in the customizer
In this article:
Widget snippet overview / required parts to make it work
Before diving into the placement aspect, let's discuss the key elements necessary for the widget snippet to function.
In most cases, all these elements are handled automatically without the need for manual input. However, for a clearer understanding, let's go over them.
The Quantity Bundles widget is rendered through a web component and requires three essential elements to function:
Product ID
The Product ID is typically populated automatically from a {{ product.id }} liquid tag but can also be hard-coded for a specific product (refer to the advanced positioning section for more details).
Form
The form serves as a container for the widget snippet. It functions as a form that triggers the action to add the product to the cart.
* Important - Form Submit Button
The form submit button triggers the form action and is crucial for the widget to render properly.
The Quantity Bundles widget reuses the native form submit button; the snippet itself does not generate a form or a custom submit button. Always ensure that all three elements are in place.
Example:
<!-- Form that wraps Kaching Quantity Bundles snippet -->
<form action="/cart/add" ....>
<!-- Kaching Quantity bundles web component snippet with product ID -->
<kaching-bundle product-id="{{ product.id }}"></kaching-bundle>
<!-- Form submit button -->
<button type="submit"> Add to cart! </button>
</form>
Widget repositioning on the Product Page
The Kaching Quantity Bundles app automatically adds the widget to the first 'add to cart' form on the product page.
However, there might be situations where the default widget placement isn't ideal and needs to be repositioned (e.g. placing it below the "add to cart" button).
The simplest way to change the widget placement is to use the Kaching Quantity Bundles app block. The app block takes care of widget creation and provides product details for it.
Add new block to product information / product details section and select "Kaching Bundles" app block
Move app block to desired position ( e.g. below buy buttons ). Keep product selection default, "from the current page".
Widget placement in the featured product section on the homepage
Refer to this article to learn more about Kaching Quantity Bundles widget in the homepage featured product section.
Widget rendering in a page builder
In other page builders or custom landing pages, the process to render Kaching Quantity Bundles is the same:
Make sure that the snippet is added inside the <form> element.
The snippet contains the product ID (either produced by liquid or added manually).
The form contains an add to cart button.
Widget rendering in a custom Shopify page
In certain instances, the Kaching Quantity Bundles widget may be needed on a custom Shopify (non-product) page. Let's explore how to render it in such cases.
In most cases, process to add widget in a custom Shopify landing page is the same as in the homepage:
By combining Featured product section with Kaching Quantity Bundles app block
By adding widget snippet to a custom liquid block in the featured product section.
By adding widget snippet directly to theme liquid file ( featured-product.liquid )
Featured product section and Kaching Quantity Bundles app block:
Widget rendering using custom liquid block.
In older themes (1.0), you won't have app blocks. In this case, you can utilize a custom liquid block with our app snippet:
Snippet will get product ID from the featured product section automatically.
Advanced: Rendering widget in a custom liquid section / for a custom product
The power of the Kaching Quantity Bundles widget lies in its ability to be rendered on any page, within any context, or injected into specific sections of a theme.
Let's take a look at how the widget can be rendered in a completely custom liquid section on a custom landing page.
Example:
<!-- Form that wraps Kaching Quantity Bundles snippet -->
<form action="/cart/add" ....>
<!-- Kaching Quantity bundles web component snippet with product ID -->
<kaching-bundle product-id="8092648079600"></kaching-bundle>
<!-- Form submit button -->
<button type="submit"> Add to cart! </button>
</form>
The sole distinction lies in the "product-id="8092648079600" part within the widget snippet. You can locate the Product ID in the Shopify admin by checking the URL of the product's edit page.
The portion following /products/ in the URL represents the Product ID – in this instance, 8092648079600.
By supplying the Product ID directly, the snippet will fetch specific product details and bundle configuration, rendering the widget accordingly.
This is powerful because you can create a custom liquid section that aligns with your design system and incorporate the bundles widget into it.
