Creating a separate homepage layout for Mobile vs Desktop

kheum1105
Visitor
2 0 0

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!

Replies 7 (7)

PeanutButter
Shopify Partner
385 67 182

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.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
385 67 182

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
kheum1105
Visitor
2 0 0

Hey Peanutbutter,

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

PeanutButter
Shopify Partner
385 67 182

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Dbro
Visitor
2 0 0

MAY I ASK HOW MUCH YOU WERE QUOTED?

made4Uo
Shopify Partner
3821 716 1151

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.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
coloradodave
Visitor
1 0 0

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.