Debut Theme - Disable grey sold-out product overlay

[Julie_Tingley]

Hi!

I would like to disable the Debut theme feature that turns the image of my products grey (on the collections page) when they are sold out. I'm a total novice when it comes to editing code, but if someone can suggest how I can modify the theme to disable the grey effect that would be awesome!!

Thank you!!

[Lixon_Louis]

Hey Julie,

Remove the class highlighted here in snippets/product-card-grid.liquid > http://take.ms/AZCIm

[Julie_Tingley]

That worked! I just deleted the section you highlighted and now the items are full color. OMG! You are a lifesaver! Thank you!!!

[silvertim]

Alternative solution, can try add CSS below to bottom of theme.scss.liquid file:

.grid-view-item__image {
.grid-view-item--sold-out & {
opacity: 1!important;
}
&.lazyload {
opacity: 1!important;
}
}

[Sandberg]

That worked also :-)

---

@silvertim wrote:

Alternative solution, can try add CSS below to bottom of theme.scss.liquid file:

.grid-view-item__image {
.grid-view-item--sold-out & {
opacity: 1!important;
}
&.lazyload {
opacity: 1!important;
}
}

---

[Vonda_Youngkin]

---

@silvertim wrote:

Alternative solution, can try add CSS below to bottom of theme.scss.liquid file:

.grid-view-item__image {
.grid-view-item--sold-out & {
opacity: 1!important;
}
&.lazyload {
opacity: 1!important;
}
}

---

Hmm. Doesn't seem to be working on the Minimal Theme.  Suggestions?

[TrinAandRFabric]

Thank you so much for sharing this!

[Reth]

---

@silvertim wrote:

Alternative solution, can try add CSS below to bottom of theme.scss.liquid file:

.grid-view-item__image {
.grid-view-item--sold-out & {
opacity: 1!important;
}
&.lazyload {
opacity: 1!important;
}
}

---

Sorry to pick this old topic up but wanted to know: Really just adding these lines even though if there is already a section:

.grid-view-item__image {
...
   .grid-view-item--sold-out & {
   ...
   }
}

 or overwriting the existing section?

[BlakeBriand]

Im attempting to do the same thing - Id like to see the products in full color while keeping the "sold out" label overlay.
Tried this solution and did not work in Minimal

.grid-view-item__image {
.grid-view-item--sold-out & {
opacity: 1!important;
}
&.lazyload {
opacity: 1!important;
}
}