" SALE " label instead of " 40% off" label in Ride theme

Store Design
, , , , ,
1

Hi! When I enter on my home page to products says" SALE " and I want to be the percentage off. For example:

Compared price = 30 USD

Price = 18 USD

ON the product in the page I want to say " 40% off "

I know that I need to modify a code but I don’t know which one

Please help me.

2

Hi @THEREALWORLD ,

Please follow the steps below:

  • Online store => Themes => Edit code

  • Find the file price.liquid

  • Find the code

    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

Replace with the following code => Save:

       {%- if product.price < product.compare_at_price -%}
      {%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
      <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">{{ savings }} OFF</span>
	{% else %}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>
    {%- endif -%}

Result after replacing at Product Page:

![view (39).png|1674x755](upload://3lkO4wMKCbYPV4R8dEVbkFtqkPe.jpeg)

  • Find the file card-product.liquid

  • Find the code

        {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}

Replace with the following code => Save:

 {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {%- if card_product.price < card_product.compare_at_price -%}
      {%- assign savings = card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round | append: '%' -%}
{{ savings }} OFF
	{% else %}

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

    {%- endif -%}

Result after replacing at Collection Page:

![view (40).png|1891x900](upload://iOvq6ziXZqygtV2ztcFcMOwQnRV.jpeg)

Good luck!