How do I hide this one specific section on mobile?

LindStuart
Tourist
17 0 2

I'm trying to hide this one section – "Also available in this color" on mobile only. I've searched all similar posts but still can't figure it out...🤔

 

Thank you in advance!

 

https://4a3474-24.myshopify.com/collections/travel-umbrella/products/travel-umbrella-neon-pink

 

Screen Shot 2024-04-03 at 10.22.23 AM.png

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2125 607 471

Hey @LindStuart,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .lightly-spaced-row.lightish-spaced-row-above.not-in-quickbuy {
        display: none !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712155568256.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LindStuart
Tourist
17 0 2

Thank you so much! Question, though – is it possible to just hide this *specific* block? I may want to add the same type of block later and have that one show on mobile... if that makes sense.

ThePrimeWeb
Shopify Partner
2125 607 471

Unfortunately not for this one, The way I see it, it doesn't have a unique ID, so it won't be possible to hide this specific block. There might be one way, but then you would have to hide it for every single product one by one and that's not very "future proof" code.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ThePrimeWeb
Shopify Partner
2125 607 471

Btw, if you're only looking to hide it for this product only, then you can use this code. The instructions are the same as shown above.

 

<style>
@media only screen and (max-width: 989px) {
   .product-form[data-product-id="9767988003119"] .lightly-spaced-row.lightish-spaced-row-above.not-in-quickbuy {
       display: none;
   } 
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
LindStuart
Tourist
17 0 2

ahh, got it – thank you for the help! maybe I can do it by collection...