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

Store Design

Topic summary

Display different images on mobile vs. desktop for a Shopify store (montytoys.com) by toggling sections with CSS media queries based on screen width.

Solutions proposed:

  • Add CSS in theme.liquid before to hide/show specific section IDs:
    ā€¢ max-width: 767px: hide the desktop slideshow section (#shopify-section-templateā€“16744253096219__slideshow).
    ā€¢ min-width: 767px: hide the mobile-only section (#shopify-section-templateā€“16744253096219__7a9609e7-7f6d-48f8-963d-2de2ad162bd5).
  • Alternatively, add CSS to assets/base.css:
    ā€¢ Default: hide the mobile section.
    ā€¢ max-width: 749px: hide the slideshow and show the mobile section. A YouTube guide for the Dawn theme is referenced.

Technical notes:

  • CSS media queries apply styles conditionally by viewport width.
  • theme.liquid and base.css are Shopify theme files where custom CSS can be placed.
  • Section IDs correspond to specific blocks; correct IDs must be used.

Outcome:

  • The requester confirmed the approach works and found a solution.

Status:

  • Resolved. No further action items or open questions indicated.
Summarized with AI on February 5. AI used: gpt-5.
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 :