Jump to content

Masonry layout on SHOP page in 7.1

Recommended Posts

I would like to achieve masonry like gallery layout in Shop on my site using 7.1
The first image is my site now.. the second image is what I would like it to look like (that is a summary block work around which I cannot use).
Can anyone help me with custom code?
TIA!!!

 
open?upn=w7PUjKfEXCFRljPNlARycOppfV6Dtwv
 
 
 

 
 
 

SHOP_this.jpg

summaryblock.jpg

Edited by photogjimi
tags
Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 7 months later...
12 minutes ago, stim said:

Did you ever find a solution to have the squarespace shop display using a masonry grid?

Product List Pages (PLPs) do not have a Masonry Grid option.

Have you tried using a Summary Block?

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Hi paul, thanks for the answer. Yes I have been experimenting with summary blocks but you do not have the category filter function with these (as far as I can tell) and the bread crumbs also do not work...for example, if you click on a product in a summary block, the bread crumbs would lead the customer back to the print shop and not back to the page with the summary block in it. Any suggestions here?

Link to comment
On 1/31/2022 at 12:54 AM, stim said:

Hi paul, thanks for the answer. Yes I have been experimenting with summary blocks but you do not have the category filter function with these (as far as I can tell) and the bread crumbs also do not work...for example, if you click on a product in a summary block, the bread crumbs would lead the customer back to the print shop and not back to the page with the summary block in it. Any suggestions here?

With filter, you can use Filter plugin

With breadcrumbe, if you share link to a product, I think we can add some code to change this.

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.