Shopify themes, liquid, logos, and UX
How can I change the appearance of sold out products in the collection / home page from the small badge on the top corner as you can see in the attached image?
My website URL is twistedfriends.com
Solved! Go to the solution
This is an accepted solution.
hello @rodriiiv1
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-index .ProductItem__LabelList {
position: absolute;
left: 50% !important;
top: 50% !important;
text-align: left;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.
.template-index .ProductItem__LabelList {
position: absolute;
top: 50% !important;
text-align: center;
left: 38% !important;
}
Thanks!
Hii, @rodriiiv1
Paste this code on top of the theme.scss file.
.ProductItem__LabelList {
position: absolute;
left: 35% !important;
top: 40% !important;
text-align: left;
}
Thank You.
This is an accepted solution.
hello @rodriiiv1
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-index .ProductItem__LabelList {
position: absolute;
left: 50% !important;
top: 50% !important;
text-align: left;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Thank you very much!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024