Hello, I’m trying to get my products to display like this on my site when they’re sold out. I’ve included a reference image below to show the exact look I’m going for. Any help with the coding to achieve this would be greatly appreciated. My site is going live soon, so I need this completed as soon as possible.
1 Like
To add a “Sold Out” effect to your product cards, this simple tweak will not only improve the look and feel of your store, but it also ensures your customers are aware of unavailable items instantly.
How It Works:
When a product is out of stock, this solution will:
- Gray out the product card to make it visibly distinct.
- Show a “Sold Out” label over the card for clear communication.
The Simple Steps:
- Add This CSS:
Copy and paste this CSS code into your theme’s custom CSS section:
/* Style for sold-out products */
.product-card.sold-out {
opacity: 0.5; /* Gray out the card */
position: relative; /* For positioning the 'Sold Out' label */
}
/* Create the "Sold Out" label */
.product-card.sold-out::after {
content: "Sold Out";
font-size: 20px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 5px;
z-index: 10;
}
- Ensure Sold-Out Class Is Applied:
Most Shopify themes automatically apply asold-outclass when products are out of stock, but if it’s missing, you might need to add it through Liquid code. This helps make the product appear grayed out and shows the “Sold Out” label. - Test and Adjust:
Once added, test your store by marking a product as “sold out”. You can fine-tune the opacity, font size, and background color based on your store’s theme and brand aesthetics.
If this solution helps you get your site ready, a quick like would mean a lot to me! Let me know if you need further assistance with the implementation. 
The codes will be different between Horizon and Dawn, not talking about dozens of other themes available.
Solution would also depend on how you’ve configured your theme, so ideally need to see your store (and have a preview password if one is set).
Hi @qbhood
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
I am trying to post the URL to my site but, its not letting me.
Forum code does it to new accounts. Just add some spaces around dots or use a code button (</>)
thie website is neverlostfaith. com
Theme does not output any indication whether the product is sold out. Just outputs a badge.
If your only badge is “Sold out”, then you can use this code
<style>
.badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 10rem;
min-height: 10rem;
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
aspect-ratio: 1;
background: rgb(var(--color-background-contrast));
}
.card__badge:before {
content: "";
position: absolute;
background: rgba(255,255,255,0.5);
inset: 0;
}
</style>
You can put it either in your layout/theme.liquid, right above the </body> tag, but I prefer not to edit theme code.
You can go to Online Store=>“Edit theme”, then add a “Custom liquid” section to the Footer section group.
Paste code there.
If you expect to have a “Sale” badge as well you’d need to edit liquid code, here:
And here:
Make these lines
class="badge sold badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
CSS code would need to be this:
<style>
.badge.sold {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 10rem;
min-height: 10rem;
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
aspect-ratio: 1;
background: rgb(var(--color-background-contrast));
}
.card__badge:has(.sold):before {
content: "";
position: absolute;
background: rgba(255,255,255,0.5);
inset: 0;
}
</style>