How can I replace the "sale" badge with precentage or amount off?

Shopify Discussion
1

Hi,

I want to change the “sale” badge on the product detail page and product listing page to a percentage or amount off, but I don’t know where can I edit this.

Hope anyone could help me with this.

Thank you!

1 Like
2

Hi there, @Muffinlike !

Welcome to the Community! Definitely a great place to gather some input regarding anything about the platform! We have a great group of contributors who are always willing to provide their own expertise and experience with regards to Shopify!

With regards to your inquiry, I look forward to see what other contributors will have to say as I can see various ways of achieving this request that you have. While we wait however, I have found some apps that will help give you the ability to customize this aspect of your store. Give these apps a look to see how they can work for you in this request:

All apps come with a free plan so it is definitely worth the look. Let me know how these work out for you!

3

HI @Muffinlike

You can try this code, the liquid code will calculate the % of the product and CSS will create a sale tag you can design the sale tag as per your need.

Replace the liquid code with your current sale tag code and add CSS in the style tag or your scss file in the asset.

{%- if product.compare_at_price_min > product.price_min -%}

{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}

Sale {{ discount }} OFF

{%- endif -%}

Css

,::after,*::before{

box-sizing: inhiret;

margin: 0;

padding: 0;

}

.Card {

// background-color: #d1d8e0;

// height: 70vh;

width: 18rem;

// margin: 6rem auto;

border-radius: 6px;

position: relative;

box-shadow: 9px 5px 5px rgba(0,0,0,.3);

// background-image: url(https://source.unsplash.com/random);

background-position: center;

background-size: cover;

z-index: 1;

}

.ribbon {

width: 150px;

height: 150px;

overflow: hidden;

position: absolute;

top: -10px;

right: -10px;

}

.ribbon_content {

left: -25px;

top: 30px;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

position: absolute;

display: block;

width: 225px;

padding: 10px 0;

background-color: #000000;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.192);

color: #fff;

text-shadow: 0 1px 1px rgba(0,0,0,.2);

text-transform: uppercase;

text-align: center;

border: 2px dotted #fff;

outline : 5px solid #191713;

font-family: ‘TradeGothicLTStd-BdCn20’;

font-size:18px;

}

.ribbon::before {

top: 0;

left: 0;

border-top-color: transparent;

border-right-color: transparent;

position: absolute;

z-index: -1;

content: ‘’;

display: block;

border: 5px solid #f19066;

box-sizing: content-box;

}

.ribbon::after {

bottom: 0;

right: 0;

border-top-color: transparent;

border-right-color: transparent;

position: absolute;

z-index: -1;

content: ‘’;

display: block;

border: 5px solid #f19066;

}

Thank You

4

@Muffinlike

can you please try this way Percentage Code