How do I hide this one specific section on mobile?

LindStuart · ‎04-03-2024

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

ThePrimeWeb · ‎04-03-2024

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.

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 · ‎04-03-2024

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 · ‎04-03-2024

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 · ‎04-03-2024

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 · ‎04-03-2024

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

How do I hide this one specific section on mobile?