Solved

Change Sale Badge - Impulse Theme

davidfoster1983
Shopify Partner
22 0 2

Hi all. 

 

2 questions here:

 

     1. How do I change my sale badge shape to round? they are currently oval and would prefer round. 

 

     2. How do I remove sale badges altogether? Was thinking of trialling sale prices for a temporary promotion instead of an input code so would want PLP to show strikethrough price but not the sale badge.

 

davidfoster1983_0-1699441699876.png

Thanks!  

Accepted Solutions (2)

g33kgirl
Shopify Partner
390 109 143

This is an accepted solution.

Hi David,

 

If this has not yet been resolved, you can add this piece of code at the bottom of your CSS file to hide the sale badge:

 

.grid-product__tag--sale {
    display: none !important;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

g33kgirl
Shopify Partner
390 109 143

This is an accepted solution.

Yes sure, add this code to make the circle round:

 

.grid-product__tag--sale {
    width: 50px;
    height: 50px;
    shape-outside: circle();
    clip-path: circle();
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
3695 932 1165

Hey @davidfoster1983 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
davidfoster1983
Shopify Partner
22 0 2

Hi Moeed,

 

It is https://carolinegardner.com/ 

g33kgirl
Shopify Partner
390 109 143

This is an accepted solution.

Hi David,

 

If this has not yet been resolved, you can add this piece of code at the bottom of your CSS file to hide the sale badge:

 

.grid-product__tag--sale {
    display: none !important;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
davidfoster1983
Shopify Partner
22 0 2

Thanks G33kgirl,

 

Do you have any suggestions for making the badge round? 

g33kgirl
Shopify Partner
390 109 143

This is an accepted solution.

Yes sure, add this code to make the circle round:

 

.grid-product__tag--sale {
    width: 50px;
    height: 50px;
    shape-outside: circle();
    clip-path: circle();
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Nis007
New Member
4 0 0

Hi guys, I'm trying to make the product sale tag with the background color #ffb7cd

I've changed the code on the theme.css.liquid file:

--colorSaleTag:{{ settings.color_sale_tag | default: "#ffb7cd" }};

 

 

And in the other section I've also changed the code to the same color:

.grid-product__tag--sale{
background-color:{{ settings.color_sale_tag | default: "#ffb7cd" }};
background-color:var(--colorSaleTag);
color:{{ settings.color_sale_tag_text | default: "#ffffff" }};
color:var(--colorSaleTagText);
}

I didnt add any new sections to the code but rather changed it and saved, but no changes show on the preview. 

What am i doing wrong??