Turbo Theme|How to change the "Sale" budge in the collection page to the actual percentage discount?

Hello, I am trying to change the sale badge on the collection page + home page from the word “Sale” to the actual percentage example (35%). I was able to change the product page only, I couldn’t find where is the code line for the product page that needs to be replaced.

Please help me :slightly_smiling_face:

Hi @Versis , not having the Turbo theme right in front of me, I would suggest to look for the “Product Grid” or “Product Item” file, the logic should be here and you can then adjust it as needed. Let us know!

Where can I find the “Product Grid” or “Product Item” files?

I checked the product grid and I don’t have the option to do it from there.

I think that It’s a code problem.

Could you share your store’s URL so we can check this a bit closer?

www.versis.co.il

The word “במבצע” on the product’s image top right corner is “Sale”

Look for the this class inside your theme files: price-ui-badge__sticker-text

This is where the sale is being displayed. Check your “featured collection” file inside your code and see how the products are being rendered inside the “for” loop, this should guide you to the proper grid file.

This is the code of price-ui-badges.liquid

{% if settings.sale_banner_enabled %}

{% comment %}Inject @pixelunion /shopify-price-ui/price-ui-badge begin{% endcomment %} {%- assign locale_badge_sold_out = 'product.badge.sold_out' | t -%} {%- assign locale_badge_on_sale = 'product.badge.sale' | t -%}
.price-ui-badge--loading { display: block !important; opacity: 1 !important; }

{% if product.available == false %}
{%-
render ‘price-ui-templates’,
template: ‘price-ui-badge’,
badge: locale_badge_sold_out,
-%}
{%- elsif product.compare_at_price > product.price -%}
{%-
render ‘price-ui-templates’,
template: ‘price-ui-badge’,
badge: locale_badge_on_sale,
-%}
{%- endif -%}

{% comment %}Inject @pixelunion /shopify-price-ui/price-ui-badge end{% endcomment %}

{% if collection_handles contains ‘new’ %}

{{ 'collections.general.new' | t }}
{% endif %}

{% if collection_handles contains ‘pre-order’ %}

{{ 'collections.general.pre_order' | t }}
{% endif %}
{% endif %}

This is where the code is being generated: price-ui-templates

The badge: locale_badge_on_sale, in your code sends the value to be displayed. Calculate it before hand and replace “locale_badge_on_sale” with your variable and it will work.

This is the code of “price-ui-templates.liquid” - what do I have to change? I don’t know nothing about coding sorry.

{%- capture output -%}
{%- comment -%}
@Anonymous template {String}
A string representing the template to render

@Anonymous template (price)
The template for all prices in the Price UI
Innermost element must contain the data attribute ‘price’

@Anonymous value {String}
A money value, empty if used as a template

@Anonymous template (price-percent)
The template for all prices displayed as a percentage of savings
Innermost element must contain the data attribute ‘price-percent’

@Anonymous value {String}
The percentage value saved, empty if used as a template

@Anonymous template (price-min)
The template for price minimums, used in price ranges
Innermost element must contain the data attribute ‘price-min’

@Anonymous value {String}
A money value, empty if used as a template

@Anonymous template (price-max)
The template for price maximums, used in price ranges
Innermost element must contain the data attribute ‘price-max’

@Anonymous value {String}
A money value, empty if used as a template

@Anonymous template (unit-quantity)
The template for unit quantities, used in unit pricing
Innermost element must contain the data attribute ‘unit-quantity’

@Anonymous value {String}
A string, empty if used as a template

@Anonymous template (unit-price)
The template for unit prices, used in unit pricing
Innermost element must contain the data attribute ‘unit-price’

@Anonymous value {String}
A money value, empty if used as a template

@Anonymous template (unit-measurement)
The template for unit measurements, used in unit pricing
Innermost element must contain the data attribute ‘unit-measurement’

@Anonymous value {String}
A string, empty if used as a template

@Anonymous template (price-ui)
The template for the Price UI.
Must contain the data attributes ‘compare-at-price’, ‘price’, and ‘unit-pricing’

@Anonymous compare_at_price {Object}
Can be a price object or price-range object,
empty if used as a template or false if not included

@Anonymous price {Object}
Can be a price object or price-range object,
empty if used as a template

@Anonymous unit_pricing {Object}
Must be a unit-pricing object,
empty if used as a template or false if not included

@Anonymous template (price-ui-badge)
The template for the Price UI Badge.
Must contain the data attribute ‘badge’

@Anonymous badge {String}
A string containing product information,
empty if used as a template
{%- endcomment -%}

{%- capture _price -%}{%- if value != blank -%}{{- value | money -}}{%- endif -%}{%- endcapture -%}

{%- if template == ‘price’ -%}
{{- _price -}}
{%- elsif template == ‘price-percent’ -%}
{%- if value != blank -%}{{- value -}}{%- endif -%}
{%- elsif template == ‘price-min’ -%}
{{ _price }}
{%- elsif template == ‘price-max’ -%}
{{ _price }}
{%- elsif template == ‘unit-quantity’ -%}
{%- if value != blank -%}{{- value -}}{%- endif -%}
{%- elsif template == ‘unit-price’ -%}
{{ _price }}
{%- elsif template == ‘unit-measurement’ -%}
{%- if value != blank -%}{{- value -}}{%- endif -%}
{%- elsif template == ‘price-ui’ -%}
{%- if price != blank -%}{{- price -}}{%- endif -%}
{%- if compare_at_price != false -%}{%- if compare_at_price != blank -%}{{- compare_at_price -}}{%- endif -%}{%- endif -%}
{%- if unit_pricing != false -%}{%- if unit_pricing != blank -%}{{- unit_pricing -}}{%- endif -%}{%- endif -%}
{%- elsif template == ‘price-ui-badge’ -%}

{%- if badge != blank -%}{{- badge -}}{%- endif -%}
{%- endif -%} {%- endcapture -%} {{- output -}}

Can you help?

Replace this piece of the code in the first part of code you shared with this:

{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{%- endcapture -%}

{%-
render 'price-ui-templates',
template: 'price-ui-badge',
badge: saved_amount ,
-%}

Let’s see if this work!

Which part to replace? I tried and it didn’t work

Which part to replace? I tried and it didn’t work

Hi, can you please help me?