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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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