Bold Bundles Code Install Instructions

• bold-common.liquid
• bold-product.liquid
• bold-variant.liquid
• shappify-bdl-load-bundle.liquid

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.

Under "Templates", select collection.liquid.

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

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?

Paste:

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

on the line below each instance.

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.

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?

Paste:

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

on the line below each instance.

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?

Paste:

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

on the line below each instance.

Find each instance of:

{% for item in search.results %}

Paste:

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

on the line below each instance.

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 %}

Find each instance of:

{% for variant in product.variants %}

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.

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.

Replace each instance with:

bold_variants_size

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.

Replace each instance with:

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

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 %}

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

{% include 'bold-common' %}

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.

Find every occurrence of code similar to:

{{ item.price | money }}

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

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>

Find every occurrence of code similar to:

{{ item.line_price | money }}

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

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>

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.

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>

Find the section that starts similar to:

{% for p in item.properties %}

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 %}