Creating a separate homepage layout for Mobile vs Desktop

English Shopify Shopify Design
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.

1 Like
3

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

1 Like
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

1 Like
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.

3 Likes
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.