Display percentage off instead of sale badge [ District Theme ]

Tourist
11 0 0

I wanted to change my "sale" badge into "percentage" badge on my shopify store.

I use the district theme, here is the on_sale code on product-grid-item.liquid

Anyones can help me? Thanks a lot.

{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
{%- elsif on_sale -%}
{% if product.compare_at_price > product.price %}
{% assign discount_percentage = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round %}
{% if discount_percentage > 10 %}
{% assign on_sale = true %}
{$ endif %}
{% endif %}
{{ 'products.product.on_sale' | t }}
{%- endif -%}

 

0 Likes
Shopify Partner
436 83 95

Hello 


Here is code which you can use to display sale badge (percentage)

{% if product.compare_at_price_max > product.price %}You Save {{ 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 %}


Thanks 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Tourist
11 0 0

Hello 

 

 

product-grid-item code:

{%- comment -%}
  Check if the product is on sale and set a variable to be used below.
{%- endcomment -%}
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
 {% assign discount_percentage = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round %}
    {% if discount_percentage > 10 %}
        {% assign on_sale = true %}
    {$ endif %}
{% endif %} {%- endif -%}

{%- comment -%}
  Check if the product is sold out and set a variable to be used below.
{%- endcomment -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
  {%- assign sold_out = false -%}
{%- endif -%}

<div class="box product">
  {%- comment -%}
    Link to your product with the 'within: collection' filter for the link to be aware of the collection.
    This allows you to create collection-based navigation on the product page.

    Results of using 'within: collection':
    - Instead of a URL with /products/product-handle
      you would get /collections/collection-handle/products/product-handle

    For more info on navigation within a collection
      - http://docs.shopify.com/support/your-store/collections/how-to-navigate-within-a-collection

  {%- endcomment -%}
  {% capture img_id %}ProductGridImage-{{ section.id }}-{{ collection.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductGridImageWrapper-{{ section.id }}-{{ collection.id }}-{{ product.id }}{% endcapture %}
  {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  {%- comment %}
  	Auto-crop
    - Square
    --- set padding-top to 100%
    --- absolute top to 50% and transform translateY to -50%
  {% endcomment -%}
  <figure class="product-grid-item--{{ settings.collections_text_alignment }}">
    <a id="{{ wrapper_id }}" href="{{ product.url | within: collection }}" class="product_card">
      {%- assign image = product.featured_image -%}
      <div class="product_card__image-wrapper" data-bgset="{% include 'bgset', image: image %}">
        {% assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' %}
        {% include 'theme-rias' %}
        <img id="{{ img_id }}" class="product_card__image lazyload {% if settings.variant_rollover == true and product.images.size > 1 %}featured{% endif %}"
          src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
          data-src="{{ image_url_pattern }}"
          data-widths="[{{ image_widths }}]"
          data-aspectratio="{{ image.aspect_ratio }}"
          data-sizes="auto"
          data-expand="600"
          data-fallback="{{ image | img_url: '295x' }}"
          alt="{{ product.featured_image.alt | escape }}">
        <noscript>
          <img class="product_card__image" src="{{ image | img_url: '394x' }}" alt="{{ product.featured_image.alt | escape }}">
        </noscript>
        {%- assign collection_single_column_auto = false -%}
        {%- if settings.collections_product_columns == '1' and settings.collections_product_ratio == 'auto' -%}
          {%- assign collection_single_column_auto = true -%}
        {%- endif -%}
        {%- if settings.collections_product_ratio == 'false' or collection_single_column_auto -%}
          <style media="screen">
            {%- assign padding = 1 | divided_by: image.aspect_ratio | times: 100 | append: '%' -%}
            #{{ wrapper_id }} .product_card__image-wrapper:before { padding-bottom: {{ padding }}; }
          </style>
        {%- endif -%}
        {%- if settings.variant_rollover == true and product.images.size > 1 -%}
          {%- assign image = product.images[1] -%}
          {%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}
          {% include 'theme-rias' %}
          <img id="{{ img_id }}" class="product_card__image alt lazyload"
            data-src="{{ image_url_pattern }}"
            data-widths="[{{ image_widths }}]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-expand="600"
            alt="{{ product.featured_image.alt | escape }}">
        {%- endif -%}
        {%- if sold_out -%}
          <span class="label sold-out label--{{ settings.collections_badge_placement }} {%- if settings.collections_badge_soldout -%}label--image{%- endif -%}">
            {%- if settings.collections_badge_soldout -%}
              {%- assign image = settings.collections_badge_soldout -%}
              {%- assign image_widths = '50,100' -%}
              {% include 'theme-rias' %}
              <img class="lazyload"
                src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                data-src="{{ image_url_pattern }}"
                data-widths="[{{ image_widths }}]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                data-expand="600"
                alt="{{ image.alt | escape }}">
           {%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
{%- elsif on_sale -%}
{% if product.compare_at_price > product.price %}
{% assign discount_percentage = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round %}
{% if discount_percentage > 10 %}
{% assign on_sale = true %}
{$ endif %}
{% endif %}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
          </span>
        {%- endif -%}
      </div>
    </a>
    <figcaption>
      <div class="product-title">
        <a href="{{ product.url | within: collection }}" class="title">{{ product.title }}</a>
        {% if settings.show_vendors %}
          <span class="vendor">{{ product.vendor | link_to_vendor }}</span>
        {% endif %}
      </div>
      
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
<span class="price">       
  
{% if on_sale %}         
  {% if product.price_varies %}           
  <span class="from">{{ 'products.general.from' | t }}</span>           <span class="money">{{ product.price | money }}</span>           <span class="original-price money">{{ product.compare_at_price | money }}</span>         {% else %}           <span class="money">{{ product.price | money }}</span>           <span class="original-price money">{{ product.compare_at_price | money }}</span>         {% endif %}       {% else %}         {% if product.price_varies %}<span class="from">{{ 'products.general.from' | t }}</span>{% endif %}     <span class="money">{{ product.price | money }}</span>       {% endif %}       </span>
    </figcaption>

    {%- if settings.collection_swatches -%}
      {% include 'product-grid-item-swatches' %}
    {%- endif -%}
    
  </figure>
</div>
{%- if settings.collections_product_ratio == 'auto' and related_products_section != true -%}
  {% include 'product-grid-item-auto-ratio' %}
{%- endif -%}
0 Likes