HeatherCL Posted November 17 Posted November 17 Site URL: http://www.byspiritofsalt.com/shop/wrappingpaper Hello - Is there a way to force mobile product pages to maintain the desktop 2-column layout? I have some products with lots of product photos and it takes forever to scroll through them on mobile to reach the product information. Example: https://byspiritofsalt.com/shop/wrappingpaper Additionally, products such as that one have multiple color options, and on desktop when you click the color option in the dropdown it moves the featured color image to the top, which is great. However on mobile there is no way to see what images correspond with the chosen color. My thinking is the easiest solution for both problems is to just keep the same layout as desktop.
Squareko Posted November 17 Posted November 17 Add below code to pages>web tools>custom css: /* Force 2-column layout for product pages on mobile */ @media (max-width: 767px) { /* Container for product details and images */ .ProductItem-details, .ProductItem-gallery { width: 50%; float: left; box-sizing: border-box; } /* Ensure images stay contained within their area */ .ProductItem-gallery img { max-width: 100%; height: auto; display: block; } /* Clear floats after gallery and details */ .ProductItem-details:after, .ProductItem-gallery:after { content: ""; display: table; clear: both; } /* Adjust product description to fit into the half-column */ .ProductItem-details { padding: 10px; } /* Optional: Ensure dropdowns and other content don't overflow */ .ProductItem-details select, .ProductItem-details input, .ProductItem-details button { width: 100%; } } Additional Adjustment for Color Selection Image Switching on Mobile: Add below code to pages > web tools > custom css: /* Highlight the current selected color image */ .ProductItem-gallery img.active { border: 2px solid #000; /* Example: black border for active image */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
HeatherCL Posted November 17 Author Posted November 17 Thank you so much! This worked great and I see the two columns now - however, the product description and everything still gets pushed down below the image gallery. Is there any way to get it to appear side by side with the images, like the product name does?
paul2009 Posted November 17 Posted November 17 15 hours ago, HeatherCL said: Is there a way to force mobile product pages to maintain the desktop 2-column layout? I have some products with lots of product photos and it takes forever to scroll through them on mobile to reach the product information. Rather than using code, have you considered using a different layout for your Product Detail Page (PDP), so that images don't use up vertical height on mobile devices? For example, they can be stacked and scrolled left/right 🙂. Did this help? Please give feedback by clicking an icon below ⬇️ Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
HeatherCL Posted November 17 Author Posted November 17 @paul2009 Thanks for the suggestion! I am still on Squarespace 7.0 so I don't think that feature is available to me until I migrate to 7.1 - which I should probably do at some point, I'm just putting it off since I'd have to redo my site as a whole.
paul2009 Posted November 17 Posted November 17 4 hours ago, HeatherCL said: I am still on Squarespace 7.0 so I don't think that feature is available to me until I migrate to 7.1 Ah I see. On version 7.0 you can choose the Design: Slideshow option in Site Styles, but it's a tradeoff because it will affect both mobile and desktop pages, so you'd lose the stacked look on desktop. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment