Installation Guide for Bold Discounts

Bold Discounts requires Liquid code in order to run correctly on your store. This ensures 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.

Automatic install

When selecting which theme to update, there is 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 are able to proceed with the code installation.

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

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

Clicking Start Automatic Install triggers our automatic installer to run on your store.

If your current theme is not compatible with our automatic installation tool, Bold Discounts automatically notifies 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 automatically creates 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. After selecting this option, you are asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. A confirmation email is sent from our team once the installation is completed.

Note: 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. A collaborator account request is sent from our team prior to working on the install.

To request an expert install, please follow these steps:

1. From within the Discounts app admin, click Help.
2. Click Theme code update.
3. Click expert theme update service.
4. Click 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 sends a collaborator request.

5. On the bottom left corner, select which theme you would like the installation completed on.
6. Click Submit Request.

Manual install (vintage themes)

Step 1: add snippet files

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

      • <script id="bold-platform-data" type="application/json">
        {
          "shop": {
            "domain": "{{ shop.domain }}",
            "permanent_domain": "{{ shop.permanent_domain }}",
            "url": "{{ shop.url }}",
            "secure_url": "{{ shop.secure_url }}",
            "money_format": {{ shop.money_format | json }},
            "currency": {{ shop.currency | json }}
          },
          "customer": {
            "id": {{ customer.id | json }},
            "tags": {{ customer.tags | json }}
          },
          "cart": {{ cart | json }},
          "line_item_products": {{ cart | map: "items"  | map: "product" | json }},
          "template": "{{ template | split: "." | first }}",
          "product": {{ product | json }},
          "collection": {{ collection.products | json }}
        }
        </script>
        {{ 'https://static.boldcommerce.com/bold-platform/sf/pr.js' | script_tag }}
        <style>
          .money[data-product-id], .money[data-product-handle], .money[data-variant-id], .money[data-line-index], .money[data-cart-total] {
            animation: moneyAnimation 0s 2s forwards; visibility: hidden;
          }
          @keyframes moneyAnimation { to { visibility: visible; } }
          .shappify_qb_grid {
            width: auto;
            background: #fff;
            margin: 8px 0;
          }
          .shappify_qb_grid, .shappify_qb_grid td, .shappify_qb_grid th {
            text-align: left;
            padding: 5px;
            border: 1px solid #ccc;
            border-collapse: collapse;
          }
        </style>

      

   5. Click Save.

Step 2: edit theme.liquid

1. Under Layout, click theme.liquid.
2. Copy and paste the following code below the {{ content_for_header }} line:

   {%- render 'bold-pr' -%}

   

3. Click 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 vary from theme to theme. Generally, three to five files 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 requires 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 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 are 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 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:

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

<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 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 exist in a given theme.

List of theme files to update

• Templates: If your theme is using Sections, these files are 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 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 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 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

Note: Not all of the following coding snippets need to be inserted into your theme. You 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.

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 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 need to use our Cart Doctor function.

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

You 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 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 need to use our Event Emitter function.

Most themes 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 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 grab this information through the updateView function.

You 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

Optional - Step 7: install sales icon

1. Under Templates, click 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.

   

3. Click Save.

Optional - Step 8: position the sales clock

Note: When a sale has an end date applied to the sale, a clock appears 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 choose your preferred placement method and follow the steps:

Product page

1. Under Templates, click 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.

   

3. Click Save.

Collection page

1. Under Templates, click 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 only displays the clock if you are running a site-wide sale. You 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.

   

3. Click Save.

Home page

1. Under Templates, click 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 only displays the clock if you are running a site-wide sale. You need to specify the ID of an on-sale product, in this code, if your sale is not a global discount.

   

3. Click Save.

Manual install (online store 2.0 themes)

Step 1: add snippet files

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

      • <script id="bold-platform-data" type="application/json">
        {
          "shop": {
            "domain": "{{ shop.domain }}",
            "permanent_domain": "{{ shop.permanent_domain }}",
            "url": "{{ shop.url }}",
            "secure_url": "{{ shop.secure_url }}",
            "money_format": {{ shop.money_format | json }},
            "currency": {{ shop.currency | json }}
          },
          "customer": {
            "id": {{ customer.id | json }},
            "tags": {{ customer.tags | json }}
          },
          "cart": {{ cart | json }},
          "line_item_products": {{ cart | map: "items"  | map: "product" | json }},
          "template": "{{ template | split: "." | first }}",
          "product": {{ product | json }},
          "collection": {{ collection.products | json }}
        }
        </script>
        {{ 'https://static.boldcommerce.com/bold-platform/sf/pr.js' | script_tag }}
        <style>
          .money[data-product-id], .money[data-product-handle], .money[data-variant-id], .money[data-line-index], .money[data-cart-total] {
            animation: moneyAnimation 0s 2s forwards; visibility: hidden;
          }
          @keyframes moneyAnimation { to { visibility: visible; } }
          .shappify_qb_grid {
            width: auto;
            background: #fff;
            margin: 8px 0;
          }
          .shappify_qb_grid, .shappify_qb_grid td, .shappify_qb_grid th {
            text-align: left;
            padding: 5px;
            border: 1px solid #ccc;
            border-collapse: collapse;
          }
        </style>

      

   5. Click Save.

Step 2: edit theme.liquid

1. Under Layout, click theme.liquid.
2. Copy and paste the following code below the {{ content_for_header }} line:

   {%- include 'bold-pr' -%}

   

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

Note: This requires 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.

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

Optional - Step 6: install sales icon

1. Under Sections, click main-product.liquid.
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.

   

3. Click Save.

Optional - Step 7: position the sales clock

Note: When a sale has an end date applied to the sale, a clock appears 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 choose your preferred placement method and follow the steps:

Product page

1. Under Sections, click main-product.liquid.
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.

3. Click Save.

Collection page

1. Under Sections, click featured-collection.liquid.
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 only displays the clock if you are running a site-wide sale. You 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.

3. Click Save.

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

Verify the Discounts installation

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.

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