Solved

How do i add a sale tag to my product pages instead of the "Sale" badge?

Simon159
Explorer
109 0 21
Accepted Solution (1)

Rishihuptech
Shopify Partner
351 63 68

This is an accepted solution.

Hi @Simon159 
To show the percentage discount instead of the sale badge follow the below steps

- Edit the live theme and find price.liquid edit it and find this line {%- if show_badges -%} & update it with below code

From 

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

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

to

{%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
    <svg aria-hidden="true" focusable="false" class="icon icon-discount color-foreground-text" viewBox="0 0 12 12">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 0h3a2 2 0 012 2v3a1 1 0 01-.3.7l-6 6a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4l6-6A1 1 0 017 0zm2 2a1 1 0 102 0 1 1 0 00-2 0z" fill="currentColor">
</path></svg>  
    {{ 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'}}% OFF
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

And add below CSS code to component-price.css

.price__badge-sale svg {
    height: 10px;
}
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Reply 1 (1)

Rishihuptech
Shopify Partner
351 63 68

This is an accepted solution.

Hi @Simon159 
To show the percentage discount instead of the sale badge follow the below steps

- Edit the live theme and find price.liquid edit it and find this line {%- if show_badges -%} & update it with below code

From 

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

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

to

{%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
    <svg aria-hidden="true" focusable="false" class="icon icon-discount color-foreground-text" viewBox="0 0 12 12">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 0h3a2 2 0 012 2v3a1 1 0 01-.3.7l-6 6a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4l6-6A1 1 0 017 0zm2 2a1 1 0 102 0 1 1 0 00-2 0z" fill="currentColor">
</path></svg>  
    {{ 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'}}% OFF
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

And add below CSS code to component-price.css

.price__badge-sale svg {
    height: 10px;
}
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required