Debut Theme - Disable grey sold-out product overlay

Julie_Tingley
New Member
2 0 0

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!!

0 Likes
Lixon_Louis
Shopify Partner
1174 34 229

Hey Julie,

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

Available for hiring. Reach me at lixon@ecommercestudio.in
Julie_Tingley
New Member
2 0 0

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

0 Likes
silvertim
Shopify Partner
3 0 3

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
Tourist
5 0 1

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
Excursionist
29 0 13

@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?

0 Likes
TrinAandRFabric
New Member
1 0 0

Thank you so much for sharing this!

0 Likes
Reth
New Member
2 0 0

@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?

0 Likes
BlakeBriand
Tourist
3 1 0

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;
}
}

0 Likes