To make izyBundle work on your shop, your currently published theme must be modified in a special way. Follow this guide to modify your theme.

Step 1: Find your theme

To begin with, go to your "Online Store" section inside Shopify Admin dashboard.

You will see the list of all your themes.

Click on the "Actions" button and then the "Edit code" button.

You will see your theme's code editor. 

Step 2: Create a new snippet

On the left, scroll down to see "Snippets" folder and click on "Add a new snippet".

Give the snippet the following name:

izybundle-generator.liquid

and paste the following content inside:

<script async src="//izybundle.izysuite.com/api/widget/shop={{ shop.permanent_domain }}&product_id={{ product.id }}"></script>
<div class="izy-bundle" data-product-id="{{ product.id }}"></div>

and save the file.

Step 3: Update your products templates

Find all theme's files that contain "product" (or "prod" as shorter version, for example) inside the "Templates" and "Sections" folders.

In each file, find an HTML (or Liquid) form which adds product to cart, and after the closing tag (may be either </form>  or {% endform %} insert the following code:

{%- unless bundle_loaded == 'true' -%}
{%- include 'izybundle-generator' -%}
{%- assign bundle_loaded = 'true' -%}
{%- endunless -%}

and save the file(s).

Step 4: Update your cart template(s)

Find your cart page template inside the "Templates" or "Sections" folders.
Note: If your theme uses cart inside header, do the same steps inside your header.liquid  file.

Find the piece of code similar to {% for p in item.properties %} and insert the following BEFORE:

<span data-item-id="{{ item.id }}" data-bundle-id="{{ item.properties._izybundle_full_bundle.bundle_id  }}" class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_properties" style="display:none !important;"></span>

and AFTER:

{%- if p.first.first == '_' -%}{%- continue -%}{%- endif -%}

Note: If you are using the Fastlane Theme, you must find the following code in your  snippets/header-shopping-cart.liquid file:

<div class="header-cart-item-options" data-header-cart-options>

and add this code:

<span data-item-id="{{ item.id }}" data-bundle-id="{{ item.properties._izybundle_full_bundle.bundle_id  }}" class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_properties" style="display:none !important;"></span>

BEFORE.


Find all occurrences of {{ item.price | money }}  code (or similar)
Note: do not replace anything if item.price  is used inside any logic constructions, like if , unless , elseif  statements.

Right BEFORE this code, insert the following:

<span class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_price" style="display:none !important;"></span>

Find all occurrences of {{ item.line_price | money }}  code (or similar).
Note: do not replace anything if item.line_price  is used inside any logic constructions, like if , unless , elseif  statements.

Right BEFORE this code, insert the following:

<span class="izybundle-hook-DO-NOT-DELETE izybundle_cart_item_total" style="display:none !important;"></span>

Find all occurrences of {{ cart.total_price | money }} code (or similar)
Note: do not replace anything if cart.total_price  is used inside any logic constructions, like if , unless , elseif , assign  statements.

(OPTIONAL) Step 5: Update your Ajax Cart

If your are using "Brooklyn" or "Boundless" themes, you need to modify the file :

assets/theme.js.liquid

Find the function called buildCart and insert the following code AFTER opening curly brace:

if(typeof window.IZY_HELPER !== 'undefined' && typeof window.IZY_HELPER.fixCart !== 'undefined') {cart = window.IZY_HELPER.fixCart(cart);}

That's it! Now you can use izyBundle at 100%.
Note: Don't forget to mark the theme you have modified as "Modified" inside izyBundle app:

Did this answer your question?