Bold Discounts V1 Install Instructions

 Caution

This article requires technical knowledge and experience with Liquid code. If you are not comfortable with code, please contact our Merchant Success team.

Overview

Each theme on your Shopify store is different, and will require Bold Discounts liquid code to be installed in order for certain features to work.

This article only applies to the liquid installation for Bold Discounts V1. If you decide to complete the installation yourself, please know it requires prior experience with Liquid code. You can also request an installation using the instructions, below.

Ready to get started with the Bold Discounts V1 Code installation?


 

Request an Installation

This option creates a ticket request with our installation team, and schedules your store for a manual installation completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

 Warning

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

To request an installation from our team, please follow these steps:

  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

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

Install Sales Clock

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store, then Actions, then Edit code.
  3. Under "Snippets", find the file "shappify-sales-clock.liquid".
  4. 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.
  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 Sales Icon

  1. From Shopify's admin, select Online Store, then Actions, then Edit code.
  2. Under "Snippets", look for the shappify-sales-icon-product and shappify-sales-icon-collection liquid files.
  3. 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.
  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.
  1. From within Discounts, select Sales Icon.
  2. Under "Customize Your Icon CSS" add your custom code:

    Note: This is customizable but is a good starting point if your icon is over the image.

    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 Duplicate & Hide

  1. From Shopify's admin, select Online Store, then Actions, then Edit code.
  2. Under "Templates", select search.liquid.

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

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

    for item in search.results

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

    Add in the code

  5. Select Save.
  1. From within your theme editor, select collection.liquid under "Templates".

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

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

    Can't find this code?

    For product in collection.products

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

    Add the code

  4. Select Save.
  5. Repeat Step 2.2 - 2.4 if this code exists within the index.liquid and related-products.liquid files.
  1. From within your theme editor, select product.liquid under "Templates".

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

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

    Add the code

  3. Select Save.
  1. From within the theme editor, select theme.liquid under "Layout".
  2. Find the </head> tag.

    Find /head tag

  3. 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

  4. Select Save.
  1. From within the theme editor, select cart.liquid under "Templates".

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

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

    Can't find this code?

    Look for code

  3. 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

  4. Select Save.

Note: If you are experiencing issues with performance on the storefront with Bold Bundles after completing the steps above, we recommend requesting an expert installation, as your theme may require further liquid code changes.

 


 

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 and the code includes mentioned in the instruction steps above. You can also request an uninstall request by contacting our Merchant Success team.

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