How to show the difference between the price before discount and after

[INKLY]

Hi I would like to show how much the visitor would save if they purchase the product, similar to this: 

How can I achieve this ? 

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=162795487497

[suyash1]

@INKLY - it will need code editing, you will need liquid developer, if you are familiar with coding then you can do it in product template

[tobebuilds]

Hi INKLY,

You'll need to calculate the discount percentage in Liquid. The formula is straightforward:

1. Subtract the "price" from the "compare at price."
2. Divide that number by the "compare at price."
3. Multiply by 100.

That's the percentage the customer will save.

Ask ChatGPT to help you modify your theme code for this. Paste in the contents of your `price.liquid` (or a similar file), and have it rewrite it for you.

Best,
Tobe

[INKLY]

Thank you I will give it a try !

[tobebuilds]

Just to make sure to make a copy of your theme first. That way, in case anything goes wrong, you can quickly restore the previous state.

[INKLY]

@tobebuilds, I didn't manage to make it work, I got this error code from Shopify (Liquid syntax error (line 39): Unknown tag '{% comment'). Any idea why?

This is a resume of what I did with Chatgpt: 

• Calculation Block: Added after the variable assignments.
• Display Block in .price__regular: Added the discount_percentage span after {{ money_price }}.
• Display Block in .price__sale: Added the discount_percentage span after {{ money_price }}.

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

  Accepts:
  - product: {Object} Product Liquid object (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
  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

  {% comment %}
    Calculate the discount percentage
  {% endcomment %}
  assign discount_percentage = 0
  if compare_at_price > price
    assign discount_percentage = ((compare_at_price | minus: price) | times: 100) | divided_by: compare_at_price
  endif
-%}

<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- 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 -%}
    <div class="price__regular">
      {%- 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 %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{ money_price }}
        </span>
        {%- if discount_percentage > 0 -%}
          <span class="discount-percentage">
            ({{ discount_percentage | round: 2 }}% off)
          </span>
        {%- endif -%}
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price }}
      </span>
      {%- if discount_percentage > 0 -%}
        <span class="discount-percentage">
          ({{ discount_percentage | round: 2 }}% off)
        </span>
      {%- endif -%}
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- 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 }}
        </span>
      </span>
    </small>
  </div>
  {%- 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 -%}
</div>

[Amanda_Fordeer]

Hi @INKLY,

I have reviewed your store and noticed that the products on the production pages are missing their prices. If that is intentional, then it's fine. However, if it's an oversight, I think you should add them.

In addition, if you haven't found a solution yet and would like to fulfill your request, you can try using our Fordeer Product Labels & Badges.

In our Standard package, you can find this feature in the "Badges" tab >> Design: you can create badges that match your store's style >> Products: select "Show label on" and choose "Specific products." Towards the bottom, you will find the Discount Range feature, which allows you to display the percentage/amount discount based on the product's compare-at-price and price.