Custom CSS Issue for Changing Sale Circle to Percentage in minimal theme

Solved
Highlighted
Tourist
20 0 2

Hello!

 

I have been trying to make a change in the minimal theme but without success. I need to change the sale circle text (minimal theme), which currently looks like the image below, to show instead: percentage + "OFF"  

Screen Shot 2019-02-15 at 1.33.41 AM.png

 

I tried to do exactly as instructed in the following Shopify Discussion but I was not able to get the results I wanted. 

 

Here is the code I have from line 29 to 31 of my product-grid-item.liquid

{% if product.compare_at_price_max > product.price %}- {{ 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 %}
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
  </span>

Here is the code I added at the bottom of my theme.scss.liquid

.badge {
    font-size: 0.9em;
    padding-top: 10px;
    color: white;
    background-color: #C0B283;
}

Here is what the result is:

2.png

 

I want to keep the #C0B283 background color as well as the white text color, and remove the "SALE" text and have the percentage + "OFF" displayed in the middle of the sale circle with the percentage on top and the "OFF" below, just as the example below:

 

25%

OFF

 

Would anyone be able to help here? If so, I would really really appreciate it.

Thanks in advance,

 

l_groux

0 Likes
Highlighted
Shopify Partner
1839 176 680

Could you share a link to your store - much easier to do this with some actual code than without.

 

Thanks!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
20 0 2

Sure sorry, here it is

0 Likes
Highlighted
Trailblazer
174 24 35

Sorry, i don't find any text issues in your site, i have added the text its look like this, please see screenshot.

 

Thanks,

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
Highlighted
Tourist
20 0 2

How is it possible that it looks different if the code is the same? I might have missed something.

Could you please walk me through the exact steps?

 

Thanks

0 Likes
Highlighted
Trailblazer
174 24 35

In this time don't show any discount in you site ,First you add your discount code then i will give you any suggestion for your issues. Because i don't see any issues or if you have already add discount send me the url.

Thanks


@l_groux wrote:

How is it possible that it looks different if the code is the same? I might have missed something.

Could you please walk me through the exact steps?

 

Thanks


 

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
Highlighted
Tourist
20 0 2

I removed the sale circle and I added the discount code, here is the link 

0 Likes
Highlighted
Trailblazer
174 24 35

This is an accepted solution.

Replace all div with this code in 'product-grid-item.liquid' line no- 28.

 

<span class="badge badge--sale">

{% if product.compare_at_price_max > product.price %}{% endif %}
<span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">- {{ 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>

 

Thanks

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
1 Like
Highlighted
Tourist
20 0 2

That worked amazing. Thank you very much for your time and patience, I really appreciate it :)

 

 

0 Likes
Highlighted
New Member
1 0 0

I don't think this works anymore... I just can't get it to change the badge at all... what am i missing?

0 Likes