Manual bundle snippet installation
This step-by-step tutorial will ensure that you have installed the bundle cart snippets manually on the store. If this snippet is not installed, the cart will show the bundle purchase items as individual items and will not be grouped automatically.
Step 1: Download the bundle snippet and upload a new file in your theme called loop_bundle.js
Step 2: Add the following code at the bottom of the cart page. Note that your cart page might be named differently.
<code><script defer="defer">
window.Loop = {};
window.Loop.bundleCartAllItems = {{ cart.items | json }};
</script>
<script src="{{ 'loop_bundle.js' | asset_url }}"></script>
Step 3: Add the following code inside the items loop on the cart page
` {% comment %} LOOP SUBSCRIPTIONS (https://apps.shopify.com/loop-subscriptions) DO NOT modify this source code because It is automatically generated from LOOP SUBSCRIPTIONS BUNDLE DESIGN If you need to make change, please contact the Loop support team
LOOP BUNDLE CODE STARTS
{% endcomment %}
{% assign isBundleItem = false %}
{%- for property in item.properties -%}
{% if property.first == 'bundleId' %}
{% assign isBundleItem = true %}
{% break %}
{% endif %}
{%- endfor -%}
{% if isBundleItem == true %}
{% continue %}
{% endif %}
{% comment %}
LOOP BUNDLE CODE ENDS
{% endcomment %}
Step 4: Inside the renderBundle function of loop_bundle.js Change the cart-items-body class to the cart page tbody class name if required.
Step 5: Fix CSS if needed. To fix CSS go into loop_bundle.js asset and change the HTML inside the getBundleCartItemsTemplate function.
API endpoints
Need help?
No worries - we're here for you!
If you have any questions or need assistance, feel free to email us at [email protected] or chat with us using the support beacon at the bottom right of your screen.
Regards,
Loop Subscriptions Team 🙂