How To Show Discount on Product Page – Dawn Theme

Thank you for tuning in to our tutorial where we’ll demonstrate how to create a product discount display on the product page using the Dawn theme.

In this video, we will provide step-by-step instructions on how to customize the price.liquid and card-product.liquid files, as well as add CSS code to show the discounted price.

By adding a product discount display, customers can see the price reduction upfront, making it easier for them to decide on purchasing the product. This customization is quick and easy, and can be done with just a few simple changes to the theme files.

We hope this tutorial will be helpful to those looking to add product discounts on their website. If you have any questions, please don’t hesitate to ask in the comments below.

Replace Line no. 85 in Price.liquid File:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      -{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF
    </span>

Replace Line no. 98 in Card-product.liquid File:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      -{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF
    </span>

Add Code in Base.css File

.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;
  }