Are you searching for a way to make your Shopify store more visually appealing and boost sales? Adding eye-catching discount badges to your product and collection pages is a proven strategy to achieve this. These badges not only capture your customers’ attention but also highlight the value of your discounts, encouraging more purchases.

In this step-by-step tutorial, we’ll show you how to add discount badges to your Shopify store. By customizing the price.liquid and card-product.liquid files, and applying CSS tweaks, you’ll create an attractive product discount display that sets your store apart from competitors.

Why Add Discount Badges to Your Shopify Store?

Displaying discounts prominently helps customers quickly identify deals, making it easier for them to make purchasing decisions. This straightforward customization enhances the user experience and can significantly impact your store’s conversion rates.

Step-by-Step Guide to Adding Discount Badges

1. Edit the price.liquid File
   Learn how to modify this key theme file to dynamically display discounted prices.

Update code in Price.liquid File:

Replace {{ 'products.product.on_sale' | t }} with the following code:

-{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF

1. Customize the card-product.liquid File
   Update this file to ensure the discount badge appears consistently on your product and collection pages.

Update code in Card-product.liquid File:

Replace {{- 'products.product.on_sale' | t -}} with the following code:

-{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF

1. Add CSS Styling
   Make your discount badges visually appealing by adding custom CSS styles that fit your store’s branding.

Add Code in Base.css File

.card__badge .badge{
    border-radius: 0;
    font-size: 14px;
    background-color: red;
    font-weight: bold;
    border: none;
  }
  
  .price .price__badge-sale {
    border-radius: 0;
    font-size: 14px;
    background-color: red;
    font-weight: bold;
    border: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

Benefits of Adding Product Discounts

• Highlight Value: Showcase price reductions upfront to entice customers.
• Improve User Experience: Help shoppers quickly identify deals, simplifying their decision-making process.
• Boost Sales: Create a sense of urgency and attract deal-seeking customers.

Watch the Tutorial Video

Follow along with our easy-to-understand video tutorial, where we demonstrate how to customize your Shopify theme files step by step. Whether you’re a beginner or an experienced Shopify user, this guide makes the process simple and accessible.

If you have any questions or need further assistance, feel free to drop a comment below the video. We’re here to help you optimize your Shopify store for success!

Stay tuned for more Shopify tips and tricks to enhance your online store and drive sales.