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!
39 comments
Same – Followed all the steps and Mobile is showing both desktop and mobile. Desktop shows just Desktop
Actually all good, just need to create an account before viewing the content :)
Hey, on your ytb video it is written that this is a “free” solution. That and the buying option isn’t even working…
Hi @Daniela,
It is hard to determine what have gone wrong. In my opinion, this code will be easy to implement if you have at least HTML to do it by yourself, since every sections of every theme is written differently.
Hi, I was wondering if you can help me out. I added the code and created sections for mobile and desktop. When I see the final results, in the desktop version everything is ok but in the mobile version both sections appear (mobile+desktop). Do you know how I can fix that?