Fixing "Out of Stock" Badges: When Your Shopify Mobile Site Cuts Off Important Labels

Hey there, fellow store owners! As someone who spends a lot of time diving into the Shopify community forums, I often spot recurring themes and little niggles that can really trip up even the most experienced merchants. Recently, a thread caught my eye that perfectly illustrates one of those frustrating, yet totally fixable, display issues: the dreaded "cut off" or "misshapen" out-of-stock badge on mobile devices.

It all started with a post from a store owner, vibehome, who was tearing their hair out over their "out of stock" badges looking perfectly fine on desktop, but all squished and half-hidden on mobile. Sound familiar? If you’ve ever tweaked your theme or added custom code, chances are you’ve introduced a little visual hiccup like this without even realizing it. And let’s be honest, a clean, professional look on mobile isn't just nice-to-have anymore; it’s absolutely essential for conversions and customer trust.

The Mystery of the Missing Badge: What's Going On?

The issue vibehome described is classic: a crucial piece of information, the "out of stock" label, wasn't displaying correctly on smaller screens. But as community member mastroke pointed out, the problem wasn't just mobile. On desktop, when hovering over products to reveal a second image, the label was also getting hidden beneath the image. This immediately signals a layering problem, which in web development, almost always points to a CSS property called z-index.

Think of z-index like stacking layers of paper on a desk. Each piece of paper has a number, and the higher the number, the closer it is to the top of the stack, making it visible over items with lower numbers. If your "out of stock" badge has a lower z-index than the product image or an overlay, it's going to disappear behind it.

Mastroke's keen eye also highlighted a potential culprit: custom code that might have been added to make the product image clickable. Many Shopify themes already handle product image linking beautifully. Sometimes, when developers or store owners add their own tags around images, it can inadvertently create conflicts with the theme's existing CSS, especially when it comes to layering (z-index) and responsiveness. This is a common scenario where good intentions can lead to unexpected visual glitches.

Spotting the Issue in Your Code

Mastroke even shared a screenshot, which, although a bit blurry, shows what kind of code might be causing the trouble. It looks something like this, often found in your theme's Liquid files (like product-grid-item.liquid or similar snippets):

The key takeaway from mastroke was simple but powerful: adjusting the z-index property. Specifically, setting it to 1 (or higher, depending on other elements) for the "out of stock" label, or the element containing it, brings it to the forefront.

Here's a mobile screenshot from vibehome's original post, showing exactly what that cut-off badge looks like:

How to Fix Your "Out of Stock" Badge Display

Ready to tackle this? Here’s a step-by-step guide to help you resolve this common display issue. Always remember to duplicate your theme before making any code changes! This way, you have a fallback if something goes awry.

1. Access Your Theme Code

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click Actions > Duplicate. Wait for the duplicate to be created.
3. Once duplicated, click Actions > Edit code on the original theme (or the duplicate if you prefer to test there first).

2. Locate the Relevant CSS File

You'll typically find styling rules in files ending with .css, .scss.liquid, or sometimes directly within .liquid sections using