Is there anyway to change the sale icon?

[Tomates]

I’m using refresh theme and was wondering if there is any code to change this “Sale” badge to say something like “25% OFF” instead? Whether it be a manual insertion of the text “25% OFF” or an automatic discount calculator that calculates the difference I don’t mind.

Thank you

[Dan-From-Ryviu]

Hi @Tomates

You can do that by following the steps below

• Go to Online Store > Themes
• Click “…” > Edit code in your Refresh theme
• In Snippets, open price.liquid file
• Find this line of code {{ ‘products.product.on_sale’ | t }}
• Replace it with this

{% if product.compare_at_price > product.price %} 
{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%} 
{{ percent }}% OFF 
{% endif %}​

• Save file

[ProtoMan44]

hey @Tomates thanks for posting here.
please replace this code to badge area :

{% if product.compare_at_price > product.price %}
  {% assign discount_percent = 100 | times: (product.compare_at_price - product.price) | divided_by: product.compare_at_price | round %}
  {{ discount_percent }}% OFF
{% endif %}

let me know if any thing wrong with it.

[PageFly-Kate]

Hi @Tomates ,

I’m Kate from PageFly - Shopify Landing Page Builder.

You can follow 2 options without code or with code edit. The first one will be easier yet not optimized for other product discounts. The second one is a bit complex yet you can easily follow my image and guide as follows:

Option 1. To add “25% OFF” manually without any code, you can follow this guide:

Go to your Admin area,

• Go to “Online Store” → “Themes”
• Go to “Edit default theme content”

• Search for the word “sale” and change “sale” to “25% OFF” then save:

Option 2. To automatically calculate the price for each product, it’s a bit more complicated by adding code:

1. Add code to calculate:

• Go to “Themes” → “Edit code”
• Search for “price.liquid”
• Search for {%- if show_badges -%}
• Copy this code after {%- if show_badges -%} line:

{%- assign difference = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price -%}

{%- assign float_difference = difference | times: 1.0 -%}

{%- assign discount_fraction = float_difference | divided_by: product.selected_or_first_available_variant.compare_at_price -%}

{%- assign discount_percentage = discount_fraction | times: 100 | round -%}

2. After the

• Delete the line between it and
• Then replace it with:

{{- discount_percentage }}% OFF

{% comment %} {{ 'products.product.on_sale' | t }} {% endcomment %}

See code after edit:

• Save file.

Hope this help,

Kate | PageFly team