Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I would like to have the sold out button on my images to just say "sold" and have it moved to the bottom left corner of the image (flush on the left and bottom side). Is there code that I can put in to make this change?
Also, I would like to change the color of the sold button to be: #576166
My site with this theme is not published yet but here is a preview link:
https://xgz0jtxplxt5cnn0-57200312371.shopifypreview.com
Solved! Go to the solution
This is an accepted solution.
Hi @awirtz, Pls try with this code:
<script>
let sold_outs = document.querySelectorAll(".product__badge.product__badge--sold");
if(sold_outs.length > 0) {
sold_outs.forEach((item) => {
item.innerText = "Sold";
});
}
</script>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @awirtz,
You can try this code by following these steps:
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file -> Save
.product__badge.product__badge--sold {
top: unset !important;
bottom: 10px !important;
left: 10px !important;
right: unset !important;
}
Step 4: Search theme.liquid. After you insert my code inside it
<script>
let sold_outs = document.querySelectorAll(".product__badge.product__badge--sold");
if(sold_outs.length > 0) {
sold_outs.forEach((item) => {
sold_outs[i].innerText = "Sold";
});
}
</script>
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hello,
Thank you for the quick response. The first bit of code worked to move the sold button to the bottom left corner. The second bit of code did not work to get it to just say "sold" instead of "sold out".
I added the code to line 217 on the theme.liquid
Hi @awirtz, Oh sorry, pls add my code second before close body tags
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Thanks again for the help but this didn't work either. See the screen shot for where I put in the code.
This is an accepted solution.
Hi @awirtz, Pls try with this code:
<script>
let sold_outs = document.querySelectorAll(".product__badge.product__badge--sold");
if(sold_outs.length > 0) {
sold_outs.forEach((item) => {
item.innerText = "Sold";
});
}
</script>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
That worked! Thank you very much.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024