Different picture for mobile than for desktop (image with text overlay; showcase theme)

Store Design
,

Topic summary

Goal: use a different (or better-fitting) banner/image-with-text on mobile in the Showcase theme.

Latest update: A contributor advised adding custom code to theme.liquid (placed just above the tag). A screenshot of the result was shared. The store owner confirmed it fixed the mobile display and they no longer need a separate mobile image.

Alternative approach offered: Create two Image with text sections—one for desktop, one for mobile—and hide/show them with CSS media queries:

  • Desktop section (hide on mobile):
    @media (max-width: 749px) { .image-overlay { display: none; } }
  • Mobile section (hide on desktop):
    @media (min-width: 750px) { .image-overlay { display: none; } }
    Explanation: Media queries apply CSS based on screen width, allowing different sections to appear on mobile vs. desktop.

Notes: The exact code inserted into theme.liquid was not visible in the thread excerpt; a result image was referenced. No further issues were raised.

Status: Effectively resolved; solution confirmed by the store owner, with an optional CSS-based alternative provided.

Summarized with AI on December 14. AI used: gpt-5.
1

Hey im using the Showcase theme and the Banner i have on my site doesnt work for mobile so i wanted to put a customized picture for the mobile version. Ive found some code to implement but i have a different theme so i dont have the same .css .

Can you guys help me so i can customize a different picture for the mobile view? :heart: thanks in advance

Url www.zuips.com pw: IchwillendlichbeiZuipsshoppen

1 Like
2

Hey @Zuips

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1731325629476.png
Moeed_0-1731325629476.png372×664 120 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

OMG! Thank you so much! i knew there was a fast fix! :slightly_smiling_face: i dont even have to do a different mobile picture! :slightly_smiling_face: :heart: very nice thaaanks

1 Like
4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

5

Hi @Zuips

You can add 2 image with text sections, one for mobile and another one for desktop, then add those codes to the Custom CSS of each.

  • CSS Code for desktop section, it will hide this section on mobile
@media (max-width: 749px) {
.image-overlay { display: none; }
}​
  • Code for mobile section
@media (min-width: 750px) {
.image-overlay { display: none; }
}​