Squarespace 7.1 - Product Page Customization

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!

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.

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. 

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

My testing

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?

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?

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.

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?