Prestige Theme - How To Set A Sale Badge Such As 00% OFF on product page?

Musinsa
New Member
4 0 0

How can I set a 10% OFF on the product page and collection page?

Sample images are below:

Musinsa_0-1634829014378.png Musinsa_1-1634829052753.png

 

My pages like these : 

Musinsa_3-1634829164437.pngMusinsa_2-1634829134865.png

 

 

 

 

Replies 3 (3)
Musinsa
New Member
4 0 0
 {%- if sca_compare_at_price > sca_price -%}
    <span class="ProductItem__Price Price Price--SalePer SalePer Text--subdued">{{sca_compare_at_price | minus: sca_price | times: 100 | divided_by: sca_compare_at_price | replace: '0,', ''| append: "% OFF"}}</span><br>
      {%- endif -%}

product-item.liquid

Pasted the code below "{%- if show_product_info -%}" , so I could set on a collection page.

Musinsa_0-1634831236029.png

 

Musinsa
New Member
4 0 0

product-meta.liquid

 

   {%- if product.compare_at_price > product.price -%}
    <div class="ProductMeta__Price Price Price--SalePer SalePer Text--subdued u-h4">{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}</div>
      {%- endif -%}

 

 

 

 

Put source code below "{%- if block.settings.show_sku and product.selected_or_first_available_variant.sku != blank -%}", 

 

The result is :

Musinsa_0-1634834756880.png

 

{%- if settings.currency_code_enabled -%}

...

{%- endif -%}&nbsp;&nbsp;

   {%- if product.compare_at_price > product.price -%}
    <div class="ProductMeta__Price Price Price--SalePer SalePer Text--subdued u-h4">{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}</div>
      {%- endif -%}

 

Musinsa
New Member
4 0 0

theme.css

 

/**
 * ----------------------------------------------------------------------------
 * Sale
 * ----------------------------------------------------------------------------
 */

.SalePer { 
color: #ffffff;
    background-color: #e33434;
    padding: 0 4px;
}