show discount amount on product page

[nomihome]

I have the IMPACT theme

I have added a % discount site-wide to all products
I want this discount % amount to also show on each product page (and on the collection page) as well as a ‘was £x now £x’ strike through - similar to how adding a price markdown does this, but without actually adding the markdown.

The reason I dont want to add a markdown and a discount together, is that the discount becomes applied to the newly marked down price, not the original price.

I want the discount to show relative to the original price

Has anyone found a way to do this in this theme?

Thanks!

[topnewyork]

Hello,

Please share “Store URL” and if you have any reference image so share that too.

Thanks!

[nomihome]

site is https://nomi-home.com/

have added the ‘compare at’ markdown to one product as a reference for what I would like the discount to show up like (as well as applying the discount to the basket total)

minor thing but the ‘save £X’ red tag could also be replaced by ‘save 30%’ instead. not as urgent though

thanks in advance for any insight

[topnewyork]

I understand that you want to show the percentage discounted under the price. You’ve added it to your product-template.liquid file but you also want the discount to show up elsewhere on the store, not just when you select the product.
For the Debut theme, the place to add your code is in the product-price.liquid file, located in the Snippets folder.
Before you customize your theme:
Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.
Add your code just above the tag, like this:

{% if variant.title %}
  {%- assign compare_at_price = variant.compare_at_price -%}
  {%- assign price = variant.price -%}
  {%- assign available = variant.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

<dl>

  {% if section.settings.show_vendor %}
    

      <dt>
        {{ 'products.product.vendor' | t }}
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    

  {% endif %}

  
    <dt>
      {{ 'products.product.regular_price' | t }}
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          
            {{ money_price }}
          
        {% endif %}
      {% else %}
        
          {{ 'products.product.sold_out' | t }}
        
      {% endif %}
    </dd>
  

  
    <dt>
      {{ 'products.product.sale_price' | t }}
    </dt>
    <dd>
      
        {{ money_price }}
      
      {{ 'products.product.on_sale' | t }}
    </dd>
  

  
    <dt>
      {{ 'products.product.unit_price_label' | t }}
    </dt>
    <dd>
      {%- capture unit_price_separator -%}
        /{{ 'general.accessibility.unit_price_separator' | t }} 
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        
          {%- if available and variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        
      {%- endcapture -%}

      {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  

  {% if product.compare_at_price_max > product.price %}Total Savings {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}
</dl>

Thanks!

[nomihome]

Does this also work the same way on the IMPACT theme?

Thanks

[topnewyork]

Hope so, Try it and see.

[Amanda_Fordeer]

Hi @nomihome .

With Product Labels and Badges, you can easily create two campaigns (one for labels and one for price badges) that meet your needs by using:

1. Variable named {Discount_percentage} or {Discount_amount} (click on the three dots in the content section)

2. Discount range feature in the Product settings tab