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 |
---|---|
152 | |
96 | |
71 | |
62 | |
51 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By