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

39 comments

Hi @Melissa,

The tutorial is to make any section in your Shopify to have an option to show in Desktop or mobile. It will not create a section for you. Youi have to have the section readily available to customize it.

You also have to add 2 sections, one for desktop and one for mobile, if you want to create different section for desktop and also mobile.

Made4Uo

I have the same problem as PRIYANK SINGH and copied each step precisely.

Melissa

Hi @Priyank Singh Please make sure you follow step by step

Made4Uo
I am trying to upload image for mobile it is not showing on the mobile version . I have an problem to upload image image according to your Video. https://youtu.be/dvf1zq7gVV8 . kindly help me to resolve this issue
Priyank Singh

Leave a comment