How to Show Discount Sale Badge In Shopify Dawn Theme || OPTIXPERT

0
how to show discount sale badge in shopify

(toc)

Steps on How to Show Discount Sale Badge in Shopify

Duplicate your Current Theme

Step 1: Log in to your Shopify admin dashboard.


Step 2: Navigate to Online Store > Themes.


Step 3: Click the three dots on the current theme.


Step 4: Create a backup of the theme by selecting the Duplicate option.



Modify the code in the price.liquid file

Step 1: Click the three dots on the current theme and select Edit Code.


Step 2: Use the file filter to search for 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      


Step 5:
Click Save to apply the changes.

Modify the code in the card-product.liquid file

Step 1: Use the file filter to search for 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 1: Use the file filter to search for the 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;
  }   


Step 3:
 Click Save to apply the changes.

Youtube Video With Step-By-Step Process

Post a Comment

0Comments

Looking for something specific? Drop me a message.

Post a Comment (0)