Prestige-How can the “Sold Out” label be displayed on top of the image?

[YAMADATARO]

Hello, I would like to ask how to modify the following.

Currently, the product images look like this.

STUNNING LURE ONLINE STORE

PW：5206

When a product is sold out, I would like the “Sold Out” label to be displayed on top of the image, with a gray overlay background.
Similar to the image below.

Other badges should remain in the same position as they are now, displayed at the bottom of the image.

[Moeed]

Hey @YAMADATARO

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
badge-list.badge-list.badge-list--vertical sold-out-badge.badge.badge--sold-out {
    height: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    background: rgb(239 239 239 / 54%) !important;
    font-weight: bold !important;
}
badge-list.badge-list.badge-list--vertical:has(sold-out-badge.badge.badge--sold-out) {
    position: absolute !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[topnewyork]

Hello,

Go to Online Store → Theme → Edit code.
Open your theme.css / based.css file and paste the code in the bottom of the file.

badge-list.badge-list.badge-list--vertical sold-out-badge.badge.badge--sold-out {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;            /* ADD */
    align-items: center !important;       /* ADD */
    justify-content: center !important;
    background: rgb(239 239 239 / 54%) !important;
    font-weight: bold !important;
}

badge-list.badge-list.badge-list--vertical:has(sold-out-badge.badge.badge--sold-out) {
    position: absolute !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    left: 0 !important;                   /* ADD */
}

Thanks!

[YAMADATARO]

Thank you very much for your help. After making the changes based on the information you provided, the sold-out products can no longer be clicked. May I ask how we can continue to access sold-out products under the current settings? If possible, could you also show me how to change the “sold out” text to white? Thank you.

[Moeed]

Honestly, I don’t even recommend using my code because that’s the only way I can help you without having the access of your code files.

If you require to achieve this properly and make sure everything works then share your collaborator request code with me because I need to work on the backend files properly to set this up without breaking anything.

Best,
Moeed

[tim_1]

Try this code (I have no reservation recommending it ):

product-card:has(sold-out-badge) .product-card__media:after {
  content: "SOLD OUT";
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 5vw, 2rem);
  color: rgba(var(--background));
  background: rgba(var(--text-color) / 0.25);
  text-align: center;
  backdrop-filter: grayscale(0.6) brightness(0.75);
}

product-card .badge--sold-out {
  display: none;
}

Can go into “Custom CSS” in Theme settings(cog icon).
Or your stylesheet.

[YAMADATARO]

@tim_1

Can go into “Custom CSS” in Theme settings(cog icon).
Or your stylesheet.

thank you very much!!!