Motion Theme - Hide Sold Out Price / Gray out item

[Acerino3]

Hello,

I am using the Motion Theme and would like to Hide the Sold Out price on the product and collection pages. Also, gray out the product picture when sold out. Please help!!!

Thank you

[Qualitycheck]

hello,

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the fil

.grid-product__tag.grid-product__tag--sold-out {
display: none;
}

[Acerino3]

I will try. Also, how do you opacity a sold out product picture I’m collections and in the product page?

[Acerino3]

---

@Qualitycheck wrote:

hello,

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the fil

.grid-product__tag.grid-product__tag--sold-out {
display: none;
}

---

It doesn’t seem to be working. The price is still showing

[snafu273]

I’m having the same issue. Trying to hide sold prices. Any update on this? Many thanks 

[Zworthkey]

@Acerino3 

hi, we are happy to help you.
please share me your Site url 
Thank you.

[Acerino3]

Mima-shoppe.myshopify.com

[Ajay-app-dev]

Hi @Acerino3 

Share the url, so that i can look into this. 

[Acerino3]

Mima-shoppe.myshopify.com

[Ajay-app-dev]

@Acerino3 , As i can see, i need to go through your code and conditionally hide the price and other stuff you wanted. You can PM me 

[LitExtension]

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
.grid-product__tag--sold-out~.grid-product__link .grid-product__price {
display: none;
}
.grid-product__tag--sold-out~.grid-product__link .grid-product__image-mask{
opacity: 0.3;
}

[Acerino3]

I added your code to file theme.css.liquid

But no change, price still shows up and product picture hasnt been opacified. Please help

here is that last bit of code:

.template-giftcard .logo{
color:#58686f;
}

.grid-product__tag--sold-out~.grid-product__link .grid-product__price {
display: none;
}
.grid-product__tag--sold-out~.grid-product__link .grid-product__image-mask{
opacity: 0.3;
}

}

[Ajay-app-dev]

Hi @Acerino3 

Try this, not tested.

.template-giftcard .logo{
color:#58686f;
}

.grid-product__tag--sold-out~.grid-product__link .grid-product__price {
display: none !important;
}
.grid-product__tag--sold-out~.grid-product__link .grid-product__image-mask{
opacity: 0.3 !important;
}

}

[Acerino3]

I tried yours also. Nothing happened. Thank you for trying

[Ajay-app-dev]

@Acerino3 

The above code working perfectly, have a look. If still, you have a problem, let me know. Have you tried hard refresh or tried in a private window? 

[Acerino3]

I tried hard refresh and other computers and tablets. The price is still showing and the product image is not opacified. I'm not sure why its not working for me

[snafu273]

Did this ever get resolved?

[Zworthkey]

@Acerino3 
Hi, kindly share me your store url.

[Acerino3]

mima-shoppe.myshopify.com