skalison Posted August 1, 2022 Share Posted August 1, 2022 Site URL: https://penguin-daisy-j23y.squarespace.com/ Can anyone help me figure out how I can build a product page layout that looks like the attached - 3 images in a grid type format with the product details on the right side? pw: MYNDY123 Thank you! Link to comment
Beyondspace Posted August 1, 2022 Share Posted August 1, 2022 (edited) 3 hours ago, skalison said: Site URL: https://penguin-daisy-j23y.squarespace.com/ Can anyone help me figure out how I can build a product page layout that looks like the attached - 3 images in a grid type format with the product details on the right side? pw: MYNDY123 Thank you! I think you can try using this layout and use some Css code to set the first image has 100% width, the other images have only 50% width of the image wrapper. Edited August 1, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
skalison Posted August 2, 2022 Author Share Posted August 2, 2022 On 8/1/2022 at 12:28 AM, bangank36 said: I think you can try using this layout and use some Css code to set the first image has 100% width, the other images have only 50% width of the image wrapper. @bangank36Thanks! Do you mind sharing how I could do this - I've tried a few things but it's impacting every image and I'm not sure how to separate them. Link to comment
Beyondspace Posted August 2, 2022 Share Posted August 2, 2022 2 hours ago, skalison said: @bangank36Thanks! Do you mind sharing how I could do this - I've tried a few things but it's impacting every image and I'm not sure how to separate them. Try adding to Home > Design > Custom Css .ProductItem-gallery-slides { display: flex; flex-wrap: wrap; justify-content: space-between; } .ProductItem-gallery-slides-item:nth-child(n+4) { width: 48%; } Let me know how it works on your site Support me by pressing 👍 if this useful for you skalison 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted August 2, 2022 Share Posted August 2, 2022 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
skalison Posted August 3, 2022 Author Share Posted August 3, 2022 10 hours ago, bangank36 said: Try adding to Home > Design > Custom Css .ProductItem-gallery-slides { display: flex; flex-wrap: wrap; justify-content: space-between; } .ProductItem-gallery-slides-item:nth-child(n+4) { width: 48%; } Let me know how it works on your site Support me by pressing 👍 if this useful for you @bangank36 This works great!! You are the best. Would you also know how I can position the accordion menu underneath the Add to Bag button? Link to comment
Beyondspace Posted August 3, 2022 Share Posted August 3, 2022 3 hours ago, skalison said: @bangank36 This works great!! You are the best. Would you also know how I can position the accordion menu underneath the Add to Bag button? Where do you want to display it? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
skalison Posted August 3, 2022 Author Share Posted August 3, 2022 13 hours ago, bangank36 said: Where do you want to display it? @bangank36 I've attached a screenshot, but essentially bringing it up below the "add to bag" button to it sits next to the images instead of below them. Link to comment
Beyondspace Posted August 4, 2022 Share Posted August 4, 2022 On 8/4/2022 at 2:25 AM, skalison said: @bangank36 I've attached a screenshot, but essentially bringing it up below the "add to bag" button to it sits next to the images instead of below them. It looks you have figured it out, right? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment