Sale badge to show amount saved

From your code editor open price.liquid file and if you havent made any code changes to it then replace all the code with this. Please always remember to take a backup of the theme in case anything goes wrong.

{% comment %}
Renders a list of product’s price (regular, sale)

Accepts:

  • product: {Object} Product Liquid object (optional)
  • placeholder: {Boolean} Renders a placeholder price (optional)
  • use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  • show_badges: {Boolean} Renders ‘Sale’ and ‘Sold Out’ tags if the product matches the condition (optional)
  • price_class: {String} Adds a price class to the price element (optional)
  • show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

Usage:
{% render ‘price’, product: product %}
{% endcomment %}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
elsif placeholder
assign target = null
else
assign target = product
endif

assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = product.price_min
assign price_max = product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif

if target == product and product.price_varies
assign money_price = ‘products.product.price.from_price_html’ | t: price: money_price
endif
-%}

{%- unless target == null and placeholder == null -%}

{%- comment -%} Explanation of description list: - div.price__regular: Displayed when there are no variants on sale - div.price__sale: Displayed when a variant is a sale {%- endcomment -%}
{%- if product.quantity_price_breaks_configured? -%} {%- if show_compare_at_price and compare_at_price -%} {%- unless product.price_varies == false and product.compare_at_price_varies %} {{- 'products.product.price.regular_price' | t -}} {% if settings.currency_code_enabled %} {{ compare_at_price | money_with_currency }} {% else %} {{ compare_at_price | money }} {% endif %} {%- endunless -%} {%- endif -%} {{ 'products.product.price.regular_price' | t }} {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}} {%- else -%} {{ 'products.product.price.regular_price' | t }} {{ money_price }} {%- endif -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %} {{ 'products.product.price.regular_price' | t }} {% if settings.currency_code_enabled %} {{ compare_at_price | money_with_currency }} {% else %} {{ compare_at_price | money }} {% endif %} {%- endunless -%} {{ 'products.product.price.sale_price' | t }} {{ money_price }}
{{ 'products.product.price.unit_price' | t }} {{- product.selected_or_first_available_variant.unit_price | money -}} /  {{ 'accessibility.unit_price_separator' | t }}  {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%} {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}} {%- endif -%} {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
{%- if show_badges -%} {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %} {% assign discount_amount = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price %} {% assign discount_percentage = discount_amount | times: 100 | divided_by: product.selected_or_first_available_variant.compare_at_price | round %} {{ 'products.product.on_sale' | t }} {{ discount_amount | money_without_trailing_zeros }} Off {% endif %} {{ 'products.product.sold_out' | t }} {%- endif -%}
{% endunless %}

Hope this helps. Thanks

Shadab Ali

1 Like