Installation Guide for Bold Discounts

Bold Discounts does not require an install 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.

It is recommended to create a duplicate version of your Shopify theme to ensure you have a copy without our code installation before.

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.

Manual install instructions (via app embed)

Bold Discounts can be installed on both vintage and Online Store 2.0 themes. If you require help, please reach out to our Customer Success team team.

Install the Sales Clock

Alert: If you are installing the sales clock on a vintage theme, please use the sales clock installation instructions under the legacy section.

1. From your Shopify admin, navigate to Online Store > Themes.
2. Click on the Customize button beside the theme you would like to add the sales clock to.
3. From the template menu, select a product template.

   

4. Click Add block on the left side panel and select V1: Sale Clock.

   

5. Optional: Click and drag the V1: Sale Clock app embed up or down the template page to change its placement on the page.

   

6. Optional: Click the V1: Sale Clock app block to expand the settings on the side of the page, and customize your sales clock using the settings as needed:

   Note: For more details, please visit Customize Sales Icons and Clock in Bold Discounts.

   

7. Click Save.

Install the Sales Icon

Step 1: Install Collection Page Icon

1. From your Shopify admin, navigate to Online Store > Themes.
2. Click on the Customize button beside the theme you would like to add the sales icon to.
3. From the template menu, select a collection template.

   

4. Click App embeds from the left sidebar.

   

5. Enable the V1: Sale Icon Collection app embed for your theme by sliding the toggle to the right.

   

6. Optional: Click the arrow next to V1: Sale Icon Collection to expand the settings and customize your sales icon as needed.

   Note: For more details, please visit Customize Sales Icons and Clock in Bold Discounts.

   

7. Click Save.

Step 2: Install Product Page Icon

1. From your Shopify admin, navigate to Online Store > Themes.
2. Click on the Customize button beside the theme you would like to add the sales icon to.
3. From the theme editor page selector, select a product template.

   

4. Click App embeds from the left sidebar.

   

5. Enable the V1: Sale Icon Product app embed for your theme by sliding the toggle to the right.

   

6. Optional: Click the arrow next to V1: Sale Icon Product to expand the settings and customize your sales icon as needed.

   Note: For more details, please visit Customize Sales Icons and Clock in Bold Discounts.

   

7. Click Save.

Install Duplicate & Hide

1. From your Shopify admin, navigate to Online Store > Themes.
2. Click on the Customize button beside the theme you would like to add the Duplicate & Hide functionality to.
3. Click App embeds from the left sidebar.

   

4. Enable the V1: Duplicate & Hide app embed for your theme by sliding the toggle to the right.

   

5. Click Save.
6. Click the arrow next to V1: Duplicate & Hide to expand the settings.

   

7. Adjust the following settings as needed:

   Note: By default, these settings contain information relevant to the Dawn theme.

   

   1. Product element on collection pages - Enter the CSS class name of the product image or element for all collection pages. This setting hides duplicated products created from Bold Discounts from all collection pages.
   2. Product element on search pages - Enter the CSS class name of the product image or element for the search page. This setting hides duplicated products created by Bold Discounts from all search pages.
   3. Predictive search results element - Enter the CSS class name of the product image or element for the predictive search result page. This setting hides duplicated products created by Bold Discounts from the predictive search results.
   4. Predictive search update delay - Use this slider to add a delay (in milliseconds) to the predictive product results display. You can use this in the event that duplicated products are visible in search results.
8. Click Save.

Manual Liquid code install instructions (legacy)

Install the Sales Clock

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

   

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.

   

3. Select Save.

Install the Sales Icon

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

      

   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.

   

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;

   

3. Select Save.

Install the Duplicate and Hide

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

   

6. Add this code below each instance:

   {%- if item.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

   

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.

   

6. Add the following code below each instance:

   {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

   

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

   

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.

   

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

   

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

   

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

   

7. Select Save.