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 installation steps for the Sales Icon, Sales Clock, and Duplicate & Hide are optional and only necessary if you wish to use these features from Bold Discounts.

Note: The Duplicate & Hide installation is only necessary if you wish to offer exclusive discounts in Bold Upsell offers. For more information about the Discounts and Upsell integration, please visit Bold Discounts Integrations.


Sales Icon

You can add the sales icon to both your product pages and collection pages. Use the instructions below based on where you would like to show the sales icons.

Install the Product Page Sales 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.

    Select a product template

  4. Click App embeds from the left sidebar.

    Click App embeds

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

    Enable V1: Sale Icon Product

  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.

    Adjust the settings

  7. Click Save.

Install the Collection Page Sales 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.

    Select a collection template

  4. Click App embeds from the left sidebar.

    Click App embeds

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

    Enable V1: Sale Icon Collection

  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.

    Adjust the settings

  7. Click Save.


Sales Clock

The instructions to install the Sales Clock (countdown timer) depend on whether you are using a Shopify Online 2.0 theme or a vintage theme. Use the instructions below based on your theme version.

Alert: If you are unsure of your theme version, please refer to Shopify's help article Theme architecture and versions.

Install the Sales Clock on an Online 2.0 theme

  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.

    Select a product template

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

    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.

    Click and drag the Sale Clock up or down 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.

    Adjust the settings

  7. Click Save.

Install the Sales Clock on a Vintage 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.
      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 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.

    Click App embeds

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

    Enable V1: Duplicate and Hide

  5. Click Save.

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

    Click the arrow next to V1: Duplicate and Hide

  7. Adjust the following settings as needed:

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

    Duplicate and Hide Settings

    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.