Installation Guide for Bold Discounts V1

  1. Bold Commerce Help Center
  2. Discounts V1 - Shopify
  3. Installation
Avatar
Laurel
Published: 
Last Updated: 
Follow

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

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.

 Pro-Tip

 

 

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.

 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.

  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.

 

 

Manual Installation

 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.

Install the Sales Clock (Vintage Themes)

 Alert

Please 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 V1. 

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 (Vintage Themes)

 Alert

Please 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 V1. 

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 (Vintage Themes)

 Alert

Please note, this is an optional step. It is only necessary to complete this step if you are using Bold Upsell along with Bold Discounts V1 to offer discounted Upsells to your customers. For more information on the Bold Upsell and Discounts V1 integration, please visit Discounts V1 & Bold Upsell at Bold Discounts V1 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 %}

    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 (Online Store 2.0 Themes)

 Alert

Please 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 V1. 

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 (Online Store 2.0 Themes)

 Alert

Please 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 V1. 

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

    collection sales icon Dawn

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

    card-product sales icon Dawn

  4. Select Save.

 

 

Step 4: 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 (Online Store 2.0 Themes)

 Alert

Please note, this is an optional step. It is only necessary to complete this step if you are using Bold Upsell along with Bold Discounts V1 to offer discounted Upsells to your customers. For more information on the Bold Upsell and Discounts V1 integration, please visit Discounts V1 & Bold Upsell at Bold Discounts V1 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 -%}

    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.

 

 

Step 5: Edit featured-collection.liquid

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

    featured collection dup hide Dawn

  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.

 Alert

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