Make a selection

Customization & Styling in Bold Discounts

Laurel
Laurel
  • Updated

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.

This help article goes over the customizations and the setup of each customization that are available in Discount.

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

Note: Making adjustments to Bold Discounts 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 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 only appears on product pages that are in an active discount in Bold Discounts. Adding a product price and compare at price on a product does 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, the code should be placed 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.

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 by10 %} {% 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 looks 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 looks like this:

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

 

 

Use Custom Sales Text

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

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.

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.

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.