Select your platform

Installation Guide for Bold Discounts

Laurel
Laurel
  • Updated

Bold Discounts does not require any Liquid code to place your products on sale—it works right out of the box. The following installation steps for the sales clock and sales icon are optional and only necessary if you wish to use these features from Bold Discounts.

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.

Note: The duplicate & hide installation in Bold Discounts is only necessary if you plan on using Bold Upsell along with Bold Discounts. For more information about the integration, please visit Bold Discounts Integrations.

If you are unsure of which version of Bold Discounts you are using, please visit Bold Discounts & Bold Discounts Powered by Price Rules Comparison.

 

 

Request a Bold 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 need to confirm which theme you would like the code installation completed on.

All of these requests are completed manually on a rotational basis. An email notification is sent from our installation team upon completion.

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. Instead, a collaborator invitation is sent from our installation team to access to your shop.

  1. From within Discounts, select Additional Info.
  2. Select Liquid Installation.
  3. Select each of the features you would like us to install:

    • Sales Clock: This feature allows you to display a timer to your customers that indicates when a product's sale is ending. The clock shows on products that have a start and end date associated with their sale. A text field appears and can be used to indicate where on the product page you would like this clock to display.
    • Sales Icons: This feature allows you to display sale icons on both your product and collection page images. The icons display on product images that are currently on sale through Bold Discounts. A text field appears and can be used to indicate where you would like the icons to display on the product image.
    • Duplicate & Hide: This feature gives you the ability to offer BOGO-style deals when Discounts is used in combination with Bold Upsell. Visit Bold Discounts' Bold Integrations for more information on this.

  4. Select the theme you would like our installation team to install these features on.
  5. Select Get Help With Above Items.

 

 

Manual Installation

Install the Sales Clock (Vintage Themes)

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.

This is an optional step. It is only necessary to complete this if you wish to use the sales clock provided by Bold Discounts.

 

Step 1: Add Snippet File

  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 shappify-sales-clock.liquid file.
  6. If the file does not exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.
    4. Copy and paste the shappify-sales-clock code into the file. 
      1. {% if product.metafields.inventory.ShappifySaleEndDate %}
<div id="shappify_count_down"></div>
<script type="text/javascript">
	ShappifySaleEnds = new Date("{{ product.metafields.inventory.ShappifySaleEndDate | date: "%B %d, %Y %H:%M:%S"}}");
	ShappifyToday = new Date("{{ 'now' | date: "%B %d, %Y %H:%M:%S"}}");
</script>

<script async type="text/javascript" src="//secure.apps.shappify.com/apps/discount/discount-sales-clock-js.php?shop={{ shop.permanent_domain }}"></script>
<link rel="stylesheet" type="text/css" href="//secure.apps.shappify.com/apps/discount/discount-sales-clock-css.php?shop={{ shop.permanent_domain }}" />
{% endif %}

    Copy and paste code

  7. Select Save.

 

Step 2: Place the Sales Clock

  1. Under Templates, select product.liquid.

    Note: If your theme contains Sections, you may find this code within product-template.liquid under Sections instead.

  2. Copy and paste this code where you would like the countdown timer to appear: 
    {% render 'shappify-sales-clock' %}

    Note: This code can be placed anywhere, but we recommend it be placed above the product title, below the product price or the Add to Cart button.

    Render sales clock

  3. Select Save.

 

 

Install the Sales Icon (Vintage Themes)

Note: This is an optional step. It is only necessary to complete this if you wish to use the sales icon provided by Bold Discounts.

 

Step 1: Add Snippet Files

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Snippets, look for the shappify-sales-icon-product and shappify-sales-icon-collection liquid files.
  5. If a file does not exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.
    4. Copy and paste the code for each snippet file: 
      1. {% if product.metafields.inventory.ShappifySale == "true" %}
<img class='shappify-sales-icon-product' src='//secure.apps.shappify.com/apps/discount/icons/default/sale8.png' /><style> 
.shappify-sales-icon-product{ 
 } 
</style>
{% endif %}
      2. {% if product.metafields.inventory.ShappifySale == "true" %}
<img class='shappify-sales-icon-collection' src='//secure.apps.shappify.com/apps/discount/icons/default/sale10.png' /><style> 
.shappify-sales-icon-collection{ 
} 
</style>
{% endif %}

      Copy and paste code

    5. Select Save.

 

Step 2: Place the Sales Icon

  1. Under Templates, select product.liquid.

    Note: If your theme contains Sections, you may find this code within product-template.liquid under Sections instead.

  2. Copy and paste this code where you would like the icon to appear:

    {% render 'shappify-sales-icon-product' %}

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

    Render product icons

  3. Select Save.

  4. Under Templates, select collection.liquid.

    Note: If your theme contains Sections, you may find this code within collection-template.liquid under Sections instead.

  5. Copy and paste this code where you would like the icon to appear:

    {% render 'shappify-sales-icon-collection' %}

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

  6. Select Save.

 

