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

Solved
Highlighted
Tourist
20 0 1

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
Shopify Partner
1843 171 543

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

 

Thanks!

I turn coffee in to code - since 1998
0 Likes
Tourist
20 0 1

Sure sorry, here it is

0 Likes
Pathfinder
114 14 24

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
Tourist
20 0 1

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
Pathfinder
114 14 24

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
Tourist
20 0 1

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

0 Likes

Success.

Pathfinder
114 14 24

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
Tourist
20 0 1

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

 

 

0 Likes