Bold Discounts V1 Install Instructions

Bold Discounts V1 does not require any Liquid code to place your products on sale - it works right out of the box. The following instructions are optional installation steps for the sales clock, sales icon, and the duplicate & hide functionality of Bold Discounts V1.

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 Bold Discounts V1 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.

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

  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 will show on products that have a start and end date associated with their sale. A text field will appear if you wanted 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 pages. The icons will display on products that are currently on sale through Product Discount. A text field will appear if you wanted to indicate where the icons should display.
    • 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 us to install these features on.
  5. Select Get Help With Above Items.

 


 

Install the Sales Clock

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.

      Copy and paste code

    5. 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 under the product title or product price.

    Render sales clock

  3. Select Save.

 


 

Install the Sales Icon

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:

      shappify-sales-icon-product: 

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

      shappify-sales-icon-collection:

      {% 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 V1 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

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

    Can't find this code?

    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.2 - 2.4 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 }}

    Can't find this code?

    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 (Dawn Theme)

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.

      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 (Dawn Theme)

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:

      shappify-sales-icon-product: 

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

      shappify-sales-icon-collection:

      {% 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' %}

    Sales Icon main-product Dawn

  4. Select Save.
  5. Under Sections, select main-collections-product-grid.liquid.

  6. Find the code:

    <li class="grid__item">
  7. Copy and paste this code directly underneath:

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

    collection sales icon Dawn

  8. Select Save.

 


 

Step 3: Add CSS Styling in Bold Discounts

  1. From within the Bold Discounts V1 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 (Dawn Theme)

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

    main-seach dup & hide Dawn

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

    main-collection-product-grid dup & hide Dawn

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

    main-product for dup & hide_Dawn

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

    main-cart-items dup & hide_Dawn

  3. 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 Merchant 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 V1 Install for more information.

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