Installation Guide for Bold Discounts

Laurel

Published: June 10, 2020 18:43

Last Updated: March 22, 2023 21:28

Bold Discounts requires our Liquid code in order to run correctly on your store. This will ensure the discounts appear correctly on your product pages, cart page, and in the checkout.

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

An automatic installer
An expert install from our team
A step-by-step guide to complete the install manually

Before installing the Liquid code, it is recommended to create a duplicate version of your Shopify theme to ensure you have a copy without our code installation.

Caution

This article is for Discounts Powered by Bold Price Rules. If you have Discounts V1 installed on your store, please visit the Installation Guide for Discounts V1. If you are unsure of which version of Bold Discounts you have, please visit Bold Discounts V1 & Bold Discounts Powered by Price Rules (V2) Comparison.

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.

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

From within the Discounts app admin, select Help.
Select Theme code update.
Select your preferred theme.
Check off I have created a backup of this theme.
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.

Request a Discounts 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

To maintain the security of your Shopify account, we ask that you do not proactively send us a staff account invite for access to your shop. Instead, our team will request collaborator access to your shop.

To request an expert install, please follow these steps:

From within the Discounts app admin, select Help.
Select Theme code update.
Select expert theme update service.
Select the box beside I have created a staff account for Bold.
Note: Select this option in order to bypass this step. A staff account is not required as our team will send a collaborator request.
On the bottom left corner, select which theme you would like the installation completed on.
Select Submit Request.

Manual Install (Vintage Themes)

Step 1: Add Snippet Files

From the Shopify admin, select Online Store.
Select Actions.
Duplicate the theme you would like the installation completed on.
Select Edit Code on the duplicated theme.
Under Snippets, find the bold-pr.liquid file.
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:
5. Select Save.

Step 2: Edit theme.liquid

Under Layout, select theme.liquid.
Copy and paste the following code below the {{ content_for_header }} line:
```
{%- render 'bold-pr' -%}
```
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 %}

The following code should be inserted directly after each instance:

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

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

{% for item in search.results %}

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>

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

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>

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

{{ compare_at_price | money }}

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>

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

{{ item.price | money }}

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>

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

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>

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

{{ item.line_price | money }}

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>

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

{{ cart.total_price | money }}

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>

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

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

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

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

Step 7: Install Sales Icon (optional)

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

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

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

Collection Page

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

Home Page

Under Templates, select index.liquid.
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.
Select Save.

Manual Install (Online Store 2.0 Themes)

Step 1: Add Snippet Files

From the Shopify admin, select Online Store.
Select Actions.
Duplicate the theme you would like the installation completed on.
Select Edit Code on the duplicated theme.
Under Snippets, find the bold-pr.liquid file.
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:
5. Select Save.

Step 2: Edit theme.liquid

Under Layout, select theme.liquid.
Copy and paste the following code below the {{ content_for_header }} line:
```
{%- include 'bold-pr' -%}
```
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. 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.

Alert

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

List of Theme Files to Update:

Sections:
- main-collection-product-grid.liquid
- main-search.liquid
- featured-collection.liquid
- predictive_search.liquid

Code Adjustments Required:

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

{% for product in collection.products %}

The following code should be inserted directly after each instance:

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

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

{% for item in search.results %}

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

<script type="application/json" class="bold-product-json">{{ item | json }}</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.

Alert

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

List of Theme Files to Update:

Sections & Snippets:
- featured-product.liquid
- main-product.liquid
- price.liquid
Templates:
- customers/order.liquid

Code adjustments required:

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

{{ variant.price | money | strip_html }}

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 }}">{{ variant.price | money | strip }}</span>

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

{{ line_item.price.final_price | money }}

{{ line_item.price.original_price | money }}

{{ discount_application.discount_application.total_allocated_amount | money }}

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

{{ line_item.price.final_price | money }}

Should look like:

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

{{ line_item.price.original_price | money }}

Should look like:

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

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

{{ compare_at_price | money }}

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>

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.

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.

List of Theme Files to Update:

Sections:
- main-cart-items.liquid

Code Adjustments Required:

Find each instance of coding that looks similar to this:

{{ item.original_line_price | money }}

{{ item.price.final_line_price | money }}

{{ item.variant.unit_price | money }}

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

{{ item.original_line_price | money }}

Should look like:

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

{{ item.price.final_line_price | money }}

Should look like:

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

Step 6: Install Sales Icon (optional)

Under Sections, select main-product.liquid.
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.
Select Save.

Step 7: Position the Sales Clock (optional)

Alert

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

Under Sections, select main-product.liquid.
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.
Select Save.

Collection Page

Under Sections, select featured-collection.liquid.
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.
Select Save.

Pro-Tip

If you are unsure of whether you are using a Vintage or Online Store 2.0 theme, please visit Shopify’s article Theme architecture versions.

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 Customer 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 Customer Success team.

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. Your theme may require further liquid code changes. See Request a Discounts Install above for more information.

Caution

Automatic Install

Pro-Tip

Request a Discounts Install

Alert

Manual Install (Vintage Themes)

Step 1: Add Snippet Files

Step 2: Edit theme.liquid

Step 3: Add the Product Loop Code

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

Step 5: Update the Cart Price Code

Step 6: Install the AJAX Scripts

Caution

Step 7: Install Sales Icon (optional)

Step 8: Position the Sales Clock (optional)

Manual Install (Online Store 2.0 Themes)

Step 1: Add Snippet Files

Step 2: Edit theme.liquid

Step 3: Add the Product Loop Code

Alert

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

Alert

Step 5: Update the Cart Price Code

Step 6: Install Sales Icon (optional)

Step 7: Position the Sales Clock (optional)

Alert

bold-pr.liquid

Pro-Tip

Alert