Bold Bundles Code Install Instructions

Follow

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.

Bold Bundles has a significant coding installation that is required for the app to function correctly on the storefront.

Note: These instructions are for Version 3 of Bold Bundles. You're able to view which version of the app you're using at the bottom of the admin's homepage. Please visit Bold Bundles V2 Code install Instructions for the latest version.

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.

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

    Select_Online_Store.png

  3. Select Actions.

    Select_Actions.png

  4. Select Edit code.

    Select_Edit_Code.png

  5. Under "Snippets" and "Assets", find these files:
    • bold-bundles.css
    • bold-common.liquid
    • bold-pr.liquid
    • shappify-bdl-load-bundle.liquid

    Find_Snippets___Assets.png

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

      Select_Add_New_Snippet.png

    2. Enter the correct snippet name.

      Enter_Snippet_Name.png

    3. Select Create snippet.

      Select_Create_Snippet.png

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

      Paste_Snippet_Code.png

    5. Select Save.

      Select_Save.png

    6. Repeat Steps 6.1 - 6.5 for each missing snippet file.

      Select_Add_New_Snippet.png

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

    Select_Online_Store.png

  2. Select Actions.

    Select_Actions.png

  3. Select Edit code.

    Select_Edit_Code.png

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

    Select_theme.liquid.png

  5. Copy and paste the following code below the {{ content_for_header }} line:
    {%- render 'bold-pr' -%}
     {%- render 'bold-common' -%}

    Render_bold_tags.png

  6. Select Save.

    Select_Save.png

Overview:

Updates need to be done on all theme files that pull product information to the storefront. The number and name of these files will vary from theme to theme. Generally, three to five files will need to be updated.

These control the product information on the product, collection, search, related products, and home pages. It's important that each theme file that pulls this information be edited. This is to ensure the correct information always shows for your customers.

Note: This will require you to go back and edit multiple files within your theme coding.

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

List of Theme Files to Update:

  • Templates: Themes should contain most of these files. If your theme is using "Sections", these files will be located within the "Sections" folder as *-template.liquid files.
    • collection.liquid
    • list-collections.liquid
    • search.liquid
  • Sections & Snippets: Any given theme should typically have a few of these files.
    • collection-template.liquid
    • featured-collection.liquid
    • product-full.liquid
    • product-loop.liquid
    • product-recommendations.liquid
    • product-slider.liquid
    • related-products.liquid

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

Code Adjustments Required:

Your theme's product loop code should look similar to this:

{% for product in collection.products %}

Find_For_Product.png

The following code should be inserted directly after each instance:

<script type="application/json" class="bold-product-json">{{ product | json }}</script>

Paste_for_product_script.png

In some cases, the product loop code may look slightly different:

{% for item in search.results %}

Find_For_Item.png

We then need to adjust the end of our Bold price code to include the loop's product reference:

Note: Visit Product Loop Code Variations for more information on what this coding may look like.

<script type="application/json" class="bold-product-json">{{ item | json }}</script>

Paste_for_item_script.png

Overview:

Updates need to be done on all theme files that output product prices on the site. The number and name of these files will vary from theme to theme. Generally, three to five files will need to be updated.

These control the price fields on the product, collection, search, related products, and home pages. It's important that each theme file that outputs a price be modified. This is to ensure the correct pricing always shows for your customers.

Note: This will require you to go back and edit multiple files within your theme coding.

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

List of Theme Files to Update:

  • Templates: Themes should contain most of these files. If your theme is using "Sections", these files will be located within the "Sections" folder as *-template.liquid files.
    • product.liquid
    • index.liquid
    • collection.liquid
    • search.liquid
  • Sections & Snippets: Any given theme should typically have a few of these files.
    • featured-product.liquid
    • product-card.liquid
    • product-grid-item.liquid
    • product-form.liquid
    • product-template.liquid
    • related-products.liquid

Code Adjustments Required:

Your theme's product price code should look similar to this:

{{ product.price | money }}

Find_Product_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this price code:

<span class="money" data-product-id="{{ product.id }}">{{ product.price | money }}</span>

Paste_Product_Price_Span.png

In some cases, the product price code may look slightly different:

{{ item.price | money }}

Find_Item_Price.png

The following code should still be placed around each of these instances with the <span> tags wrapping this price code:

Note: Visit Product Price Code Variations for more information on what this coding may look like.

<span class="money" data-product-id="{{ item.id }}">{{ item.price | money }}</span>

 

Overview:

Updates need to be done on the cart files that pull your product price information to the cart. The number and name of these files will vary from theme to theme.

It's important that each theme file that pulls this price information be edited. This is to ensure the correct information always shows for your customers.

Note: This may require you to go back and edit multiple files within your theme coding.

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

List of Theme Files to Update:

  • Templates: If your theme is using "Sections", these files will be located within the "Sections" folder as *-template.liquid files.
    • cart.liquid
  • Sections & Snippets:
    • cart-ajax.liquid
    • cart-content.liquid
    • cart-template.liquid

