How can I display different images for mobile and desktop views?

Store Design
1

Good day,

My website is www.montytoys.com

I would like the first picture only for desktop and I want to hide it for mobile. The second picture is only for mobile and want to hide it for desktop. How can I arrange that?

2

I’m Richard Nguyen - CRO Expert at PageFly, I’d like to suggest this idea:

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

@media(max-width:767px){ #shopify-section-template--16744253096219__slideshow { display: none !important; } } @media(min-width:767px){ #shopify-section-template--16744253096219__7a9609e7-7f6d-48f8-963d-2de2ad162bd5 { display: none !important; } }

Please refer to this screenshot:

RichardNguyen_1-1668424337307.png
RichardNguyen_1-1668424337307.png1365×651 47.6 KB

Hope you find my answer helpful!

Best regards,

Richard | PageFly

1 Like
3

Hi @Luca333
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

#shopify-section-template--16744253096219__7a9609e7-7f6d-48f8-963d-2de2ad162bd5 {
display: none;
}
@media(max-width: 749px){
#shopify-section-template--16744253096219__slideshow {
display: none;
}
#shopify-section-template--16744253096219__7a9609e7-7f6d-48f8-963d-2de2ad162bd5 {
display: block;
}
}

If you are using Dawn theme, you also can try to use the guide in this video: https://youtu.be/vfY6G35SlEE

1 Like
4

Yes! It works. Thank you so much!!!

5

Thank you! I have found a solution. Appreciate your help :slightly_smiling_face:

6

Hello @Luca333

I would like to give you some recommendations to support you

Hope my recommendation can works and support for you!

Kind & Best regards!

GemPages Support Team

1 Like
7

How to add this code:

  1. Go to Online Store->Theme->Edit code

  2. Open your theme.liquid theme file

  3. Paste below code before :