Topic: Make mobile product image layout resemble desktop collage.
Constraint: Mobile screens are narrower, so an identical desktop-style collage would look cramped/ugly. Solution proposed: use a slideshow on mobile instead of mirroring the collage.
Actions taken: Merchant added a slideshow. Helper advised creating separate slideshow sections for mobile and desktop, then using CSS in theme.liquid (Shopify’s main theme file) to hide/show per device.
Decision: Keep collage for desktop; use a slideshow for mobile only. Helper provided code (added before ) to hide the mobile slideshow on desktop and to hide the collage on mobile.
Iterations/fixes: Updated CSS to remove grey edges, hide the slide counter/controls, and round image corners. Advised adding a Buy button by setting button text and linking the product within the slideshow settings. Guided deletion of an extra slideshow and ensured the collage is removed on mobile.
Outcome: Mobile slideshow displays with rounded corners; desktop collage remains; mobile collage hidden. Merchant confirmed satisfaction.
Notes: Screenshots were central to illustrate layout differences and styling issues. Thread appears resolved.
Hello there
My Name is Marko and I need Your Help!!!
I Like the way of how my photos are layed out on the desktop but the Phone verison dosent look like the Desktop verison.
But on the Phone it looks like this
I would like it to be layed out the same way it is like in the desktop version.
Is that possible?
heres my URL: https://santa-slippers.com/
I would really appreciate if someone can help me out with that
Friendly regardes
Marko
Widht of the mobile is smaller than desktop and it will look a little ugly like this if you want it appear the same in mobile
Is it possible then to make a slide show of photos on the phone and keep the layout on the Desktop?
It is possible.
Do you think you could help me with that?
I would really appriciate it.
Sure, where is your slide show?
I dont have it jet but I can add it now, will it be also visible on the Desktop then? Bacause i only want to have it on the Phone version?
Alright so i have added the slide show now. It is currently only two pictures but it wil be more. The slideshowe is on the bottom btw. Thank you very much
Hi @Luburic
Your slideshow image now looks good on mobile. I recommend you add 2 slideshow sections, one for mobile and one for desktop and then I can make desktop’s slideshow hide on mobile and vise versa so you can upload image for each device instead. Of please design image fit with your desktop then I can make slideshow on mobile appear as layout on desktop for you
Do I have to make a Slideshow on Desktop or can I just make one for mobile and hide it on the desktop? And how can design my image fit?
You can make one for mobile, and I can hide it on the desktop for you. Do you want to hide this current slideshow on desktop?
Yes i want it to be hiden on Desktop but visible on phone.
Go to your Online store > Themes > Edit code > open theme.liquid file, add this code before tag
Thank you there are still two little problems dough
The edges are for some reason grey
and can you delet this part ?
An one more thing can you somehow insert a BUY button directly under it?
Please update code to this
About Buy button, you can do that by add text to button and add link of product to button of slideshow
That actually didnt work because I want the images rounded off and the thing where it counts the images is still there
And can you delet the Collage from the phone version now because we dont need it anymore
Thank you it is now rounded off but The collage is still there
this one btw
Can you delet this one from the phone version
