i want to change the default "sold out" badge design

Shopify Discussion

Topic summary

A user seeks help customizing the “out of stock” badge on their Shopify store, having already prepared a custom design.

Initial Responses:

  • One commenter suggests consulting a Shopify expert or using a page builder app like PageFly.
  • BSS-Commerce provides CSS code solutions for two related issues: reducing product image size on individual product pages and repositioning the badge for mobile view only.

Technical Solution Provided:
The CSS code targets mobile devices (max-width: 600px) and adjusts the badge’s positioning and size using properties like position: absolute, top, left, and max-width: 60%.

Ongoing Issue:
The user reports the code doesn’t work as intended—they want to modify the badge size and position on mobile only, without affecting desktop view. BSS-Commerce later claims the badge displays correctly on mobile and requests screenshots for further troubleshooting.

Status: The issue appears unresolved, with conflicting reports about whether the solution worked.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Can someone help me change the default “out of stock” badge to my own badge design? I already have the design ready.

In case you need it here’s my store url: https://c1e46d.myshopify.com/collections/all

2

Hi @suoshie ,

This is Victor from PageFly - Shopify Page Builder App, you should seek help from an expert. Or you can refer to a page builder app in this case.

Hope you find my answer helpful!

Best regards,

Victor | PageFly

3

Hi @suoshie

Thank you so much for sending a message to us. Regarding your requirement "

I do have a new problem could you please help me make my product image smaller on the individual product page (not effecting the size of the image on catalogue page).", we would like to suggest a solution below:

  • Please go to Online Store → Edit Code, and find the theme.css, base.css, or styles.css file. Then add the following code at the end of the file:
#MainContent .product--large:not(.product--no-media) .product__media-wrapper {
   max-width: 40%
}

You can increase or decrease the 40% number above as you want.

I hope that this can help you solve the issue.

4

Hi @suoshie

Regarding your requirement “can you help me change the position of the badge for mobile only?”, we would like to suggest you a solution below:

  • Please add the following code:
@media only screen and (max-width: 600px) {
  .card__badge img {
     max-width: 60%!important;
     margin-left: 0px!important;
     margin-top: 0px!important;
     position: absolute;
     top: -8px;
     left: 0;
  }
}

Here is the result:

view - 2023-01-31T174057.110.png
view - 2023-01-31T174057.110.png390×848 68.3 KB

I hope that this is useful for you.

5

Hi unfortunately your code makes no changes. I want to change the size and positioning of the “Out of stock” badge on my mobile view, NOT effecting the desktop version. Please can you help again.

6

Hi @suoshie

We double-checked your site and saw that the badge displayed on mobile is correct as you want.

view - 2023-02-01T172040.730.png
view - 2023-02-01T172040.730.png385×844 67.5 KB

Please provide us with details (screenshots) if you still need further help.