How to have separate images between desktop and mobile?

Store Design

Topic summary

A user wants to display different banner images for desktop and mobile versions of their Shopify store. The current mobile banner looks good but appears too large on desktop.

Proposed Solutions:

  • PageFly-Richard suggested adding custom CSS code to theme.liquid above the </head> tag, though the specific code wasn’t fully visible in the conversation.

  • oscprofessional recommended using the HTML <picture> element with <source> tags to serve different images based on screen size:

    • Desktop image (≥769px width) via <source> tag
    • Mobile image as fallback via <img> tag

Implementation Steps:

To locate the existing banner code:

  1. Right-click the banner and use browser “Inspect” to find the <img> tag
  2. Navigate to Online Store > Themes > Edit Code and check files like sections/banner.liquid, hero.liquid, or theme.liquid

The user requested clarification on finding and identifying the specific banner image code to replace. If the banner uses a CSS background image instead of an <img> tag, the CSS approach would need modification.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

The image banner on the mobile looks really good but it is way too big on the desktop. What I want for the desktop image is to look like this—the image with the wide black background. And the current image for the mobile cuz it looks perfect on mobile right now. How do i make this change? My url is www.whoglobal.shop

Beyond Appearances, Into.png
Beyond Appearances, Into.png1080×377 119 KB

samueljoonjung_0-1740538891241.png
samueljoonjung_0-1740538891241.png2879×1557 253 KB

samueljoonjung_1-1740538919994.png
samueljoonjung_1-1740538919994.png2879×1554 285 KB

2

Hi @samueljoonjung I see it look good

LizHoang_0-1740540684903.png
LizHoang_0-1740540684903.png1269×899 112 KB

3

Hi @samueljoonjung

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hi @samueljoonjung ,

You can use the tag to serve different images based on screen size. This is a clean and efficient way to handle responsive images.

Replace your existing banner image code with the following:
  • The tag specifies the desktop image and applies it only if the screen width is 769px or larger.
  • The tag acts as a fallback, displaying the mobile image by default (for smaller screens).
5

Please be more specific. How do i find the existing banner image code. And what is the banner image code?

6

To find the banner image code:

  1. Inspect the page → Right-click the banner > Inspect > Look for an tag or background image.
  2. Check theme files → Go to Online Store > Themes > Edit Code, then look in sections/banner.liquid, hero.liquid, or theme.liquid.

Replace the existing banner code (if using an tag):

If it’s a background image, you’ll need to update the CSS instead.