Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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!
Please share store URL !
Thanks!
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!
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.
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
Thanks so much, this worked perfectly
User | RANK |
---|---|
241 | |
162 | |
61 | |
55 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023