Bold Bundles V2 Code Install Instructions

Note: Within the theme files, complete the following steps.

1. Duplicate themes, to create a backup copy.
2. From Shopify's admin, select Online Store.

   

3. Select Actions.

   

4. Select Edit code.

   

5. Under "Snippets", find these files:
   • bold-common.liquid
   • bold-product.liquid
   • bold-variant.liquid
   • shappify-bdl-load-bundle.liquid

   

6. For any that don't exist:
   1. Select Add a new snippet.

      

   2. Enter the correct snippet name.

      

   3. Select Create snippet.

      

   4. Copy and paste the code found in each of these links into their respective files:
      • bold-common.liquid
      • bold-product.liquid
      • bold-variant.liquid
      • shappify-bdl-load-bundle.liquid

      

   5. Select Save.

      

   6. Repeat steps 6a – e for each missing snippet file.

Note: Within the theme files, complete the following steps.

1. Under "Templates", select collection.liquid.

   Note: If your theme contains sections, you may need to open collection-template.liquid under "Sections" instead.

   

2. Find each instance of:

   {% for product in collection.products %}

   Note: If you can't find this code, look to see if the theme has a "product-loop.liquid". Can't find this code?

   

3. Paste:

   {% include 'bold-product' with product, hide_action: 'skip' %}

   on the line below each instance.

   

4. Select Save.

   

Note: Within the theme files, complete the following steps.

1. Under "Templates", select index.liquid.

   Note: If your theme contains sections, you may need to look under "Sections" instead. The file may be named: featured-products.liquid, home-collection.liquid, home-featured-products.liquid, featured-row.liquid, simple-collection.liquid, featured-collection.liquid, home-tab.liquid, home-big-product.liquid, index-products.liquid or tabs-collection.liquid.

   

2. Find each instance of:

   {% for product in collection.products %}

   Note If you can't find this code, look to see if the theme has a "product-loop.liquid". Can't find this code?

   

3. Paste:

   {% include 'bold-product' with product, hide_action: 'skip' %}

   on the line below each instance.

   

4. Select Save.

   

Note: Within the theme files, complete the following steps.

1. Under "Snippets", select related-products.liquid.

   

2. Find each instance of:

   {% for product in collection.products %}

   Note If you can't find this code, look to see if the theme has a "product-loop.liquid". Can't find this code?

   

3. Paste:

   {% include 'bold-product' with product, hide_action: 'skip' %}

   on the line below each instance.

   

4. Select Save.

   

Note: Within the theme files, complete the following steps.

1. Under "Templates", select search.liquid.

   

2. Find each instance of:

   {% for item in search.results %}

   

3. Paste:

   {% include 'bold-product' with item, hide_action: 'skip' %}

   on the line below each instance.

   

4. Select Save.

   

Note: Within the theme files, complete the following steps.

1. Under "Templates", select product.liquid.

   

2. Add this code to the top of the file:

   Note: If your theme contains sections, you may have to make these changes in product-template.liquid under "Sections".

   {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}

   

3. Find each instance of:

   {% for variant in product.variants %}

   

4. Paste:

   {% include 'bold-variant' with variant, hide_action: 'skip' %}

   on the line below each instance.

   Note: If your theme uses swatches, where variants are shown as buttons instead of through a drop-down menu, this code will also need to be added to a snippet file, usually named swatch.liquid or product-swatch.liquid.

   

5. Find each instance of:

   product.variants.size

   Note: If you can't find this in the product.liquid file, then check the snippets folder for a product-form.liquid or short-form.liquid file and look for the code in there.

6. Replace each instance with:

   bold_variants_size

7. Find each instance of:

   {{ product | json }}

   Note: If you can't find {{ product | json }} in those files, then try searching for it in the theme.liquid file. If it's not in the product.liquid or theme.liquid file, then that can be skipped.

   

8. Replace each instance with:

   {% include 'bold-product', output: 'json' %}

   

9. Add this code where you would like the product bundle to display on the product page.

   Note: This code cannot be within the form tags. We recommend adding it either after the </form> tag or just before the code that outputs the related products. If you can't find the </form> tag in the product.liquid file, check the snippets folder for a product-form.liquid or short-form.liquid file and look for the code in there.

   {% unless bundle_loaded == 'true' %}
   {% include 'shappify-bdl-load-bundle' %}
   {% assign bundle_loaded = 'true' %}
   {% endunless %}

   

10. Select Save.

    

Note: Within the theme files, complete the following steps.

1. Under "Snippets", select bold-common.liquid.

   

2. Copy and paste this code in the bottom of the file.

   {{ 'https://bundles.boldapps.net/js/bundles.js' | script_tag }}
   {{ 'bold-bundles.css' | asset_url | stylesheet_tag }}

   

3. Select Save.

   

Note: Within the theme files, complete the following steps.

1. Under "Layout", select theme.liquid.

   

2. Copy and paste this code directly above the </head> tag:

   {% include 'bold-common' %}

   

3. Select Save.

   

Note: Within the theme files, complete the following steps.

1. Under "Templates", select cart.liquid.

   Note: If your theme contains sections, you may have to look for this code under "Sections" in cart-template.liquid instead.

   

2. Find every occurrence of code similar to:

   {{ item.price | money }}

   On newer themes, it will be:

   {{  item.final_price | money }}

   Note: The item price display can vary by theme but should be similar to this.

   

3. Copy and paste this code directly before that line:

   <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" style="display:none !important;"></span>

   

4. Find every occurrence of code similar to:

   {{ item.line_price | money }}

   On newer themes, it will be:

   {{ item.final_line_price | money }}

   Note: The item line price display can vary by theme but should be similar to this.

   

5. Copy and paste this code directly before that line:

   <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" style="display:none !important;"></span>

   

6. Find every occurrence of code similar to:

   {{ cart.total_price | money }}

   Note: The cart total price display can vary by theme but should be similar to this.

   

7. Copy and paste this code directly above that line:

   <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>

   

8. Find the section that starts similar to:

   {% for p in item.properties %}

   

9. Replace the entire section with:

   <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_properties" style="display:none !important;"></span>
   {% assign propertySize = item.properties | size %}
   {% if propertySize > 0 %}
       {% for p in item.properties %}
           {% assign first_character_in_key = p.first | truncate: 1, '' %}
           {% unless p.last == blank or first_character_in_key == '_' %}
               {{ p.first }}:
               {% if p.last contains '/uploads/' %}
                  <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
               {% else %}
                   {{ p.last }}
               {% endif %}
           {% endunless %}
       {% endfor %}
   {% endif %}

   

10. Select Save.

    

• Overview
• Files to Update
• product.price
• item.price
• Other