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

Store Design
, ,
1

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
davidfoster1983_0-1699441699876.png279×347 33.4 KB

Thanks!

2

Hey @davidfoster1983

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

Best Regards,
Moeed

3

Hi Moeed,

It is https://carolinegardner.com/

4

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;
}
5

Thanks G33kgirl,

Do you have any suggestions for making the badge round?

6

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;
}
7

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