How to change sale badge in Simple theme

[Robbie_archive]

Hey, currently I'm trying to change the size of the Sale badge on my products in the collection grid. Currently, it's a circle, but I want to change it to a rectangle like in the following pictures. I tried changing the code in icon-saletag.liquid, but that didn't change anything.

[dmwwebartisan]

@Robbie_archive 

Please share store URL !

Thanks!

[JHKCreate · Accepted solution]

Hi @Robbie_archive !

Let's try the below:

In theme.liquid.css:

-Delete border-radius to remove the round edges as follows & modify the width and height values to turn the shape into a rectangle

.badge {
position: absolute;
line-height: 1.1;

span {
height: 25px;
width: 105px;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 3px;
font-size: 13px;
color: $color-btn-primary-text;
}
}

In Theme settings go to colors, there you can modify the color for Sale tags.

To change the text for "Sale", go to Online Store -> Themes -> Actions -> Edit Languages -> Products, and change the "On sale" text.

Let me know if that works for you!

[Ollie]

Hey @Robbie_archive.

Thanks for reaching out.

Did you attempt to make the coding changes that @JHKCreate has advised above, by any chance? If this worked, make sure to mark their post as an accepted solution.

Alternatively, since the Simple theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team to make the corresponding changes on your behalf.

If you are interested in using the design time to make this change, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the changes you would like to see on your online store with a Support Advisor.

Let me know if you have any questions.

[Robbie_archive]

Thanks so much, this worked perfectly