Customize badge sale icon with an condition

Highlighted
New Member
1 0 0

Hi,

Situation :

My product1 is regular price is 30.00$ but my price is 20.00$ so the rebate is almost 33% of rebate. but I do not want the sale icon is displayed. I only want the badge sale icon activated if my rebate is more than 50%.

An example :

Product 1 regular price is 30.00$ but my sale price is 20.00$ so no badge sale icon

Product 2 regular price is 30.00$ but my sale price is 12.00$ so Yes badge sale icon activated.

 

Thank you for your help

0 Likes
Highlighted
Shopify Expert
2684 67 778

Hi Simon.

You did not indicate what theme you're using, so I'll use Brooklyn for example. The code you'd want to change is in the product-grid-item.liquid snippet:

{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

That shoud be changed like this

{% 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 > 50 %}
        {% assign on_sale = true %}
    {$ endif %}
{% endif %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
1 0 0

Hey Tim, 

I was wondering if you happened to know how to change the shape/position of the "save" icons on the product images. I'll attach a screen shot of what i'm talking about.

I'm currently using the Brooklyn theme. Would like them to just say "sale" in a solid color circle, or just remove it all together and have the sale price next to the regular price that is crossed out. Hope this makes sense.

Thanks Tim

0 Likes
Highlighted
Shopify Expert
2684 67 778

Hi Colin, have a look at this topic.

To show only sale you can change this in your product-grid-item.liquid

<div class="grid-product__on-sale">
  {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
  <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>

To this

<div class="grid-product__on-sale">
  Sale!

Or do you want to show both prices like Debut theme does? 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
10 0 1

How to add RETAIL PRICE beside SALE PRICE in Brooklyn theme

 

similar to this website

 

https://kestinhare.com/collections/jackets

0 Likes
Highlighted
Shopify Expert
2684 67 778

Hi Mohammed,

open your product-grid-item.liquid Snippet, find this code around line 66

  {% else %}
    {{ product.price | money_without_trailing_zeros }}
  {% endif %}

and paste this right below

  {% if product.price < product.compare_at_price %}
    <strike>{{ product.compare_at_price| money_without_trailing_zeros |strip }}</strike>
  {% endif %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
2 Likes
Highlighted
Shopify Partner
6 0 0

Hi Simon,

I'm Dror and I created Instabadge - https://apps.shopify.com/instabadges.

It's a shopify app that lets you apply badges based on different conditions.

Also per Colin's request you can customize the badges' display, including their position, size and color.

I hope you find the app useful.

Dror

0 Likes
Highlighted
New Member
11 0 0

Hi Tim,

It worked like magic for me! (displaying both, retail and wholesale price). Thank you so much!

I'm wondering if possible to switch sale and original price (to display original price first) and have them displayed under a product name, like in the link below:

https://www.kendrascott.com/sales/

Also, to have the extra description "More color options" under product name if a product has more than one color option.

Thank you!

Vira

 

0 Likes
Highlighted
Shopify Partner
89 0 4

yes it possible to do bit of coding on product grid iteam liquid of your liquid file 

0 Likes
Highlighted
Shopify Expert
2684 67 778

Hi Vira, 

If you're only looking to add a line of text, then you may check my answer in this thread

If you're looking to add color swatches (like your example site), then you may start with the code I suggested in this thread

Nilesh, can you explain what is the value of your post? Otherwise I'd suggest you stop spamming in the forum.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes