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
36 comments
Hi @JESSICA,
Make sure you follow the instructions as explained in the video. The code must be placed in the first “<”. For some sections, this will cause an error since they make a section as a container, if this is the issue, we need to provide the code differently. Please contact us using “Chat with us”
@JAMIE Thank you so much for the appreciation!
@SHAIMA This is a little off topic but I would recommend to replace your image with bigger sizes
Hello! I added this code to the Image Banner. When I choose hide from desktop, it removes the image from desktop, but leaves a huge white space where the section is. This also happens if I choose hide from mobile. Is there any way to resolve this?
Just wanted to drop a line and say thank you. Easy to understand an implement, appreciate your work.
Hi! thank you so much for this simple tutorial :))
my site for reference -I have noticed that mobile banner quality is quite low although i have adjusted its dimensions from canva. is there a way to fix this?
https://marthajewelry.myshopify.com/
test
Hi @LEON,
I am not sure what are you trying to obtain. Are you trying to hide the whole product in a product page? Anyway, you can add a class to the line. E.g. class=“the code here”