Bold Discounts Code Install Instructions

Bold Discounts requires our Liquid code in order to run correctly on your store.

We offer a few different options to help you complete this installation on your store:

  1. An automatic installer
  2. The ability to request a professional installation from our team
  3. A step-by-step guide on completing this manually

Before you start, we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 


 

Request a Discounts Install

Automatic Install

 Pro-Tip

When selecting which theme to update, there will be a check box that says: "I have created a backup of this theme"

After the checkbox is selected to confirm you have a back up version of your theme, you will be able to proceed with the code installation.

We highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation, and to proceed with the automatic installation.

To run the automatic install tool, please follow these steps:

  1. From within the Discounts app admin, select Help.
  2. Select Theme code update.
  3. Select your preferred theme.
  4. Check off I have created a backup of this theme.
  5. Select Start Automatic Install.

Selecting Start Automatic Install will trigger our automatic installer to run on your store.

If your current theme is not compatible with our automatic installation tool, the app will automatically notify you. If this happens, you can rollback your theme to its previous state.

When the installation has not been completed in full, reverting the changes will automatically create an installation request for our team to assist you further.

 


 

Expert Install

This option creates a ticket request with our installation team, which is then scheduled to be completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. You will receive an email notification upon completion.

 Alert

Please ensure that we have an active staff account for your store prior to submitting your installation request. Please visit Create a Shopify Staff Account for more information.

To request an expert install, please follow these steps:

  1. From within the Discounts app admin, select Help.
  2. Select Theme code update.
  3. Select expert theme update service.

 


 

Manual Install

Step 1: Add Snippet Files

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Duplicate the theme you would like the installation completed on.
  4. Select Edit Code on the duplicated theme.
  5. Under Snippets, find the bold-pr.liquid file.
  6. If this file doesn't exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.
    4. Copy and paste the code from the bold-pr.liquid file:

      Paste Snippet Code

    5. Select Save.

 


 

Step 2: Edit theme.liquid

  1. Under Layout, select theme.liquid.
  2. Copy and paste the following code below the {{ content_for_header }} line:
    {%- render 'bold-pr' -%}

    Include bold-pr

  3. Select Save.

 


 

Step 3: Add the Product Loop Code

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

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

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

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

{% for item in search.results %}

Find For Item

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

Note: Please 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

 


 

Step 4: Update the Product Price & Compare At Price Code

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

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

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

{{ compare_at_price | money }}

Compare at Price

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

<span class="bold-compare-at-money" data-product-id="{{ product.id }}">{{ compare_at_price | money }}</span>

Add the code for compare at price

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

{{ item.price | money }}

Find Item Price

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

Note: Please 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>

Paste item id span

 


 

Step 5: Update the Cart Price Code

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

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

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

{{ item.line_price | money }}

Find Cart Line Item Price

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

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

{{ cart.total_price | money }}

Find Cart Total Price

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

 


 

Step 6: Install the AJAX Scripts

 Caution

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

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

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

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

 


 

Step 7: Install Sales Icon (optional)

Sales Icon Example

  1. Under Templates, select product.liquid

    Note: If your theme is using Sections, the code for this may be contained in the product-template.liquid file.

  2. Copy and paste the following code where you want the sale icon to appear:
    <div class="sale-icon-container" data-product-id="{{ product.id }}"></div>

    Note: You can place this code anywhere within the theme file. We generally recommend placing it above the product image.

    Insert Code

  3. Select Save.

If the sales icon is not appearing correctly on the storefront, please reach out to our Merchant Success team for further assistance with adding the liquid code to your theme.

 


 

Step 8: Position the Sales Clock (optional)

Note: When a sale has an end date applied to the sale, a clock will appear on the product page beneath the product title by default. The steps below are only required if you want to change the placement of the sales clock. 

To install the sales clock in your theme code, please select your preferred placement method and follow the steps: 

 


 

Product Page

  1. Under Templates, select product.liquid

    Note: If your theme is using Sections, the code for this may be contained in the product-template.liquid file.

  2. Copy and paste the following code where you want the sales clock to appear:
    <div class="sale-clock-container" data-product-id="{{ product.id }}"></div>

    Note: You can place this code anywhere within this theme file.

    Insert Code

  3. Select Save.

If the sales clock is not appearing correctly on a product page, please reach out to our Merchant Success team for further assistance with adding the liquid code to your theme.

 


 

Collection Page

  1. Under Templates, select collection.liquid

    Note: If your theme is using Sections, the code for this may be contained in the collection-template.liquid file.

  2. Copy and paste the following code where you want the sales clock to appear:
    <div class="sale-clock-container" data-product-id="{{ collections['all'].products.first.id }}"></div>

    Note: This code will only display the clock if you are running a site-wide sale. You'll need to specify the ID of an on-sale product, in this code, if your sale is not a global discount. You can also place this code anywhere within this theme file. We generally recommend placing it near the top of the file.

    Insert Code Collection

  3. Select Save.

If the sales clock is not appearing correctly on a collection page, please reach out to our Merchant Success team for further assistance with adding the liquid code to your theme.

 


 

Home Page

  1. Under Templates, select index.liquid
  2. Copy and paste the following code at the top of this file:
    <div class="sale-clock-container" data-product-id="{{ collections['all'].products.first.id }}"></div>

    Note: This code will only display the clock if you are running a site-wide sale. You'll need to specify the ID of an on-sale product, in this code, if your sale is not a global discount.

    Insert Code index

  3. Select Save.

If the sales clock is not appearing correctly on the home page, please reach out to our Merchant Success team for further assistance with adding the liquid code to your theme.

 


 

Next Steps

When the liquid code installation has been completed, we recommend creating a discount group and placing a test order on your store.

If the discount is not appearing correctly on the storefront or in the checkout, please contact our Merchant Success team for further assistance.

 


 

Code Removal

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

And you can remove the app from your by following this guide: Uninstall an App from Your Store

 Alert

If you are experiencing issues with performance on the storefront with Bold Discounts after completing the steps above, we recommend requesting an expert installation, as your theme may require further liquid code changes. See previous step Request a Discounts Install > Expert Install for more information.

Was this article helpful?
0 out of 0 found this helpful