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?

I'm trying to do something similar to this with 4 images in a grid to the left https://lociwear.com/products/womens-oversized-t-shirt?color=black - would anyone have any advice on this?

On 7/25/2024 at 11:46 PM, amypatsalides said:

I'm trying to do something similar to this with 4 images in a grid to the left https://lociwear.com/products/womens-oversized-t-shirt?color=black - would anyone have any advice on this?

What is your site url? We can check easier

Or you can use this code to Website Tools > Custom CSS

/* Desktop Only */
@media screen and (min-width:992px) {
.ProductItem-gallery-slides {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px 5px;
}
.ProductItem-gallery-slides:before {
    display: none;
}
}