Jump to content

Squarespace 7.1 - Product Page Customization

Recommended Posts

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!

Screen Shot 2022-07-31 at 8.40.20 PM.png

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.

image.thumb.png.44e9be40a423fea5c35792c7a070cec1.png

Edited 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, Keyword Highlighter
If 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
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.

image.thumb.png.44e9be40a423fea5c35792c7a070cec1.png

@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
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

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, Keyword Highlighter
If 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

My testing

image.thumb.png.8a90dbb607af333900a0e96cbcce3e37.png

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, Keyword Highlighter
If 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
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
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, Keyword Highlighter
If 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
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.

Product Page - Accordion Menu.png

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, Keyword Highlighter
If 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.