How to adjust opacity for sold out items on Impulse theme?

Store Design
, , , ,

Topic summary

Goal: Make sold‑out products on Impulse collection pages more obvious by reducing product opacity and centering a clear “Sold Out” label; requester also wants a black background with white text for that label.

Key steps provided:

  • Add custom CSS in Online Store > Themes > Edit code > Assets (main.css/base.css/style.css/theme.css) at the bottom.
  • Lower opacity of product cards that contain a sold‑out tag using a selector targeting items with the sold‑out badge.
  • Center the “Sold Out” tag over the product image via absolute positioning and transform.

What’s covered:

  • Opacity adjustment for sold‑out items (example uses 0.3 opacity).
  • Centering the “Sold Out” label on the product card.

What’s not covered yet:

  • Styling the label with a black background and white text (not provided in the shared code).

Status:

  • Store URL was shared and a working CSS approach was posted with screenshots showing results.
  • No confirmation from the requester; the styling color request remains unresolved/ongoing.
Summarized with AI on December 20. AI used: gpt-5.
1

I want the sold-out items on my collection pages to appear either less opaque or darker so that it is more obvious that the items are sold out. I would also like to make it to where the “Sold Out” button is centered and has a black background with white letters. Can someone help me figure out the correct code to use and where to put it?

I attached what it currently looks like. I was able to find a forum to help me change the text to be larger and appear red, but would still like it to be more apparent that the items are sold out. I am using the impulse theme

Screenshot 2024-09-05 at 12.48.21 PM.png
Screenshot 2024-09-05 at 12.48.21 PM.png2592×1028 365 KB

1 Like
2

Hi @juneandbeyond

Would you mind sharing your store URL? Thanks!

3

https://juneandbeyond.com/

Thank you for your help!

4

Thanks for the info, I can only add the opacity. Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.grid-product__content:has(.grid-product__tag.grid-product__tag--sold-out) {
    opacity: .3;
}

And Save.

Result:

Made4uoRibe_0-1725637013448.png
Made4uoRibe_0-1725637013448.png1654×650 141 KB

I add the sold out on the middle. If you like to add them also you can use this code.

.grid-product__tag.grid-product__tag--sold-out {
    position: absolute;
    top: 40%;
    right: 50%;
    transform: translateX(50%);
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like