Solved

How to change sale badge in Simple theme

Robbie_archive
Excursionist
15 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)

JHKCreate
Shopify Expert
3571 639 916

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

View solution in original post

Replies 5 (5)

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

JHKCreate
Shopify Expert
3571 639 916

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
Robbie_archive
Excursionist
15 1 4

Thanks so much, this worked perfectly

Thenicholecolle
Excursionist
12 0 1

I tried to do make my "Sale" button to say "New Markdown" and did what you said to do, but it didn't work. I'm using Craft Theme 9.0. Can you help?

Ollie
Shopify Staff
2282 453 395

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