Show discount amount on all products page

Solved
gwacht
Tourist
4 0 2

I am attempting to show the percentage discounted under the price. I have been successful in adding the discount percent on each individual product page using this code:

 

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

 

My issue is I want it to show under all products too, not just when you select the product. Is this possible? I am using the debut theme, and I placed the above code in product-template.liquid. 

 

Thanks,

GW

Accepted Solution (1)

Accepted Solutions
BrianAtWork
Shopify Partner
242 58 153

This is an accepted solution.

Hi @gwacht,

 

Welcome to the Shopify Community!

 

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 </dl> tag, like this:

 

<!-- snippet/product-price.liquid -->
{% 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 class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-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 -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
  {% 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>

Let me know if this solves your problem or if you need further help!

 

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

View solution in original post

Replies 16 (16)
Ninthony
Shopify Partner
2247 339 900

You can probably use the same little snippet of code in your collection-template.liquid too, you'd just have to locate where you want it to be, which can be tricky. Find your forloop, you'll want it in there. It will probably look like this:

 

{% for product in collection.products %}
// code here to output each product
{% endfor %}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
BrianAtWork
Shopify Partner
242 58 153

This is an accepted solution.

Hi @gwacht,

 

Welcome to the Shopify Community!

 

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 </dl> tag, like this:

 

<!-- snippet/product-price.liquid -->
{% 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 class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-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 -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
  {% 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>

Let me know if this solves your problem or if you need further help!

 

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

View solution in original post

gwacht
Tourist
4 0 2

That worked perfectly. Thanks for the help, I was struggling with this all morning!

StellaP
New Member
1 0 0

Hi there, 

 

I have tried the solution given but something is not working properly. Could you please advice on SIMPLE theme?

 

Thanks :) 

marcos7-777
New Member
1 0 0

And for Warehouse theme?

Agora
New Member
1 0 0

Please, I have the same problem, but my theme is "Suplly" could you please tell me how to you the code on it? 


@BrianAtWork wrote:

Hi @gwacht,

 

Welcome to the Shopify Community!

 

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 </dl> tag, like this:

 

<!-- snippet/product-price.liquid -->
{% 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 class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-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 -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
  {% 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>

Let me know if this solves your problem or if you need further help!

 

 



@BrianAtWork wrote:

Hi @gwacht,

 

Welcome to the Shopify Community!

 

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 </dl> tag, like this:

 

<!-- snippet/product-price.liquid -->
{% 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 class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-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 -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
  {% 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>

Let me know if this solves your problem or if you need further help!

 

 



@BrianAtWork wrote:

Hi @gwacht,

 

Welcome to the Shopify Community!

 

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 </dl> tag, like this:

 

<!-- snippet/product-price.liquid -->
{% 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 class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-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 -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
  {% 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>

Let me know if this solves your problem or if you need further help!

 

 


 

foraZenlife
New Member
1 0 1

Hi guys, I tried to post before but I think it somehow got marked as spam.

 

I have added the following code to my product template in order to show a "You Save xx %  ($xx.00) message. It seems though that if you switch product variants it does not auto-update, unless you refresh the page. How can I make it re-calculate automatically, when switching variants ?

 

Thanks for your help in advance,

 

 

 {% if product.compare_at_price_max > product.price %}You save {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | truncate: 5, "" }}%{% endif %}
 
{% if product.compare_at_price_max > product.price %} ({{ current_variant.compare_at_price | minus: current_variant.price | money }}){% endif %}

 

 

Ninthony
Shopify Partner
2247 339 900

There's likely a javascript function that fires every time a variant is switched. You'll have to hunt that down in one of your js files and alter it to update that field. In older theme's it's called selectCallback usually. Or go into your js file and look for "if (variant)" or "if (!variant)" -- likely will be inside the callback function.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
lestergalvis
New Member
3 0 0

Regards.
How can I insert the same code to my store with the theme: Jewelias-1.0.0, https://arcosmecenter.com/

Thanks in advance