Shopify themes, liquid, logos, and UX
How can I set a 10% OFF on the product page and collection page?
Sample images are below:
My pages like these :
{%- 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.
{%- 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 :
{%- if settings.currency_code_enabled -%}
...
{%- endif -%}
{%- 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 -%}
/**
* ----------------------------------------------------------------------------
* Sale
* ----------------------------------------------------------------------------
*/
.SalePer {
color: #ffffff;
background-color: #e33434;
padding: 0 4px;
}
User | RANK |
---|---|
126 | |
102 | |
74 | |
72 | |
41 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022