Customizing Product Sale Badges - Free Tutorial

In this tutorial, we're going to customize your sale badges so they can say whatever you want.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

Editing Sale Badges For The Collection Product Cards

Edit the snippet card-product.liquid, add/change the following lines of code

Original:

<div class="card__badge {{ settings.badge_position }}">
  {%- if card_product.available == false -%}
    <span
      id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
      class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
    >
      {{- 'products.product.sold_out' | t -}}
    </span>
  {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
    <span
      id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
      class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
    >
      {{- 'products.product.on_sale' | t -}}
    </span>
  {%- endif -%}
</div>

Add calculation and text:

{%- 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 }}% OFF

Final code with additional lines added in to the existing code:

<div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {%- 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 -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--top-right color-{{ settings.sale_badge_color_scheme }}"
              >
                {% comment %}{{- 'products.product.on_sale' | t -}}{% endcomment %}
                {{- discount_percentage }}% OFF
              </span>
            {%- endif -%}
          </div>

Modify the badge position (optional)

In the theme editor settings, under “Badge”, select the desired position:

Editing Sales Badges For The Product Page

In the snippet price.liquid, update the code under the check for show_badges:

Original:

{%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

Add calculation and text:

{%- 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 }}% OFF

Final code with additional lines added in to the existing code:

{%- if show_badges -%}
    {%- 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 -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {% comment %}{{ 'products.product.on_sale' | t }}{% endcomment %}
      {{- discount_percentage }}% OFF
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}