Step 3: Add CSS Styling in Bold Discounts

  1. From within the Bold Discounts app admin, select Sales Icon.
  2. Under Customize Your Icon CSS, add your custom code:

    Note: We recommend using this code if your icon is over-top of the image. It is otherwise customizable if you are comfortable with CSS code.

    Product Icon CSS

    margin-top: 20px !important;
margin-right: 0px !important;
margin-bottom: -53px !important;
margin-left: 20px !important;
position: relative !important;
float: left;
z-index: 1000 !important;

    Collection Icon CSS

    margin-right: 0px !important;
margin-bottom: -73px !important;
margin-top: 20px !important;
margin-left: 20px !important; 
position: relative !important; 
float: left; 
z-index: 1000 !important;

    Add CSS Code Styling

  3. Select Save.

 

 

Install the Duplicate and Hide (Vintage Themes)

Note: This is an optional step. It is only necessary to complete this step if you are using Bold Upsell along with Bold Discounts to offer discounted Upsells to your customers. For more information on the Bold Upsell and Discounts integration, please visit Discounts & Bold Upsell at Bold Discounts Integrations.

 

Step 1: Edit search.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select search.liquid.

    Note: If your theme contains Sections, you may find this code within search-template.liquid under Sections instead.

  5. Find each instance of this code: 
    {% for item in search.results %}

    for item in search.results

  6. Add this code below each instance: 
    {%- if item.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    Add in the code

  7. Select Save.

 

Step 2: Edit collection.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Select collection.liquid under Templates.

    Note: If your theme contains Sections, you may find this code within collection-template.liquid under Sections instead.

  5. Find each instance of this code: 
    {% for product in collection.products %}

    1. Some themes will use a slight variation of this code. If you can't find it, try looking for the following instead:
      {% for prod in collection.products %}
      {% for product in collections.all.products %}
      {% for product in products limit: limit %}
      {% for product in product-list.products limit: for_limit %}
      {% for product in collection.products limit: settings.pagination_limit %}
      {% for product in collection.products limit: number_of_products_to_fetch %}
      {% for product in collection.products limit: number_of_related_products %}
      {% for product in collections[settings.frontpage_collection].products offset:1 %}
      {% for product in collection.products limit: settings.products-per-page %}

      Some themes will have this code in a file that is included into the collection.liquid file. Look to see if the theme has a product-loop.liquid or product-list.liquid in the Snippets folder, and see if the code is in there.

    For product in collection.products

  6. Add the following code below each instance: 
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    Add the code

  7. Select Save.
  8. Repeat Step 2.5 - 2.7 if this code exists within the index.liquid and related-products.liquid files.

 

Step 3: Edit product.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Select product.liquid under Templates.

    Note: If your theme contains Sections, you may find this code within product-template.liquid under Sections instead.

  5. Add the following code to the top of the file: 
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    Add the code

  6. Select Save.

 

Step 4: Edit theme.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Select theme.liquid under Layout.
  5. Find the </head> tag.

    Find /head tag

  6. Add this code above it:

    {% if template == 'product' and product.metafields.inventory.ShappifyHidden or product.type contains '_HIDDEN_' %}<meta name='robots' content='noindex'>{% endif %}

    Add the code

  7. Select Save.

 

Step 5: Edit cart.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Select cart.liquid under Templates.

    Note: If your theme contains section you may find this code within cart-template.liquid under Sections instead.

  5. Look for a line that starts with <input containing value="{{ item.quantity }}

    1. This code will be slightly different depending on the theme, but most of the time the line is an input element and has a name, class, type, and id.

      Here are some examples of how this could look:

      • <input type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" />
      • <input type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" class="tc item-quantity" />
      • <input type="number" name="updates[]" id="Updates_{{ item.id }}" class="cart__quantity" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}" />

    Look for code

  6. Right before the /> add this code:

    {% if item.product.metafields.inventory.ShappifyHidden %} readonly {% endif %}

    The result should look something like this:

    <input value="{{ item.quantity }}"{% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly {% endif %} />

    Add the code

  7. Select Save.

 

 

Install the Sales Clock (Online Store 2.0 Themes)

Note: This is an optional step. It is only necessary to complete this if you wish to use the sales clock provided by Bold Discounts.

 

Step 1: Add Snippet File

  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 shappify-sales-clock.liquid file.
  6. If the file does not exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.
    4. Copy and paste the shappify-sales-clock code into the file. 
      1. {% if product.metafields.inventory.ShappifySaleEndDate %}
<div id="shappify_count_down"></div>
<script type="text/javascript">
	ShappifySaleEnds = new Date("{{ product.metafields.inventory.ShappifySaleEndDate | date: "%B %d, %Y %H:%M:%S"}}");
	ShappifyToday = new Date("{{ 'now' | date: "%B %d, %Y %H:%M:%S"}}");
</script>

<script async type="text/javascript" src="//secure.apps.shappify.com/apps/discount/discount-sales-clock-js.php?shop={{ shop.permanent_domain }}"></script>
<link rel="stylesheet" type="text/css" href="//secure.apps.shappify.com/apps/discount/discount-sales-clock-css.php?shop={{ shop.permanent_domain }}" />
{% endif %}

      Copy and paste code

    5. Select Save.

 

Step 2: Place the Sales Clock

  1. Under Sections, select main-product.liquid.
  2. Copy and paste this code where you would like the countdown timer to appear: 
    {% render 'shappify-sales-clock' %}

    Note: This code can be placed anywhere, but we recommend it be placed under the product title or product price.

    Place Clock Dawn

  3. Select Save.

 

 

Install the Sales Icon (Online Store 2.0 Themes)

Note: This is an optional step. It is only necessary to complete this if you wish to use the sales icon provided by Bold Discounts.

 

Step 1: Add Snippet Files

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Snippets, look for the shappify-sales-icon-product and shappify-sales-icon-collection liquid files.
  5. If a file does not exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.
    4. Copy and paste the code for each snippet file:

      1. {% if product.metafields.inventory.ShappifySale == "true" %}
<img class='shappify-sales-icon-product' src='//secure.apps.shappify.com/apps/discount/icons/default/sale8.png' /><style> 
.shappify-sales-icon-product{ 
 } 
</style>
{% endif %}
      2. {% if product.metafields.inventory.ShappifySale == "true" %}
<img class='shappify-sales-icon-collection' src='//secure.apps.shappify.com/apps/discount/icons/default/sale10.png' /><style> 
.shappify-sales-icon-collection{ 
} 
</style>
{% endif %}

      Copy and paste code

    5. Select Save.

 

Step 2: Place the Sales Icon

  1. Under Sections, select main-product.liquid.

  2. Find the code:

    <div class="grid__item product__media-wrapper">

  3. Copy and paste this code underneath at the desired location:

    {% render 'shappify-sales-icon-product' %}

    copy and paste the code

  4. Select Save.

  5. Under Sections, select main-collection-product-grid.liquid.

  6. Find the code:

    <li class="grid__item">

  7. Copy and paste this code directly underneath:

    {% include 'shappify-sales-icon-collection' %}

    copy and paste the code

  8. Select Save.

 

Step 3: Add the Sales Icon to the Main Page Featured Collection

  1. Under Snippets, select card-product.liquid.

  2. Find the code:

    <div class="card__media">

  3. Copy and paste this code underneath at the desired location:

    {% render 'shappify-sales-icon-product' , product: card_product%}

    copy and paste the code

  4. Select Save.

 

Step 4: Add CSS Styling in Bold Discounts

  1. From within the Bold Discounts app admin, select Sales Icon.
  2. Under Customize Your Icon CSS, add your custom code:

    Note: We recommend using this code if your icon is over-top of the image. It is otherwise customizable if you are comfortable with CSS code.

    Product Icon CSS

    margin-top: 20px !important;
margin-right: 0px !important;
margin-bottom: -53px !important;
margin-left: 20px !important;
position: relative !important;
float: left;
z-index: 1000 !important;

    Collection Icon CSS

    margin-right: 0px !important;
margin-bottom: -73px !important;
margin-top: 20px !important;
margin-left: 20px !important; 
position: relative !important; 
float: left; 
z-index: 1000 !important;

    Add CSS Code Styling

  3. Select Save.

 

 

Install the Duplicate and Hide (Online Store 2.0 Themes)

Note: This is an optional step. It is only necessary to complete this step if you are using Bold Upsell along with Bold Discounts to offer discounted Upsells to your customers. For more information on the Bold Upsell and Discounts integration, please visit Discounts & Bold Upsell at Bold Discounts Integrations.

 

Step 1: Edit main-search.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, select main-search.liquid.
  5. Find this code: 
    {%- for item in search.results -%}
  6. Add this code below: 
    {%- if item.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    copy and paste the code

  7. Select Save.

 

Step 2: Edit main-collection-product-grid.liquid

  1. Under Sections, select main-collection-product-grid.liquid
  2. Find this code: 
    {%- for product in collection.products -%}
  3. Add this code below: 
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    copy and paste the code

  4. Select Save.

 

Step 3: Edit main-product.liquid

  1. Under Sections, select main-product.liquid
  2. Add this code to the top of the file: 
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    copy and paste the code

  3. Select Save.

 

Step 4: Edit main-cart-items.liquid

  1. Under Sections, select main-cart-items.liquid
  2. Add this code within the input: 
     {%- if item.metafields.inventory.ShappifyHidden %} readonly {% endif %}

    copy and paste the code

  3. Select Save.

 

  1. Under Sections, select featured-collection.liquid
  2. Find the code that looks like: 
     {%- if {% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
  3. Add this code above the parent element: 
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    copy and paste the code

  4. Select Save.

 

 

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 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 Bold Discounts Install for more information.