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.
| {{ 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; } } |
20 comments
Hi @YAREMIS,
As mentioned in the video, you place the {{ section.settings.show_on_device }} at the first angle bracket, “<”. For slideshow, the first angle bracket is “<slideshow-component”, you have to place the code inside the class. Some of the angle brackets might not have a “class=’’”, just add the code inside the angle bracket, “class=’{{ section.settings.show_on_device }} ’”. Some circumstances, you might need a developer to do so.
Hello. I used this and everything seems to be working great except that I too have the slide show dots at the top now. I am using Dawn 8.0.0
Hi everyone,
For those people who have problems with the button showing in slideshow section, can you provide me the Dawn / Theme version you have, so I can provide the proper code? I cannot reproduce the error.
The instructions are straightforward but may not apply to all the sections you have in your theme, if this happens please reach out for a developer to help you out.
Hello, I tried to follow the tutorial but there is a problem. Here is the error message:
Invalid schema: setting with id=“show_on_device” default must be one of the values
@Taylor regarding the comment you said on how to fix the arrows, can you explain how to do that with the code, it looks like it got cut off and you didn’t end up pasting it, or anyone else if they have a solution.