How to alter sale badge shape and remove it in Impulse Theme?

[davidfoster1983]

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.

Thanks!  

[g33kgirl · 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;
}

[Moeed]

Hey @davidfoster1983 

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

Best Regards,
Moeed

[davidfoster1983]

Hi Moeed,

It is https://carolinegardner.com/ 

[g33kgirl · 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;
}

[davidfoster1983]

Thanks G33kgirl,

Do you have any suggestions for making the badge round? 

[g33kgirl · 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;
}

[Nis007]

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??