How to edit the Sale word on the product page to percentage?

Solved

How to edit the Sale word on the product page to percentage?

smsigroup
Explorer
77 0 20

Good day!

How to edit the Sale word on the product page to percentage?

https://scholl-shoes.com.ph/collections/sale-product-may-29-2024/products/evis-2-0-womens-casual-san...


Thank you!

 

smsigroup_1-1716966527447.png

 

 

Accepted Solution (1)
saim007
Shopify Partner
602 74 103

This is an accepted solution.

@smsigroup Just remove the red box code (see screenshot) and replace the code with the below code 

 

saim007_1-1717049802311.png

 

{% if product.compare_at_price_max > product.price %}
  {% assign discount_percentage = product.price | times: 100.0 | divided_by: product.compare_at_price_max | minus: 100.0 | abs %}
  <span class="product-tag gradient-theme">
    {{ discount_percentage | floor }}%              
  </span>
{% endif %}

save and check it will resolve your all issues and let me know if works!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

View solution in original post

Replies 9 (9)

saim007
Shopify Partner
602 74 103

@smsigroup You have to add the code in the product template file, find the sale tag code and place the below code 

{% if product.compare_at_price_max > product.price %}
  {% assign discount_percentage = product.price | times: 100.0 | divided_by: product.compare_at_price_max | minus: 100.0 | abs %}
     <p>Your save tag code or text {{ discount_percentage | floor }}%</p>
{% endif %}

that's it now instead of sale badge it will show the percentage of save!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
smsigroup
Explorer
77 0 20

@saim007 

Thank you for the reply.

Theme settings setup;
Tag Sale Product: %

smsigroup_2-1717024067166.png

in the product list view it shown the percentage of the discount, but in the product view it shown the Sale word instead of the percentage discount.

Product list view;

smsigroup_0-1717023872687.png

 

Product view;

 

- after i paste the code.
- it should change the SALE to -30%

 

smsigroup_1-1717023922581.png

 

Thank you!





saim007
Shopify Partner
602 74 103

@smsigroup You have to find out the correct product template then apply my code then it will show % instead of Sale word in product view layout.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
smsigroup
Explorer
77 0 20

@saim007 

i already found the correct product template, and paste the code

 

    <div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="product-single__info-wrapper">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
        <div class="product-single__meta small--text-center">
          <h1 itemprop="name" class="product-single__title">{{ product.title }}<sup><span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">

            {% if product.compare_at_price_max > product.price %}
  {% assign discount_percentage = product.price | times: 100.0 | divided_by: product.compare_at_price_max | minus: 100.0 | abs %}
     <p>Your save tag code or text {{ discount_percentage | floor }}%</p>
{% endif %}
            
            <span class="product-tag gradient-theme">
              {{ 'products.product.on_sale' | t }}              
            </span>
          </span></sup>​


this is the result
smsigroup_0-1717048630462.png

 


 

saim007
Shopify Partner
602 74 103

This is an accepted solution.

@smsigroup Just remove the red box code (see screenshot) and replace the code with the below code 

 

saim007_1-1717049802311.png

 

{% if product.compare_at_price_max > product.price %}
  {% assign discount_percentage = product.price | times: 100.0 | divided_by: product.compare_at_price_max | minus: 100.0 | abs %}
  <span class="product-tag gradient-theme">
    {{ discount_percentage | floor }}%              
  </span>
{% endif %}

save and check it will resolve your all issues and let me know if works!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
smsigroup
Explorer
77 0 20

@saim007 

it worked!

Thank you very much for your help.

is it possible to add minus sign -70%?

smsigroup_0-1717051466289.png

 

smsigroup
Explorer
77 0 20

@saim007 

Thank you very much for your help.

Tech_Savvy
Tourist
22 0 3

Hello @smsigroup 

It usually requires editing your theme's code to change the "Sale" word on the product page to show a percentage Usually, this is in a file called product.liquid or product-template.liquid. You must edit the code to change the phrase "Sale" to the percentage discount when you've found the appropriate one.

Made4uo-Ribe
Shopify Partner
8730 2086 2555

Hi @smsigroup 

 

1. From your Admin page, go to Online Store > Themes > Click the three dots > Edit default theme content

2. Under the Search bar, type Sale

3. Look for the work Sale inside the textbox

4. Change the word and SAVE

Made4uoRibe_0-1716972077014.png

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.