Assign Any Section to Show on Mobile or Desktop Only

Assign Any Section to Show on Mobile or Desktop Only

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.

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. 

{{ section.settings.show_on_device }}

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

 <div class="{{ section.settings.show_on_device }}".....

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.

{
"type": "select",
"id": "show_on_device",
"options": [
{
"value": "mobile--device",
"label": "Mobile and tablet device"
},
{
"value": "desktop--device",
"label": "Desktop device"
},
{
"value": "show-all-devices",
"label": "Show to all devices"
}
],
"default": "show-all-devices",
"label": "Show this section to this device only",
"info": "Choose which device you want this section to show"
},

 

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.

@media only screen and (max-width: 749px) {
.mobile--device {
display: block !important;
}

.desktop--device {
display: none !important;
}
}

@media only screen and (min-width: 750px) {
.mobile--device {
display: none !important;
}

.desktop--device {
display: block !important;
}
}

 

Copied!
Back to blog

11 comments

Please make sure to do some trial and error and follow the steps closely

Made4Uo

We’ve added this and it works well but when the mobile and desktop images are separated, the pagination buttons appear above the slider? How do we get them back down to the bottom?

Gemma

Same – Followed all the steps and Mobile is showing both desktop and mobile. Desktop shows just Desktop

Quilty Quilter

Actually all good, just need to create an account before viewing the content :)

XXX

Hey, on your ytb video it is written that this is a “free” solution. That and the buying option isn’t even working…

XXX

Leave a comment