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

bootik54
Excursionist
28 0 6

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)

 

cd2838bb-104a-4700-a22b-33f3f7361cca.JPG

 

cec9d77e-2aa7-4627-844e-82e1aebdd9f9.JPG

 

Replies 2 (2)

Hardik29418
Shopify Partner
2913 419 1081

@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.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

PageFly-Oliver
Shopify Partner
878 190 174

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.