Creating a separate homepage layout for Mobile vs Desktop

Store Design

AI-generated summary

Goal: Show different homepage images/layouts on mobile/tablet vs desktop in the Debut theme.

Proposed approach:

  • Add a separate “mobile image” field in each relevant section by editing the section schema.
  • Output both desktop and mobile images in the section with distinct CSS classes (e.g., image–desktop, image–mobile).
  • Use CSS media queries (CSS rules that trigger at specific screen widths) to hide the desktop image on small screens and the mobile image on larger screens.

Developments:

  • The requester and a helper moved to email for implementation details.
  • A video tutorial was shared showing how to build different sets of sections for desktop and mobile without using an app (link provided).

Feedback/Results:

  • Another participant confirmed the video method works on the Dawn theme for Multi-Row and Multi-Column sections, even for users uncomfortable with code.
  • A pricing question was asked; no public quote shared.

Status: Actionable guidance and a tutorial are available; at least one user reported success. No formal “accepted” solution noted, but the thread appears effectively resolved with provided methods and resources.

1

Hi everyone,

I am trying to separate out my homepage layout for the mobile version and desktop version. The main reason being is that for desktop the images are horizontal while on mobile the images are better presented when they are vertical. I have two sets (mobile and desktop) of banners/images with different pixels prepared.

I am currently using DEBUT theme, and having difficulties separating out the layout for mobile and desktop.

https://cleanara.store/ this is the link to my store (only mobile view now).

Could someone please teach me how I could configure this (either by coding or in the setting) so that my website can display desktop layout if someone uses PC and mobile layout if someone uses mobile/tablet?

For instance,

If mobile / tablet device, then show image A, B and C

If PC device, then show image X, Y, and Z.

Thank you!

2

Hi, this would be quite a lot of work to describe here in detail, so I will give you a summary and then you can research each step:

  1. In all the sections where you want to have different image in mobile and desktop, you will have to add a new field for the mobile image by editing the section’s schema.
  2. Then you should output that mobile image above or below the desktop image. You should add a different css class to this new image, for example image–mobile.
  3. In your css you will have to use css media queries to hide the desktop image in mobile and hide the mobile image in desktop

If you struggle with this at Peanut Butter we can help you accomplish this. Write to hello@peanutbutter.es and we can give you a quick estimate for the work.

3

@kheum1105 did you check my suggested solution and were you able to implement it? So you need further help with this?

4

Hey Peanutbutter,

In fact, I did send you an email on 19 Jan. Have you had a look at the email?

5

Sorry @kheum1105 went into the spam folder and I missed it… just answered

6

For anyone who is looking for answers on this question, yes this is doable with different set of sections for desktop and different set of sections for mobile. No app is being use here. Just follow the video tutorial below.

7

MAY I ASK HOW MUCH YOU WERE QUOTED?

8

Thank you! I used this on the Dawn theme for Multi-Row and Multi-Column sections, and it works beautifully! I am totally intimidated by code, but I was able to follow the video.