Different Image on Desktop

Store Design
, ,

Topic summary

A user wants to display different images on their custom theme’s landing page depending on whether visitors are using mobile or desktop devices.

Proposed Solutions:

  • First, check if the theme’s customize settings already include built-in options for separate mobile/desktop images
  • If no native option exists, create two separate banner sections (one for mobile, one for desktop)
  • Use CSS media queries to show/hide the appropriate section based on screen width:
    • Desktop section: Hide below 749px width using @media (max-width: 749px) { .banner { display: none; } }
    • Mobile section: Hide above 750px width using @media (min-width: 750px) { .banner { display: none; } }

The CSS code snippets should be added to each section’s Custom CSS settings. This approach allows different images to display responsively without modifying theme files directly.

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

Hey, i would like to have different images displaying rather you on mobile or desktop:

https://luveepillow.com/ im talking about the first picutre

(im using a custom theme)

1 Like
2

@luveee - please check customize settings, does your theme have an option to set different images for desk and mobile? if yes then please add it from there, else you will need to add one more section with mobile image and using css show/hide the unwanted section

3

Hi @luveee

You can do that by adding 2 different banner section, one for mobile and one for desktop then add those codes below to Custom CSS of each section

Add this code to Custom CSS of desktop section

@media (max-width: 749px) {
.banner { display: none; }
}

Add this code to Custom CSS of mobile section

@media (min-width: 750px) {
.banner { display: none; }
}