How to hide a section on mobile, and on desktop. Have a different section for desktop and mobile

Technical Q&A
1

Hi could someone help me or have advise? I am building my store in a new theme Envy. This new theme is not online yet. I would like to have a different section (Image with text block) for Mobile, and for Desktop.

Tried to find a way by reading earlier posts, but I cannot find the section ID. I tried YouTube even.

Is there someone who could help with a code + section ID maybe? And tell me where to insert?

That would be wonderful.

2

@Nietus - have you created 2 sections and added both on your page? if yes then can you please share your website link?

3

Hi @Nietus Hope you are doing Well Can you Please share your website url

4

Hi @Nietus ,

Refer https://developer.chrome.com/docs/devtools/open/

After you can turn it on, you will see the section id here:

Screenshot_10.png
Screenshot_10.png1797×866 225 KB

You just need to check the section you want to display on desktop or mobile with any id. For example id for desktop is: ‘shopify-section-template–14343915634771__16230767063c20f82a’ and mobile is: ‘shopify-section-template–14343915634771__1621426293a0e33ee4’.

Go to Assets > theme-index.min.css and paste this at the bottom of the file:

#shopify-section-template--14343915634771__1621426293a0e33ee4{
	display: none !important;
}
@media screen and (min-width: 768px){
	#shopify-section-template--14343915634771__1621426293a0e33ee4{
		display: block !important;
	}
	#shopify-section-template--14343915634771__16230767063c20f82a{
		display: none !important;
	}
}

Hope it helps!

5

Hi @Nietus

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store Url,
-Also Mention Which Shopify theme you are using

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Ani

6

Hi Suyash,

The webshop is live but with the old template. I am working on the new one. So what can I do to make you check?

7

Ok let me check it later. Thank you!

8

@Nietus - you can share the preview link of the new template

9

Hi @Nietus ,

Have you tried to check according to my instructions? Or you can send me the site link, I will check and guide you to add the code

10

For anyone who is tired of finding the section and adding multiple codes just to solve this, check the tutorial video below. This is a clean and easy way to make ANY section of ANY theme mobile specific or even desktop specific. You can even change your mind and just edit it via theme editor. No hassle code here, no APP, and its totally FREE.

2 Likes
11

you are the best