1. Bold Commerce Help Center
  2. Bold Bundles - Shopify
  3. Get Started

Bold Bundles Code Install Instructions

Follow
Avatar
Michael
  • Bold Bundles
  • All Versions
  • Advanced liquid knowledge required
  • 30 Minutes+

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Request a Bold Bundles Installation for help.

Before you begin, review Notes Before Installing Apps. This article will help get you prepared and answers many common questions.

Select each step below to view the instructions.

Step 1: Add Snippet Files

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

    select online store

  3. Select Actions.

    Actions

  4. Select Edit code.

    Edit code

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

    find these snippets

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

      add a new snippet

    2. Enter the correct snippet name.

      enter snippet name

    3. Select Create snippet.

      select create snippet

    4. Copy and paste the code found in each of these links into their respective files:

      copy and paste this code

    5. Select Save.

      select save

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

Step 2: Edit collection.liquid

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

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

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

    select collection.liquid

  5. 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?

    find this code

  6. Paste:

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

    on the line below each instance.

    paste this code

  7. Select Save.

    select save

Step 3: Edit index.liquid

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. 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.

    select index.liquid

  5. 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?

    find this code

  6. Paste:

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

    on the line below each instance.

    paste this code

  7. Select Save.

    select save

Step 4: Edit related-products.liquid

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

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

    select related-products/liquid

  5. 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?

    find this code

  6. Paste:

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

    on the line below each instance.

    paste this code

  7. Select Save.

    select save

Step 5: Edit search.liquid

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

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

    select search.liquid

  5. Find each instance of:

    {% for item in search.results %}

    find this code

  6. Paste:

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

    on the line below each instance.

    paste this code

  7. Select Save.

    select save

Step 6: Edit product.liquid

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

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

    select product.liquid

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

    add this code to the top of the file

  6. Find each instance of:

    {% for variant in product.variants %}

    find this code

  7. 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.

    paste this code

  8. 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.

  9. Replace each instance with:

    bold_variants_size

  10. 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.

    find this code

  11. Replace each instance with:

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

    replace this code

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

    Add This Code

  13. Select Save.

    select save

Step 7: Edit bold-common.liquid

  1. From Shopify's admin, select Online Store.

    Online Store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

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

    select bold-common.liquid

  5. 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 }}

    copy and paste this code

  6. Select Save.

    select save

Step 8: Edit theme.liquid

  1. From Shopify's admin, select Online Store.

    Online Store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

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

    select theme.liquid

  5. Copy and paste this code directly above the </head> tag: 
    {% include 'bold-common' %}

    copy and paste this code

  6. Select Save.

    select save

Step 9: Edit cart.liquid

  1. From Shopify's admin, select Online Store.

    Online Store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. 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.

    select cart.liquid

  5. 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.

    Find {{ item.price | money }}

  6. 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>

    Paste {{ item.price | money }}

  7. 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.

    Find {{ item.line_price | money }}

  8. 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>

    Paste {{ item.line_price | money }}

  9. 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.

    Find {{ cart.total_price | money }}

  10. 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>

    Paste {{ cart.total_price | money }}

  11. Find the section that starts similar to:

    {% for p in item.properties %}

    find {% for p in item.properties %}

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

    copy and paste this code

  13. Select Save.

    select save

Step 10: Update Pricing Code

Updates need to be done on all theme files that output product prices on the site. The number and name of the files will vary from theme to theme. Usually, 3-5 files will need to be updated, which will control the price fields on the product, collection, search, related-products (on the product page) and homepage pages. It's important that each theme file that outputs a price be modified to ensure the correct pricing always shows.

When you're ready to proceed, select the "Files to Update" tab.

Go through the list of files, one file at a time, and then reference your theme's files to see if that particular file exists in the theme. Not all of these will appear in a given theme.

