Customization & Styling in Bold Discounts V1

Bold Discounts V1 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 V1 to ensure the customization you added to your theme is working correctly.


Making adjustments to Bold Discounts V1 requires knowledge of liquid code. If you are not comfortable with adding liquid code to your theme, one of our partners could complete one of these customizations or a similar customization as a paid customization on your store. Please visit HeyCarson via this form.



Create a Collection for Bold Discounts V1 Using a Product Tag

To create a collection using a product tag to use with Discounts V1, 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 V1 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 V1 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 Customer 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: {% 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":{{}} }
        {% 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.



Use Custom Sales Text


Discounts V1 also allows you to upload and use your own custom sales icons. Visit Customize Sales Icons & Clock in Bold Discounts V1 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 Customer 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>
    .bold-sales-text {
    display: inline-flex;
    margin: 10px 10px 25px;
    color: black;
    border: solid 2px black;
    padding: 10px 10px 10px;
    {% 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