Hey There,
I am using the Turbo theme from Out of the Sandbox and recently updated to Shopify 2.0 / Turbo Version 7. Previously it was very simple to display the percentage saved in the SALE BADGE which appears in collections and on the product page to instead show the percentage saved “SAVE 15%” instead of just “SALE”. Here is a guide from the Out of the Sandbox forums… https://help.outofthesandbox.com/hc/en-us/community/posts/360037155014-Adding-a-percentage-in-the-sale-banner-
Since the upgrade to Shopify 2.0 this method no longer seems valid and I can’t find where to modify this. Does anyone know where these badges can modified in the new site setup?
Hey
The logic should be the same and the file should be in the Edit Code you just have to find ‘product-details.liquid’ and add the code mentioned on the post:
{% assign savings = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'| plus: 0 %}
{% if savings > 0 %}
Save {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
{% endif %}
What’s stopping you from adding the code to the theme files?
We updated our theme to Turbo 7.0 and it is Shopify 2.0 and the product-details.liquid doesn’t house that code anymore, i have been trying to find the equivalent section to include this snippet, but i just can’t figure it out, or perhaps it no longer works. I have reached out to theme support, but I was hoping to have this figured out before Black Friday.
If i inspect the element, it points me to price-ui-badges.liquid, where there is this bit of code, but i can’t figure out how to modify it to show this.
{% 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 -%}
Hi @PJ_Robertson1 ,
You found the right file, now just find ‘{{locale_badge_on_sale}}’ or ‘{{ locale_badge_on_sale }}’ and change code:
{% assign savings = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'| plus: 0 %}
{% if savings > 0 %}
{{ locale_badge_on_sale }} {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
{% endif %}
Hope it helps!
1 Like
Thank you so much, i have tried inserting this snippet into that file, but it breaks the collection layout each time, I can’t find that exact piece of code in the file, the full code of the ui-badges looks like this. I really appreciate your help on this, the theme company have a five day wait for support. I have tried replacing line 5 and also lower down where it has the compare at price rule, but it completely breaks the collection page
{% if settings.sale_banner_enabled %}
{% comment %}Inject /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 -%}
{% 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 /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 %}
Hi @PJ_Robertson1 ,
Please change code:
{% 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 -%}
{% if product.available == false %}
{%-
render 'price-ui-templates',
template: 'price-ui-badge',
badge: locale_badge_sold_out,
-%}
{%- elsif product.compare_at_price > product.price -%}
{%- capture locale_badge_sold_out -%}{{ 'product.badge.sold_out' | t }} {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{%- endcapture -%}
{%-
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 %}
Hope it helps!
thanks so much, i tried replacing all the code with what you supplied, but it renders the page as in the example below, so just a tiny red square with no text.
I also found mention of the badge on the product-info.liquid, the code here looks like this, perhaps it requires modifying both these areas.
{% assign variant = product.selected_or_first_available_variant %}
{{ product.title }}
{% if settings.display_vendor %}
{{ product.vendor }}
{% endif %}
{% if settings.enable_shopify_collection_badges %}
{% endif %}
{% if collection_handles contains 'coming-soon' %}
{{ 'collections.general.coming_soon' | t }}
{% else %}
{% if settings.quick_shop_enabled and settings.quick_shop_style == 'inline' %}
{% comment %}Inject /shopify-price-ui/price-ui begin{% endcomment %}
{% assign compare_at_price = false %}
{% if product.compare_at_price and product.compare_at_price != product.price %}
{% if product.compare_at_price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.compare_at_price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.compare_at_price_max,
-%}
{%- endcapture -%}
{%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture compare_at_price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.compare_at_price,
-%}
{%- endcapture -%}
{% endif %}
{% endif %}
{% if product.price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.price_max,
-%}
{%- endcapture -%}
{%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.price,
-%}
{%- endcapture -%}
{% endif %}
{%-
render 'price-ui-templates',
template: 'price-ui',
compare_at_price: compare_at_price,
price: price,
unit_pricing: false,
-%}
{% comment %}Inject /shopify-price-ui/price-ui end{% endcomment %}
{% else %}
{% unless product.available == false and settings.display_price == false %}
{% if product.price_varies %}
<small>*{{ 'products.general.from' | t }}*</small>
{% endif %}
{% if product.price_min > 0 %}
{% render 'price-element', price: product.price_min %}
{% else %}
{% if settings.free_price_text != blank %}
{{ settings.free_price_text }}
{% else %}
{% render 'price-element', price: product.price_min %}
{% endif %}
{% endif %}
{% if product.price < product.compare_at_price %}
{% render 'price-element', price: product.compare_at_price %}
{% endif %}
{% endunless %}
{% unless product.available %}
{{ settings.sold_out_text }}
{% endunless %}
{% endif %}
{% endif %}
{% if settings.quick_shop_enabled and settings.quick_shop_style == 'popup' %}
{%
render 'unit-price',
item: variant,
variant: product,
product: product,
class: 'product-details__unit-price'
%}
{% endif %}
Or perhaps editing something on the price-ui-templates.liquid.
I really appreciate you taking the time to help me here.
Hi @PJ_Robertson1 ,
You can send me staff account or collaborator request. I will check it.
Or please change code price-ui-badges.liquid file:
{% 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 -%}
{% if product.available == false %}
{%-
render 'price-ui-templates',
template: 'price-ui-badge',
badge: locale_badge_sold_out,
-%}
{%- elsif product.compare_at_price > product.price -%}
{%- capture locale_badge_sold_out -%}{{ 'product.badge.sale' | t }} {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%{%- endcapture -%}
{%-
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 %}
Hope it helps!
Hi @PJ_Robertson1 , did you get a fix for this? To show your % disc without the boxes shrinking?
Any clarification on this?
I have had success with this but the %XX displaying on the badge isn’t correct if variants have different % discounts?
{% if settings.sale_banner_enabled %}
{% comment %}Inject /shopify-price-ui/price-ui-badge begin{% endcomment %}
{%- assign locale_badge_sold_out = 'product.badge.sold_out' | t -%}
{% if product.available == false %}
{%-
render 'price-ui-templates',
template: 'price-ui-badge',
badge: locale_badge_sold_out,
-%}
{%- elsif product.compare_at_price > product.price -%}
{%- capture locale_badge_on_sale -%} SAVE {{ product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{%- endcapture -%}
{%-
render 'price-ui-templates',
template: 'price-ui-badge',
badge: locale_badge_on_sale,
-%}
{%- endif -%}
{% comment %}Inject /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 %}
