Customization & Styling in Bold Discounts

Overview

Bold Discounts offers some additional customizations that can be applied in your theme to add onto the functionality of the app. While some of these customizations are for only for certain themes, the other customizations can be applied onto all other themes available on Shopify

Select one of the customizations below to jump to the customization section: 

Please Create a Discount with Bold Discounts to ensure the customization you added to your theme is working correctly.



Create a Collection for Bold Discounts Using a Product Tag

To create a collection using a product tag to use with Discounts, please follow these steps:

  1. From Shopify's admin, select Products.
  2. Select Collections.
  3. Select Create collection.
  4. Enter a Title.
  5. Enter a Description (optional).
  6. Under "Conditions", select Product tag in the first drop-down box.
  7. Leave is equal to in the second drop-down box.
  8. Enter the code specified in Bold Discounts in the third box.

    Note: Repeat Steps 6-8 and use the tag "DISCOUNT_HIDDEN_PRODUCT" to create a collection of duplicate & hide items.

    Enter Tag

  9. Select Manage next to "Sales channels".
  10. Select Online Store to deselect it.

    Note: Leave this option selected if you want to show this collection of sale products on your site.

  11. Select Done.
  12. Select Save.


Show the Discount Percentage

Bold Discounts offers an optional feature to display a discount percentage that the customer is saving between the discounted price and the compare at price on the product page.

Note: The discount percentage will only appear on product pages that are in an active discount in Bold Discounts. Adding a product price and compare at price on a product will not apply the discount percentage on the product page.


To show the percentage saved automatically, please follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under "Snippets", select Add a new snippet.
  6. Name the snippet bold-discount-saved.liquid.
  7. Select Create Snippet.
  8. Copy and paste this code into the snippet:
    <!-- Inserted by Bold Apps - Show discount percentage -->
    {% if product.metafields.inventory.ShappifySale == "true" %}
    {% if product.compare_at_price_min > product.price_min %}
    {% capture discount %}
    {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
    {% endcapture %}
    <span><em>{{ discount }} OFF</em></span>
    {% endif %}
    {% endif %}
    <!-- End Bold Code -->

    Paste Code

  9. Select Save.
  10. Under "Templates" select product.liquid.

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

  11. Copy and paste this code into the desired location:
    {% include 'bold-discount-saved' %}

    Note: If placing this on a collection or product page you will want it above the "Img" source.

    Include Snippet

  12. Select Save.


Symmetry Theme Search Box Modification

Discounts does not hide duplicate and hidden products with Symmetry's search box through the out of box install instructions available. Hiding the duplicate and hidden products requires some extra code that needs to be added into the theme's liquid code. 

Note: If you are not familiar with liquid code, please Request a Bold Discounts Installation or contact our Merchant Success team and they would be happy to assist further!


To remove the hidden products from the search drop-down and prevent them from showing up in the search quantities, please follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under "Config", select search.json.liquid.
  6. Replace all code in the file with this:
    {% layout none %}
    {% comment %} Inspired by: http://ecommerce.shopify.com/c/ecommerce-design/t/diy-implementing-autocomplete-with-search-144104 {% endcomment %}
    {% paginate search.results by 10 %}
     {% capture output %}
    {% assign first = 1 %}
     {% for result in search.results %}
    {% if result.metafields.inventory.ShappifyHidden == "true" %}{% else %}
          {% if first == 1 %}{% assign first = 0 %}{% else %},{% endif %}
            {% assign resultURL = result.url %}
            {% assign thumbURL = result.images[0] | product_img_url: 'thumb' %}
    
            {"title":"{{ result.title | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
               "url":"{{ result.url   | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
             "thumb":"{{ thumbURL     | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}",
                "id":{{result.id}} }
        {% endif %}{% endfor %}
    {% endcapture %}
    
    {% comment %} Output the json object {% endcomment %}
    {"results_total":{{paginate.items}},"results":[{{ output | strip_newlines }}]}
    {% endpaginate %}
  7. Select Save.
  8. Under "Templates", select search.liquid.
  9. Comment out this line:
    <h5>We found {{ paginate.items }} {{ paginate.items | pluralize: 'result','results' }}</h5>

    Note: to comment out a line, enter <!-- before it and --> after it, the result will look like this:

    <!-- <h5>We found {{ paginate.items }} {{ paginate.items | pluralize: 'result','results' }}</h5> -->
  10. Select Save.
  11. Under "Assets", select main.js.liquid.
  12. Remove (' + data.results_total + ') from this line:
    $resultsBox.append('<a href="' + linkURL + '" class="note">See all results (' + data.results_total + ')</a>');

    The result will look like this:

    $resultsBox.append('<a href="' + linkURL + '" class="note">See all results</a>'
  13. Select Save.


Translate Sales Clock from English

 Caution

A liquid code installation is required in order for the sales clock to appear on the product page. Please visit Bold Discounts V1 Install Instructions for steps on installing the liquid code into your theme or requesting an install from our Merchant Success Team.

Discounts allows you to translate the sales clock verbiage into another language to display on your storefront. 

Note: The clock can only be translated into one language at a time.


To translate the sales clock from English on your theme, please follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under "Layout", select theme.liquid.
  6. Add this code, anywhere between the <head> and </head> tags.
    <script>
    function shappify_overwrite_sales_clock_text() {
    shappify_sale_over_label = "Sale Over";
    shappify_sale_ends_in_label = "Sale ends in";
    shappify_day_label = "day";
    shappify_days_label = "days";
    shappify_hour_label = "hour";
    shappify_hours_label = "hours";
    shappify_minute_label = "minute";
    shappify_minutes_label = "minutes";
    shappify_second_label = "second";
    shappify_seconds_label = "seconds";
    }
    </script>

    Copy and paste code

  7. Change the text in quotes to the desired translation.

    Change Text

  8. Select Save.

    Note: This method may not work with languages using special characters.



Use Custom Sales Text

 Pro-Tip

Discounts also allows you to upload and use your own custom sales icons. Visit Customize Sales Icons & Clock for more information.

Discounts allows you to add custom blocks of text to your sale items. This lets you provide your customers with additional information about sale items.

Note: The following steps require basic liquid knowledge. If you are uncomfortable with liquid code, please contact our Merchant Success team for further assistance with adding a sales text to your theme.


To add this to your store, please follow these steps:

  1. From Shopify's admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under "Snippets", select Add a new snippet.
  5. Enter bold-sales-text as the snippet name.
  6. Select Create snippet.
  7. Copy and paste the following code into the bold-sales-text snippet file:
    {% if product.metafields.inventory.ShappifySale == "true" %}<p class="bold-sales-text">YOUR SALES TEXT HERE</p>
    <style>
    .bold-sales-text {
    display: inline-flex;
    margin: 10px 10px 25px;
    color: black;
    border: solid 2px black;
    padding: 10px 10px 10px;
    }
    </style>
    {% endif %}

    Paste Code

  8. Adjust the sales text and styling accordingly.

    Note: Visit W3 Schools - CSS for more information on how to use CSS styling.

    Paste Code

  9. Select Save.
  10. Under "Templates", select product.liquid.

    Note: This file may be located under "Sections" as product-template.liquid.

  11. Copy and paste the following code where you want this text to display:
    {% include "bold-sales-text" %}

    Include bold-sales-text

  12. Select Save.

 

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