How do i add a sale tag to my product pages instead of the "Sale" badge?

Store Design
, ,
1

Example Website: https://snugshark.co/products/sharkblanket

My Website : https://charmente.com/

IMG_5606.jpg
IMG_5606.jpg1170×2391 151 KB

2

Hi @Simon159
To show the percentage discount instead of the sale badge follow the below steps

  • Edit the live theme and find price.liquid edit it and find this line {%- if show_badges -%} & update it with below code
From 

{%- if show_badges -%}
    
      {{ 'products.product.on_sale' | t }}
    

    
      {{ 'products.product.sold_out' | t }}
    
  {%- endif -%}

to

{%- if show_badges -%}
    
      
    {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF
    

    
      {{ 'products.product.sold_out' | t }}
    
  {%- endif -%}

And add below CSS code to component-price.css

.price__badge-sale svg {
    height: 10px;
}