How To Show Discount on Product Page [Taste Theme]

Hey everyone, in this video tutorial we’re going to show you how to show a discount on your product page using the Taste theme.

This is a really great way to increase conversions and let your customers know that they’re getting a good deal. So let’s get started!

Price.liquid Code Update

Replace Line no. 85-86 in Price.liquid File with the following code:

<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>

Card-product.liquid Code Update

Replace Line no. 127-132 with the following code:

<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>

Base.css Code

Add the following on the bottom of the 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;
  }