(toc)
Steps on How to Show Discount Sale Badge in Shopify
Duplicate your Current Theme
Step 3: Click the three dots on the current theme.
Modify the code in the price.liquid file
Step 3: Open the price.liquid file and press
Ctrl+F to find the line
{{ 'products.product.on_sale' | t }}
.
Step 4: Replace
{{ 'products.product.on_sale' | t }}
with the provided code.
Price.liquid File Changes
-{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF
Modify the code in the card-product.liquid file
Step 2: Open the card-product.liquid file and
press Ctrl+F to find the line {{- 'products.product.on_sale' | t -}}.
Step 3: Replace each {{- 'products.product.on_sale' | t -}} with the provided code.
Cart-Product.liquid File Changes
-{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF
Step 4: Click Save to apply the changes.
Add the code in Base.css File
Step 2: Open the base.css file & add the following code at the end.
Base.css Changes
.card__badge .badge{
border-radius: 0;
font-size: 13px;
background-color: red;
font-weight: bold;
border: none;
}
.price .price__badge-sale {
border-radius: 0;
font-size: 13px;
background-color: red;
font-weight: bold;
border: none;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
Looking for something specific? Drop me a message.