Motion Theme - Hide Sold Out Price / Gray out item

Store Design
1

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

2

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

3

@Acerino3

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

4

Hi @Acerino3

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

5

Mima-shoppe.myshopify.com

6

Mima-shoppe.myshopify.com

7

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

8

@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

9

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

10

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

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

}

12

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

}
13

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

14

@Acerino3
Hi, kindly share me your store url.

15

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

Ajay_kumar_dev_0-1627452597320.png
Ajay_kumar_dev_0-1627452597320.png1304×520 254 KB

16

mima-shoppe.myshopify.com

17

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

18

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

19

Did this ever get resolved?