How to Display Percentage Discount on Sale Badges in the Shopify Dawn Theme

Go To Online Store > Theme > Edit Code

First, use the search bar in your Shopify theme editor to find the card-product.liquid file and open it.

Next, look for the word badge in the file. Once you find it, add the code snippet provided below. Check the image for guidance on where exactly to paste the code.

{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}

-{{- discount_percentage }}%

{% comment %} {{ 'products.product.on_sale' | t }} {% endcomment %}

Next, use the search bar to find the price.liquid file and open it.

In this file, search for the term badge and paste the code provided below. Refer to the image to see exactly where the code should go.

{%- assign difference = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: product.selected_or_first_available_variant.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}

-{{- discount_percentage }}%

{% comment %} {{ 'products.product.on_sale' | t }} {% endcomment %}