shopifocus.com

Recently someone on Shopify Discussions asked how they can show % Discount Off badge instead of standard Sale badge on their products. In this post, we will be looking at how you can do the same for both product page and collections page. If you prefer watching video over reading, checkout this video instead:

Note: The technique discussed in this post will work properly for Dawn theme and all other free themes developed by Shopify team. The paid themes might have different file structure and code, so exact code presented here might not work for those themes.

First let’s see the desired effect which we want here. For product page, the Sale badge should change to % discount off badge as shown below:

Similarly for collections, the Sale badge should change to % discount off badge as shown below:

For making changes to product page, we will need to make changes in price.liquid file.

To open this file follow these steps:
1) Go to your online store and select Themes from left panel
2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code
3) Open the file price.liquid (you can search for it)

In this file, search for the first occurrence of span with class “price__badge-sale“
This is the span which is responsible for showing the Sale badge

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
  {{ 'products.product.on_sale' | t }}
</span>

The middle line here is responsible for showing that “Sale” text. So here we will have to add our calculated discount percentage instead. For that we can use this formula:

% Discount = Round((compare_at_price – price) / compare_at_price X 100)

In liquid (Shopify’s templating language) we write this as
{{ compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round }}

Adding this here, the final code should look like this

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
  {{ compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round }}% OFF
  {% comment %}
  {{ 'products.product.on_sale' | t }}
  {% endcomment %}
</span>

Now you might be wondering what are these {% comment %} and {% endcomment %}. These are basically expression between which the code is inactive. So in above case I did not actually remove the code which was showing ‘Sale’, rather I just added it inside comment block, so that it becomes inactive. Now in case you have a change of heart in future and want to go back to Sale badge, you still have the old code and you just have to uncomment it.

Now we need to make similar change for showing % discount on product cards in collections.

For that open the file card-product.liquid. In this file, search for the first (note: there are 2 in this file) occurrence of span with class “badge badge–bottom-left color-{{ settings.sale_badge_color_scheme }}“
This is the span which is responsible for showing the Sale badge

          <span
            id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
            class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
          >
            {{- 'products.product.on_sale' | t -}}
          </span>

Performing similar change as explained above, we will get:

          <span
            id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
            class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
          >
            {{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round }}% OFF
            {% comment %}
            {{- 'products.product.on_sale' | t -}}
            {% endcomment %}
          </span>

One important difference to note here is that instead of directly writing compare_at_price and price like in previous case, we have to append card_product. in front of them.

One you make these changes in price.liquid and card-product.liquid files, save your changes and refresh your store. And now you should be looking at cool looking % Discount Off badges.

That’s all for this post, I hope you learnt something new from this.