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;
  }
4.6/5 - (22 votes)

About

35 thoughts on “How To Show Discount on Product Page – Dawn Theme”

  1. Just wanted to make a note, the Card-product is now apparently Product.card and the lines you’re looking for are at the very end from what I can tell, however for whatever reason the code doesn’t work with it. Throws the Shopify.liquid error.

    The other code still work, however they appear to go inline with the theme accents selected. 🤔

    1. Hello, first of all thank you very much for this useful tutorial. I had the same problem as Peter.
      I solve it in this way:

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

  2. Hi Brother,
    First of all, bunches of thanks to you for the kind of assistance you’re giving at free of cost. And now my question is, following your assistance i’m able to see the changes only in single product view i.e in cart but not in home page or product page. Can you assistance me on this to fix it? Thanks in advance.

  3. Hey, I’m not happy with the customisations. Could you include a link to the original code snippet? There is no older version of my files available..

  4. Hi,

    This is awesome, but how does it work with Variants? For example. I have a discount on one variant of my product (on medium size). But the badge compares the prices with the cheapest variant on the thumbnail (showing 51% discount when it’s only a 25% discount). Can this be solved somehow? so that it compares with the correct variant

  5. I followed your video instructions, and it is not working for me. Fortunately, it doesn’t seem to alter the website as I still see the regular pricing on the items. I noticed that in your written instructions for card.product file you said line 98 but in the video you say line 94. I followed the video instructions and dont see the discounted price there. What am I doing wrong? I think I followed exactly as instructed in your video.

  6. I followed your video instructions, and it is not working for me. Fortunately, it doesn’t seem to alter the website as I still see the regular pricing on the items. I noticed that in your written instructions for card.product file you said line 98 but in the video you say line 94. I followed the video instructions and dont see the discounted price there. What am I doing wrong? I think I followed exactly as instructed in your video. I am very nervous as I am launching today. At least it seems is not changing anything on the website. Should I open a new Dawn template and copy whole original codes of each 3 files to put it back how it was?

    1. Hi Mayra,

      We keep telling you to always have the backup of your theme before doing code changes, did you not take the backup?

      Thanks!

  7. I use sense theme, my compare at price is not showing on my shop. I make sure i put the original price at “compare at Price” and the discounted price at the “Price” option

    How can I fixed this?
    Thanks

  8. Bonjour,

    Merci pour ce super tuto.
    Cela ne fonctionne pas chez moi mais je pense savoir pourquoi.
    Ces codes fonctionnent lorsque l’on ajoute des “prix réduits” sur les fiches produit une à une .

    Je désirerais moi le faire lorsqu’on lance une campagne marketing de réductions sur plusieurs fiches produits automatiquement.
    Mes réductions ne s’affichent que dans le panier… Sauriez vous m’aider?

    Belle soirée à vous,
    @Violn

Leave a Comment

Your email address will not be published. Required fields are marked *