How to change sale badge in Simple theme

Solved
Robbie_archive
Excursionist
14 1 4

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.

badge.PNG

Skærmbillede 2021-11-22 kl. 19.41.25.png

Accepted Solution (1)

Accepted Solutions
JHKCreate
Shopify Partner
2921 504 723

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

Replies 4 (4)
dmwwebartisan
Shopify Partner
9829 2237 3078

@Robbie_archive 

Please share store URL !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
JHKCreate
Shopify Partner
2921 504 723

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

Ollie
Shopify Staff
422 47 73

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.

 

23-49-8266-15324

 

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.

 

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Robbie_archive
Excursionist
14 1 4

Thanks so much, this worked perfectly