Sold Out image overlay for Simple theme?

Highlighted
Tourist
9 0 4

Hi!

I'm new to Shopify and working with the simple theme.  I'd like for products to have an overlay on the image when looking through collections, so it's clear visually that an item is sold out.  I find the built in "sold out" text by the product name to not be obvious enough.

 

I've found some posts on the topic but they're from years ago and I suspect things may have changed.

 

Any help would be appreciated!

0 Likes
Highlighted
Shopify Partner
397 28 61
Hello there,

I haven’t verified in our demo store but it seems an image overlay was added to Simple theme, but then maybe removed. Here is a link please scroll to the code which shows the changes to get the image overlay.

https://community.shopify.com/c/Shopify-Design/Indicating-quot-Sold-Out-quot-in-Simple-Theme/td-p/13...

Regards,

Sam
Custom Apps and Theme Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Hosted solutions | Lifetime support
0 Likes
Highlighted
Tourist
9 0 4

Hey Sam,

 

I did see that post and had tried to implement that code in both those files.  Trouble was, it made my collections go wonky (the product images went huge) and didn't display an overlay on top of the product image.  I'm thinking that maybe in the last 6 years, some of the structures have changed within the Simple theme that make those particular codes not behave as they used to.

0 Likes
Highlighted
Tourist
34 1 0

I am looking for this as well. An overlay to display over the image before the user clicks on it that says SOLD OUT.

0 Likes
Highlighted
Shopify Partner
2471 129 406

@JimWatts be sure to go over the related shopify tutorials as they can get you in the ballpark of where the related code may be.

 

If you want professional help for this customization contact me by email paull.newton+shopifyforums@gmail.com 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Tourist
34 1 0

These seem unrelated. I am looking to add an OUT OF STOCK badge on the images that are out of stock. Currently it just says out of stock on the bottom of the title of the product, and only when you in the product view. Not from the list screen.

0 Likes
Highlighted
Shopify Partner
2471 129 406

You would use those tutorials to first find the code related to the badge display then use it in the collection template either in it's product loop;

Or in some cases in the relevant product snippets logic when it's used in a collection templates.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Shopify Partner
222 17 84

Hey @zombiesinlondon@JimWatts 

You can apply the Sold Out badges/labels on your collections page easily by installing the ModeMagic app. We have 1000+ Labels collection, plus we do make custom badges based on your request.

Screenshot 2020-11-23 at 4.12.51 PM.png

Sincerely

ModeMagic
Featured on Shopify Staff Picks
0 Likes
Highlighted
Shopify Partner
2471 129 406

@Fayzmo doesn't modemagic apply the badge directly and permanently by editing the product image?

How does it work currently when the sale ends? does that cost another credit to rollback to the original image?

I like the app but you really need to clarify this in your messaging especially since it's a good selling point for multichannel stores that have no tool besides image editing to add "features" or UI on other platforms like facebook or using shopify lite.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Tourist
34 1 0

Yeah it is not feasible long term solution when you have 100k products. 
I still have yet to find a solution that works Displaying sold out on the Collection page and Product page over the image for Simple Theme.

0 Likes