How to switch to single item view on mobile for better product display?

[bootik54]

Hey everyone,

I've noticed that you can't really see the details of my clothing pieces when scrolling through my shop on mobile, because the pictures are too small. I was looking at the Balenciaga Webshop and they have a button to switch to a single item view. I'm looking for a theme which includes this feature or code that could achieve this, in case there's no theme. Thanks for the help! ( Currently using Debut Theme 11.3.1)

[Hardik29418]

@bootik54  My experience says that it will need some coding to achieve this feature. So, I will need Shopify Access to implement this kind of design in Debut theme.

[PageFly-Oliver]

Hi @bootik54 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media screen and (max-width: 749px){
#product-grid{
column-gap:0 !important
}
#product-grid .grid--2-col-tablet-down .grid__item {
    width: 100%;
   
}
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly