Showing Percentage Saved in Sale badge Turbo Theme

PJ_Robertson1
Shopify Partner
23 0 6

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-sa...

 

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?

Replies 11 (11)

DMT-Andre
Shopify Partner
20 4 21

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

<div class="sale_banner">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'}}%</div>

{% endif %}

 

What's stopping you from adding the code to the theme files?

Need expert help with your Shopify Website? Message me or contact the team.
PJ_Robertson1
Shopify Partner
23 0 6

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 %}
<div class="price-ui-badges price-ui-badges--{{ settings.sticker_style }}">
{% 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 -%}

 

 

LitCommerce
Astronaut
2860 684 732

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'}}%</div>
{% endif %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
PJ_Robertson1
Shopify Partner
23 0 6

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 %}
  <div class="price-ui-badges price-ui-badges--{{ settings.sticker_style }}">
      {% 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 -%}
      
      <div class="price-ui-badge price-ui-badge--loading" data-price-ui-badge>
        <noscript>
          <style>
            .price-ui-badge--loading {
              display: block !important;
              opacity: 1 !important;
            }
          </style>
        </noscript>
      
        {% 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 -%}
      </div>
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge end{% endcomment %}


    {% if collection_handles contains 'new' %}
      <div class="price-ui-badge price-ui-badge--new">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--new">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--new">{{ 'collections.general.new' | t }}</span>
        </div>
      </div>
    {% endif %}

    {% if collection_handles contains 'pre-order' %}
      <div class="price-ui-badge price-ui-badge--pre-order">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--pre-order">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--pre-order">{{ 'collections.general.pre_order' | t }}</span>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}

 

LitCommerce
Astronaut
2860 684 732

Hi @PJ_Robertson1,

Please change code:

{% if settings.sale_banner_enabled %}
  <div class="price-ui-badges price-ui-badges--{{ settings.sticker_style }}">
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge begin{% endcomment %}
      {%- assign locale_badge_sold_out = 'product.badge.sold_out' | t -%}
      <div class="price-ui-badge price-ui-badge--loading" data-price-ui-badge>
        <noscript>
          <style>
            .price-ui-badge--loading {
              display: block !important;
              opacity: 1 !important;
            }
          </style>
        </noscript>
      
        {% 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 -%}
      </div>
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge end{% endcomment %}


    {% if collection_handles contains 'new' %}
      <div class="price-ui-badge price-ui-badge--new">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--new">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--new">{{ 'collections.general.new' | t }}</span>
        </div>
      </div>
    {% endif %}

    {% if collection_handles contains 'pre-order' %}
      <div class="price-ui-badge price-ui-badge--pre-order">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--pre-order">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--pre-order">{{ 'collections.general.pre_order' | t }}</span>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
PJ_Robertson1
Shopify Partner
23 0 6

 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.

 

chrome_xoU32DC9fE.png

PJ_Robertson1
Shopify Partner
23 0 6

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

<div class="product-details">
  <span class="title" itemprop="name">{{ product.title }}</span>
  {% if settings.display_vendor %}
    <span class="brand">
      {{ product.vendor }}
    </span>
  {% endif %}
  {% if settings.enable_shopify_collection_badges %}
    <div class="shopify-reviews">
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    </div>
  {% endif %}
  {% if collection_handles contains 'coming-soon' %}
    <span class="coming-soon">{{ 'collections.general.coming_soon' | t }}</span>
  {% else %}
    {% if settings.quick_shop_enabled and settings.quick_shop_style == 'inline' %}
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
      <div class="price-ui price-ui--loading" data-price-ui>
        <noscript>
          <style>
            .price-ui--loading {
              display: block !important;
              opacity: 1 !important;
            }
          </style>
        </noscript>
        {% 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,
        -%}
      </div>
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}

    {% else %}
      <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
        {% unless product.available == false and settings.display_price == false %}
          <span class="current_price">
            {% if product.price_varies %}
              <small class="from"><em>{{ 'products.general.from' | t }}</em></small>
            {% endif %}
            {% if product.price_min > 0 %}
              <span class="money">{% render 'price-element', price: product.price_min %}</span>
            {% else %}
              {% if settings.free_price_text != blank %}
                <span class="free">{{ settings.free_price_text }}</span>
              {% else %}
                <span class="money">{% render 'price-element', price: product.price_min %}</span>
              {% endif %}
            {% endif %}
          </span>
          <span class="was_price">
            {% if product.price < product.compare_at_price %}
              <span class="money">{% render 'price-element', price: product.compare_at_price %}</span>
            {% endif %}
          </span>
        {% endunless %}
        <div class="sold_out">
          {% unless product.available %}
            {{ settings.sold_out_text }}
          {% endunless %}
        </div>
      </span>
    {% 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 %}
</div>

Or perhaps editing something on the  price-ui-templates.liquid.

I really appreciate you taking the time to help me here.

LitCommerce
Astronaut
2860 684 732

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 %}
  <div class="price-ui-badges price-ui-badges--{{ settings.sticker_style }}">
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge begin{% endcomment %}
      {%- assign locale_badge_sold_out = 'product.badge.sold_out' | t -%}
      <div class="price-ui-badge price-ui-badge--loading" data-price-ui-badge>
        <noscript>
          <style>
            .price-ui-badge--loading {
              display: block !important;
              opacity: 1 !important;
            }
          </style>
        </noscript>
      
        {% 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 -%}
      </div>
      {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge end{% endcomment %}


    {% if collection_handles contains 'new' %}
      <div class="price-ui-badge price-ui-badge--new">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--new">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--new">{{ 'collections.general.new' | t }}</span>
        </div>
      </div>
    {% endif %}

    {% if collection_handles contains 'pre-order' %}
      <div class="price-ui-badge price-ui-badge--pre-order">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--pre-order">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--pre-order">{{ 'collections.general.pre_order' | t }}</span>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
addicttackle
Tourist
7 0 4

Any clarification on this?

addicttackle
Tourist
7 0 4

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 %}
  <div class="price-ui-badges price-ui-badges--{{ settings.sticker_style }}">
    {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge begin{% endcomment %}
    {%- assign locale_badge_sold_out = 'product.badge.sold_out' | t -%}
    <div class="price-ui-badge price-ui-badge--loading" data-price-ui-badge>
      <noscript>
        <style>
          .price-ui-badge--loading {
            display: block !important;
            opacity: 1 !important;
          }
        </style>
      </noscript>
    
      {% 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 -%}
    </div>
    {% comment %}Inject @pixelunion/shopify-price-ui/price-ui-badge end{% endcomment %}


    {% if collection_handles contains 'new' %}
      <div class="price-ui-badge price-ui-badge--new">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--new">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--new">{{ 'collections.general.new' | t }}</span>
        </div>
      </div>
    {% endif %}

    {% if collection_handles contains 'pre-order' %}
      <div class="price-ui-badge price-ui-badge--pre-order">
        <div class="price-ui-badge__sticker price-ui-badge__sticker--pre-order">
          <span class="price-ui-badge__sticker-text price-ui-badge__sticker-text--pre-order">{{ 'collections.general.pre_order' | t }}</span>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}

SaltFlats
Tourist
3 0 11

Hi @PJ_Robertson1 , did you get a fix for this? To show your % disc without the boxes shrinking?