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;
}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024