When you find a file that your theme has, select the "product.price" tab to continue.

  • "Templates" folder (all themes will have these files)
    • product.liquid
    • index.liquid
    • collection.liquid
    • search.liquid
  • "Snippets" folder (any given theme will typically have several of these)
    • product-block.liquid
    • product-card.liquid
    • product-form.liquid
    • product-grid-collage.liquid
    • product-grid-item-category.liquid
    • product-grid-item.liquid
    • product-list-item.liquid
    • product-listing.liquid
    • product-loop.liquid
    • product-single.liquid
    • product-thumbnail.liquid
    • product.liquid
    • related-products.liquid
    • search-result-grid.liquid
    • search-result.liquid
    • search.liquid
    • short-form.liquid
    • snippet-product-item.liquid
  • "Assets" folder (don't change anything in here)

When you've gone through the list, this step will be complete.

Look for each of these ... ... and replace all instances with this code
product.price bold_price
product.price_min bold_price_min
product.price_max bold_price_max
product.price_varies bold_price_varies
product.compare_at_price bold_compare_at_price
product.compare_at_price_min bold_compare_at_price_min
product.compare_at_price_max bold_compare_at_price_max
product.compare_at_price_varies bold_compare_at_price_varies
product.selected_or_first_available_variant bold_selected_or_first_available_variant
product.variants.first bold_selected_or_first_available_variant
product.variants[0] bold_selected_or_first_available_variant

Not all of these will appear in a given file, but the ones that do appear in a file may appear a few times.

If you found and replaced some of the above, then select the "Files to Update" tab and continue down the file list.

If the file has none of these, then select the "item.price" tab.

Look for each of these ... ... and replace all instances with this code
item.price bold_price
item.price_min bold_price_min
item.price_max bold_price_max
item.price_varies bold_price_varies
item.compare_at_price bold_compare_at_price
item.compare_at_price_min bold_compare_at_price_min
item.compare_at_price_max bold_compare_at_price_max
item.compare_at_price_varies bold_compare_at_price_varies
item.selected_or_first_available_variant bold_selected_or_first_available_variant
item.variants.first bold_selected_or_first_available_variant
item.variants[0] bold_selected_or_first_available_variant

Not all of these will appear in a given file, but the ones that do appear in a file may appear a few times.

If you found and replaced some of the above, then select the "File to Update" tab and continue down the file list.

If the file has none of these, then bring up the file editor's search feature (Ctrl+f), and do a search for ".price" (minus the quotes), and continue below.

If nothing is found after the search, or if you find "variant.price","variant.price_min","variant.price_max", or "variant.price_varies", then nothing will need to be done with this file, and you can select the "Files to Update" tab and continue down the file list.

If something is found after the search, take note of what was found, and then select the "Other" tab.

Some files in some themes will use something other than "product" or "item", and you'd need to change our code to work with what the file uses. For example, a file may use "product-detail" instead.

To proceed, substitute * with whatever was before the ".price" when you searched in the previous section, then look for that code in the file and replace what you find with the app's code.  Again, it's not necessary to change anything with "variant" in it, such as "variant.price".

For example, if you found "product-detail.price", then replace "*" with "product-detail" with each item below, and then look for that code in the theme. So, for the first item, you'd look for "product-detail.price", and if found, replace it with "bold_price".

Look for each of these ... ... and replace all instances with this code
*.price bold_price
*.price_min bold_price_min
*.price_max bold_price_max
*.price_varies bold_price_varies
*.compare_at_price bold_compare_at_price
*.compare_at_price_min bold_compare_at_price_min
*.compare_at_price_max bold_compare_at_price_max
*.compare_at_price_varies bold_compare_at_price_varies
*.selected_or_first_available_variant bold_selected_or_first_available_variant
*.variants.first bold_selected_or_first_available_variant
*.variants[0] bold_selected_or_first_available_variant

Not all of these will appear in a given file, but the ones that do appear in a file may appear a few times.

When you're done with this file, select the "File to Update" tab and continue down the file list.

Next Steps:

Blog Posts:

14 out of 29 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Articles in this section