Code Adjustments Required:

First, you'll need to find each instance of coding that looks similar to this:

{{ item.price | money }}

Find_Cart_Item_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this code:

<span class="money" data-line-index="{{ forloop.index0 }}">{{ item.price | money }}</span>

Paste_Cart_Item_Span.png

Next you'll need to find each instance of coding that looks similar to this:

{{ item.line_price | money }}

Find_Cart_Line_Item_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this code:

<span class="money" data-line-total data-line-index="{{ forloop.index0 }}">{{ item.line_price | money }}</span>

Paste_Cart_Line_Item_Span.png

Lastly, you'll need to find each instance of coding that looks similar to this:

{{ cart.total_price | money }}

Find_Cart_Total_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this code:

<span class="money" data-cart-total>{{ cart.total_price | money }}</span>

Paste_Cart_Total_Span.png

In some cases, you may want to manually place where your bundles widget displays on the storefront.

To choose the placement of your widget, please follow these steps:

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

    Select_Online_Store.png

  2. Select Actions.

    Select_Actions.png

  3. Select Edit code.

    Select_Edit_Code.png

  4. Under "Templates", select product.liquid

    Note: If your theme is using "Sections", the contents for this file may be within product-template.liquid.

    Select_product.liquid.png

  5. Find where you want to place your widget in the code.

    Note: Generally, most store owners will place just below your product page's </form> tag.

    Find_closing_form_tag.png

  6. Copy and paste the following code in your desired location:
    {%- render 'shappify-bdl-load-bundle' -%}

    Render_Bundle_Code.png

  7. Select Save.

    Select_Save.png

Warning!

Not all of the following coding snippets will need to be inserted into your theme. You will need to determine the function your theme uses to build your Ajax modals and install the appropriate coding from there. This section requires advanced knowledge of JavaScript and web coding to complete. If you are not comfortable with this, please contact our Merchant Success team for further assistance.

Overview:

For themes that use Ajax functionalities, updates must be made to the JavaScript files that build these Ajax pages and/or modals. The file name and location of this code will vary from theme to theme.

Note: Only required for themes that have Ajax functions.

These updates are done to ensure the correct product price displays every time it's shown on your storefront. This may require you to go back and edit multiple files in your theme coding.

List of Theme Files to Update:

  • Assets: Your theme may contain one or a few of these files. The required coding adjustment(s) are explained in the next section.
    • ajax-cart.js.liquid
    • ajaxify-cart.js.liquid
    • ajaxify-shop.js.liquid
    • ajaxify.js.liquid
    • app.js
    • apps.js
    • atlantic.js* - Atlantic by Pixel Union
    • colors-ajax-cart.js.liquid* - Colors by Small Victories
    • ella.js* - Ella by Halo Themes
    • empire.js* - Empire by Pixel Union
    • functions.min.js
    • handy.js* - Handy by Pixel Union
    • jas_theme.min.js
    • js_main.js
    • main.js.liquid
    • script.js.liquid
    • script.min.js
    • sections.js.liquid
    • shop.js.liquid
    • site.js.liquid
    • superstore.js* - Superstore by Pixel Union
    • theme.js
    • theme.js.liquid
    • theme.min.js
    • timber.js.liquid
    • vendor.min.js

* = Theme specific file. The theme name and developer are noted beside the file name.

Code Adjustments Required:

Themes that pass cart objects between your regular cart and the Ajax modals will need to use our Cart Doctor function.

Most themes will use the function buildCart to show your products in their Ajax modals and pass this information between both areas.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (typeof window.BOLD !== 'undefined'
&& typeof window.BOLD.common !== 'undefined'
&& typeof window.BOLD.common.cartDoctor !== 'undefined') {
// NOTE: "cart" should be the variable containing the cart JSON data
cart = window.BOLD.common.cartDoctor.fix(cart);
}
// Bold:PRE

buildCart_Example.png

Some themes may use the function refreshCart to show your items in these modals.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (typeof window.BOLD !== 'undefined'
&& typeof window.BOLD.common !== 'undefined'
&& typeof window.BOLD.common.cartDoctor !== 'undefined') {
// NOTE: "cart" should be the variable containing the cart JSON data
cart = window.BOLD.common.cartDoctor.fix(cart);
}
// Bold:PRE

refreshCart_Example.png

Themes that simply display the information from your cart in the Ajax modals will need to use our Event Emitter function.

Most themes will pull this information by using the getCartData function.

Note: If Bold Upsell's Ajax code is already installed on your theme, you do not need to install this code. It should already be contained in your theme files.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (window.BOLD && BOLD.common && BOLD.common.eventEmitter &&
   typeof BOLD.common.eventEmitter.emit === 'function'){
BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded');
}
// Bold:PRE

getCartData_Example.png

Some themes will grab this information through the updateView function.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (window.BOLD && BOLD.common && BOLD.common.eventEmitter &&
   typeof BOLD.common.eventEmitter.emit === 'function'){
BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded');
}
// Bold:PRE

updateView_Example.png

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.