Adding an overlay layer for sold out products - Dawn theme

[OnTech]

Hi,

I’m trying to add an overlay layer for sold out products.

My store url: https://ontech.my/

Please help.

Really appreciate if anyone here can help.

[nidhipatel]

Hi @OnTech ,

For Adding an overly layer for sold out products you need to Add following Code.

You need to add following JavaScript code on this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > global.js

var val = document.querySelectorAll('.grid__item');
for(let i = 0; i < val.length; i++){
    var test = val[i];
    var newVal = test.querySelector('.color-inverse');
    if(newVal != null){
        newVal.closest('.grid__item').classList.add('active');
    }
}

Add following CSS code on this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > base.css

li.grid__item.active{
    position: relative;
    opacity: 0.5;
}
li.grid__item.active:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
}

How it will looks like after adding above code in your Shopify Store:

Thank you.

[OnTech]

Hi @nidhipatel , appreciate your help. Can I add the overlay just on top of the image?

I saw a website and they did for sold out products. Just like the photo showing.

Thank you

[nidhipatel]

Hi @OnTech ,

If you need to add overly just on top of the image, then you just need to add following CSS on this file no need to add JavaScript Code: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > component-card.css

.card__badge{
  display:block;
}
.card__badge .badge:not(.color-inverse){
  display:none;
}
.card__badge .color-inverse{
  font-size:0;
  background:transparent;
  border:0;
  padding:0;
}
.card__badge .color-inverse:after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity:0.2;
}

If you find above solution works for your store then please like and accept it as solution so it will help to other community members as well.

Thank you.

[binteamin2021]

Hi
This code is working but it’s removing my sale and sold out badge . I want to keep the badges and yet make the overlay layer on sold our products only. Can you please help?

[nidhipatel]

Hi @binteamin2021

For this you need to just removing following CSS from this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > component-card.css

.card__badge .badge:not(.color-inverse){
  display:none;
}
.card__badge .color-inverse{
  font-size:0;
  background:transparent;
  border:0;
  padding:0;
}

Thank you.

[binteamin2021]

Thank you! It worked. Do you also know how to keep color of sold out badge black but sale badge red? Like the photo posted in the thread. I’m using this code in base.css file but it’s making both badges red
.badge {
background-color: #C30000 !important;
border-color: #C30000 !important;
}

[nidhipatel]

Hi @binteamin2021 ,

If you need sold out badge black and sale badge red add or remove following CSS: For sold out badge remove this CSS: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > component-card.css

.card__badge .color-inverse{  
  font-size: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

For sale badge you need to Add following CSS to this file: SALES CHANNELS > Online Store > Themes > Actions > Edit code > Assets > component-card.css

.card__badge .badge:not(.color-inverse) {
    background-color: #C30000;
    border-color: #C30000;
    display: block;
}

Thank you.

[binteamin2021]

Thank you so much!

[alisonhui]

Hi thanks for your answers. I’m just wondering is there a way that the overlay doesn’t cover the badge?
(so the badge will be sharper red as my setting instead of being pale) Thanks.

[devildogcomics]

Hi Nidhipatel,

I was told to try your thread from Shopify CS. I am setting up a updated store with dawn, but have not published it yet. I have items greyed out in debut with a code I used. I am not great at code, but can limp my way through. I followed your directions to grey out sold out products in Dawn. At first the sold out badge disappeared, but your solution fixed that problem of the disappearing badge. The problem is the item still does not grey out. With the sold out button being gone means the code is most likely is working, but the item is still not greyed out. Tried to change the opacity, but to no avail. Not sure if I am missing something or possibly should I be dropping the code somewhere other than the end of the code. Any help would be appreciated. The Dawn Code has not been altered in anyway. I am just now adding products and changing around the colors in the interface. Thanks.