How to display discount % percentage on collection page

Topic summary

A user is attempting to display discount percentages on their collection page using the Fresh theme from Eight Themes, but the badges are showing “0%” instead of the actual discount amount.

Initial Problem:

  • The discount percentage calculation is returning 0% despite products having compare-at prices
  • User shared code snippet and screenshot showing the issue

Proposed Solution:
StoreSurgeon provided replacement code that calculates the discount percentage using:

  • Formula: (compare_at_price_max - price) × 100 / compare_at_price_max
  • Removes decimal formatting with .remove: '.0'
  • Targets the “fresh-badge sale-badge” class element

Current Status:
The issue remains unresolved. The user implemented the suggested code changes but reports it’s still not working, sharing an updated screenshot confirming the discount percentage is still not displaying correctly. No further troubleshooting steps have been provided yet.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.

Hi Pps

I am using https://www.eightthemes.com/ fresh theme . and trying to display discount % on collection but getting 0 % only can I req to help me out

error image:

code:

{% assign sca_product = liquidObject %}{% assign sca_product_id_text = “,” | append : sca_product.id | append : “,” %}{% assign sca_price = sca_product.price %}{% assign sca_price_min = sca_product.price_min %}{% assign sca_price_max = sca_product.price_max %}{% assign sca_compare_at_price = sca_product.compare_at_price %}{% assign sca_compare_at_price_min = sca_product.compare_at_price_min %}{% assign sca_compare_at_price_max = sca_product.compare_at_price_max %}{% assign sca_product_available = sca_product.available %}{% assign sca_product_variantCount = sca_product.variants.size %}{% assign sca_compare_at_price_varies = sca_product.compare_at_price_varies %}{% assign sca_price_varies = sca_product.price_varies %}{% assign sca_has_only_default_variant = false %}{% capture sca_product_variants_json %}{{sca_product.variants | json }}{% endcapture %} {% capture sca_product_json %}{ {% if sca_all_gift_products_ids == null or sca_all_gift_products_ids contains sca_product_id_text %}{% assign sca_product_available = false %}{% assign sca_product_variantCount = 0 %}{% assign sca_has_only_default_variant = true %}{% assign sca_is_first_variant = true %}{% capture sca_variants_json %} [{% for variant in sca_product.variants %}{% unless variant.metafields.secomapp.freegifts %}{% unless variant.title contains ‘(Freegifts)’ %}{% unless variant.title contains ‘% off’ %}{% unless variant.metafields.shappify_qb.qb_hide == “1” %}{% unless variant.metafields.shappify_bundle.is_bundle == “true” %}{% unless variant.metafields.brodev_scn.hide == “true” %}{% unless variant.metafields.wholesaler2.wholesale %}{% unless variant.metafields.Wholesaler.level %}{% unless variant.title contains ‘(Wholesale’ %}{% if sca_is_first_variant%} {{ variant | json }}{% assign sca_price = variant.price %} {% assign sca_price_min = variant.price %} {% assign sca_price_max = variant.price %} {% assign sca_compare_at_price = variant.compare_at_price %} {% assign sca_compare_at_price_min = variant.compare_at_price %} {% assign sca_compare_at_price_max = variant.compare_at_price %} {% assign sca_product_available = variant.available %} {% assign sca_product_variantCount = 1 %} {% assign sca_is_first_variant = false%}{% else %},{{variant | json }} {% if sca_price_min >= variant.price %} {% assign sca_price_min = variant.price %} {% assign sca_price = variant.price %}{% endif %} {% if sca_price_max <= variant.price %} {% assign sca_price_max = variant.price %} {% endif %} {% if variant.compare_at_price %} {% if sca_compare_at_price_min==null or sca_compare_at_price_min >= variant.compare_at_price %} {% assign sca_compare_at_price_min = variant.compare_at_price %} {% assign sca_compare_at_price = variant.compare_at_price %} {% endif %} {% if sca_compare_at_price_max==null or sca_compare_at_price_max < variant.compare_at_price %} {% assign sca_compare_at_price_max = variant.compare_at_price %} {% endif %} {% endif %} {% if variant.available == true %} {% assign sca_product_available = true %} {% endif %} {% assign sca_product_variantCount = sca_product_variantCount | plus: 1 %}{% endif %}{% endunless %}{% endunless %}{% endunless %}{% endunless %}{% endunless %}{% endunless %}{% endunless %}{% endunless %}{% endunless %}{%endfor%} ]{% endcapture %}{% if sca_price_min < sca_price_max %}{% assign sca_price_varies = true %}{% else %}{% assign sca_price_varies = false %}{% endif %}{% if sca_compare_at_price_min < sca_compare_at_price_max %}{% assign sca_compare_at_price_varies = true %}{% else %}{% assign sca_compare_at_price_varies = false %}{% endif %}{% if sca_product_variantCount > 1 %}{% assign sca_has_only_default_variant = false %}{% endif %}{% if sca_product_variantCount == sca_product.variants.size %} “variants”:{{ sca_product.variants }},{% else %}{%assign sca_product_variants_json = sca_variants_json %} “variants”:{{ sca_variants_json }},{% endif %}{% else %} “variants”:{{ sca_product_variants_json }},{% endif %} “id”: {{sca_product.id}}, “title”: {{sca_product.title | json}}, “handle”: {{sca_product.handle | json}}, “description”: {{sca_product.description | json}}, “published_at”: “{{sca_product.published_at | date: “%Y-%m-%dT%H-%M-%S%:z” }}”, “created_at”: “{{sca_product.created_at | date: “%Y-%m-%dT%H-%M-%S%:z” }}”, “vendor”: {{sca_product.vendor | json}}, “type”: {{sca_product.type | json}}, “tags”: {{sca_product.tags | json}}, “price”: {{sca_price}}, “price_min”: {{sca_price_min}}, “price_max”: {{sca_price_max}}, “available”: {{sca_product.available}}, “price_varies”: {{sca_price_varies}}, “compare_at_price”: {{sca_compare_at_price}}, “compare_at_price_min”: {{sca_compare_at_price_min}}, “compare_at_price_max”: {{sca_compare_at_price_max}}, “compare_at_price_varies”: {{sca_compare_at_price_varies}}, “images”: {{sca_product.images | json}}, “featured_image”: {{sca_product.featured_image | json }}, “options”: {{sca_product.options | json}}, “media”: {{sca_product.media | json }}, “content”: {{sca_product.content | json }}} {% endcapture sca_product_json %}

{% assign crop_setting = settings.product-grid %}
{% assign image_crop = nil %}
{% if crop_setting == “square” %}
{% assign image_crop = “aspect-ratio–square” %}
{% elsif crop_setting == “tall” %}
{% assign image_crop = “aspect-ratio–tall” %}
{% elsif crop_setting == “wide” %}
{% assign image_crop = “aspect-ratio–wide” %}
{% endif %}

{%- assign productPaddingClass = ‘’ -%}

{% if settings.product_padding_enable == true %}
{% assign productPaddingClass = ’ has-product-padding’ %}
{% endif %}

{%- capture hoverClass -%}
{% case settings.hover_effect %}
{% when “shadow” %} has-shadow-hover
{% when “zoom” %} has-text-hover
{% when “text-only” %} has-text-hover
{% endcase %}
{%- endcapture -%}

{% assign bordersClass = ‘’ %}

{% if settings.borders_enable == true %}
{% assign bordersClass = ’ has-borders’ %}
{% endif %}

{% assign textCenterClass = ‘’ %}

{% if settings.center_align == true %}
{% assign textCenterClass = ’ has-text-center’ %}
{% endif %}

{% if settings.hover_effect == 'zoom' %} {% else %} {% if image_crop %}
{% endif %} {% render 'responsive-image' with liquidObject.media[0].preview_image, alt: liquidObject.media[0].alt %} {% if image_crop %}
{% endif %}
{% endif %}

{% if liquidObject.available %}
{% if sca_compare_at_price > sca_price and settings.show_sale_badge %}

{{ 'products.general.sale' | t }}
{% endif %} {% elsif settings.sold_out_badge %}
{{ 'products.product.sold_out' | t }}
{% endif %}

{% assign quickAddPositionClass = ‘flex-grow-1 flex-column justify-content-between’ %}

{% if settings.quick_add_position == ‘above_product_details’ %}
{% assign quickAddPositionClass = ‘flex-column-reverse’ %}
{% endif %}

{% if section.id contains 'recommendations' %}
{{ liquidObject.vendor | link_to_vendor }}

{{ liquidObject.title }}
{% render ‘judgeme_widgets’, widget_type: ‘judgeme_preview_badge’, jm_style: ‘’, concierge_install: true, product: liquidObject %}


{% if liquidObject.price_varies %}
{{ ‘products.general.from’ | t }} {{ sca_price_min | money }}
{% else %}
{{ sca_price_min | money }}
{% endif %}

{% if sca_compare_at_price > sca_price and settings.show_sale_price %}

{{ sca_compare_at_price | money }}

{% endif %}

{% assign first_variant = liquidObject.variants[0] %}
{% render ‘unit-price-measurement-grid’, variant: first_variant %}

{% else %}
{% for block in section.blocks %}
{% case block.type %}

{% when ‘product-card-vendor’ %}

{{ liquidObject.vendor | link_to_vendor }}

{% when ‘product-card-title’ %}

{{ liquidObject.title }}

{% render ‘judgeme_widgets’, widget_type: ‘judgeme_preview_badge’, jm_style: ‘’, concierge_install: true, product: liquidObject %}
{% when ‘product-card-price’ %}



{% if liquidObject.price_varies %}
{{ ‘products.general.from’ | t }} {{ sca_price_min | money }}
{% else %}
{{ sca_price_min | money }}
{% endif %}

{% if sca_compare_at_price > sca_price and settings.show_sale_price %}

{{ sca_compare_at_price | money }}

{% endif %} - {{ sca_compare_at_price | minus: sca_price_min | times: 100.0 | divided_by: sca_compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%

{% assign first_variant = liquidObject.variants[0] %}
{% render ‘unit-price-measurement-grid’, variant: first_variant %}

{% endcase %} {% endfor %} {% endif %}

{% unless settings.quick_add_position == ‘none’ %}
{% unless hideBtns == true %}

{% if sca_product_variantCount > 1 and liquidObject.available %}

{{ ‘collections.general.view_options’ | t }}
{% elsif liquidObject.available %}

{% form ‘product’, liquidObject %}

<button
class=“btn quick-add-button alt-focus w-100 my-0”
type=“submit”
name=“add”
tabindex=“0”

{{ ‘products.product.add_to_cart’ | t }}

{% endform %}

{% else %}

{{ 'products.product.sold_out' | t }}

{% endif %}
{% endunless %} {% endunless %}

code using for %

{% when ‘product-card-price’ %}



{% if liquidObject.price_varies %}
{{ ‘products.general.from’ | t }} {{ sca_price_min | money }}
{% else %}
{{ sca_price_min | money }}
{% endif %}

{% if sca_compare_at_price > sca_price and settings.show_sale_price %}

{{ sca_compare_at_price | money }}

{% endif %} - {{ sca_compare_at_price | minus: sca_price_min | times: 100.0 | divided_by: sca_compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%

{% assign first_variant = liquidObject.variants[0] %}
{% render ‘unit-price-measurement-grid’, variant: first_variant %}

{% endcase %} {% endfor %} {% endif %}

Hi @subhan97

Find the badge code with class name “fresh-badge sale-badge”

{% if sca_compare_at_price > sca_price and settings.show_sale_badge %}
{{ 'products.general.sale' | t }}

{% endif %}

and replace with this code

{% if sca_product.compare_at_price_max > sca_product.price %}
{{ sca_product.compare_at_price_max | minus: sca_product.price | times: 100.0 | divided_by: sca_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
{% endif %}

I hope this will help you .

Thanks

Hi @StoreSurgeon i tried your code but its not working.

@subhan97

solution is updated

@StoreSurgeon

tried updated code but sharing pic with you its still not showing % discount