Assign Any Section to Show on Mobile or Desktop Only

Assign Any Section to Show on Mobile or Desktop Only

Log in or Sign up to ensure access to FREE code across multiple devices.

Compatability:  All Shopify themes

I have multiple people who wants to assign a different image to their desktop user customers and mobile user customers. The step is very easy actually and just follow along.

Since some themes are written differently, you might need to hire a developer to do this for you. In some sections, this can be a little tricky since we need to add the class code to the section or the first container. 

To start:

1. Go to Admin > Online store > Themes > Actions > Edit code
2. Open the section you want to edit. Then find the first "<" (angle bracket) that you see, and look for the class section. 
3. Add the code below. NOTE: Make sure to provide a space. 

 

If you do not have a "class" in your first "<", you can add one by using the format below. Paste the bold letters below.

4. Next, we will need to add a schema, so you do not have to the coding everytime. Go down to the {% schema %} section. Find the "settings", under the section. Add the code below after the "[", please make sure to watch the video for proper placement.

5. Next, we need to add the CSS file to hide and show on whatever choice of device you have. Go to Asset folder, and open the base.css or theme.css or theme.scss for others. Then add the code below. Make sure to SAVE

Copied!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Back to blog

36 comments

Thanks for this tutorial! It’s super simple to implement and I love that it works on any theme. Using this on every Shopify site I design now!!!

Caroline

Hi, I really need your help in fixing the desktop showing both desktop and mobile slides.
Can you please assist?

Sharyn Dale

Hi there, I tried this again and I’m still having both desktop and mobile show on the desktop version. The mobile version works perfectly, it’s just the desktop.
Can you please assist with this?
Thank you

Sharyn

Hi,
These are the issues that users do wrong:
1. Placement of the Step#3. They place the said code in the id instead of the class or even place it just wherever.
2. Forgot to follow the steps. They are missing step #4 and step #5.
3. Try to customize the code. Some user tries to customize the CSS code and done it wrong.
4. The main base.css or theme.css has errors. I have seen users that just added random codes from other sources and that creates error on their main CSS file.

Made4Uo

Hi!
Great tutorial, clear and concise and exactly what I was after, only problem is it isn’t working for me.
All the instructions have been followed and I get the ‘Show this section to this device only’ choice in the theme editor, but the slideshows still show on all devices regardless of which option I choose.
My test slideshows are on this page https://www.atvsonly.co.uk/pages/test labelled as ‘desktop’ and ‘mobile’, if you could have a look and hopefully show me what I’ve done wrong that would be great!
Thanks,
Iain

Iain

Leave a comment