Hi,
I want to be able to upload a separate image on desktop and mobile. I’ve already followed a tutorial to make the image banners clickable. I just need to add separate images for mobile that are still clickable without being visible on or affecting the desktop view. Can anyone help me out with this?
Here’s my site
https://evelyn-theme.myshopify.com/
password: evelyn
This may require you to have some coding skills to achieve this.
Of course you can invite me as your shop co-author and I can help you with him!
Yes, you can achieve this by using media queries in your CSS code. Media queries allow you to apply different styles to elements based on the screen size or device type.
First, you need to upload the separate mobile image to your theme’s files. You can do this by going to Online Store > Themes > Actions > Edit code, then uploading the mobile image to the Assets folder.
In the above code, mobile-image.jpg is the file name of the mobile image that you uploaded to the Assets folder. The max-width: 767px media query targets screens smaller than 768 pixels (i.e. mobile devices), while the min-width: 768px media query targets screens larger than or equal to 768 pixels (i.e. desktop devices).
@NomtechSolution Thanks for the reply.
The thing is, I need the change to be made to the image banner section since I want it to apply to all image banners, not a specific image. This is also for a client, so the option to add mobile images also has to be available in the customizer.