I’m building a “shop” page that needs to have a “masonry brick” type layout (item images are in different aspect ratio and we can’t crop them because they are artworks). Here is an example what we are trying to achieve: https://www.saatchiart.com/photography
The default “Shop Gallery” only has very limited layout options:
Which is why we tried using Pro Gallery and it does have the “Masonry” layout option:
However the roadblock came when we linked the Pro Gallery to our Product datasheet and we found that it limits the item counts up to 100 which is not feasible cause our product counts is definitely more than 100:
How can we solve this conundrum and achieve what we want on the “Shop” page? Please help!
Hi,
There was an answer to this recently but i can’t seem to find it. You can split the section using a grid too 2 columns (or 4 )on the left side have one store collection and in the right side have another store collection but increase spacing at the top so they are staggered. The downside is that you will have to create additional collections…
Thanks for the idea! Yeah I thought about dividing the datasheet in to three and creating three separate galleries each in one column. However the new issues is since the datasheet is split and we can’t use any sorting function, especially on mobile, the three galleries would stack on top of each other so the sorting would be completely wrong.
@penn I think your set up would be the best way. If the concern with using the gallery to display everything all at once impacting the site performance is the issue, you can set up a deferred dataset . That way once the page is loaded, the content starts loading afterward.
From testing it for a second, in the settings for the masonry layout, you could add a load more button as well so that users can keep loading more items.
That’s actually not too uncommon for stores to be honest.
Hi Roberto, thanks for responding. While I was waiting for answers, a different member of my team has found a way to increase the datasheet limit beyond 100 items, he mention he had to hard-code it or something.
I do have a question regarding the “Load More” button - it is an actual “Lazy Load” feature to reduce page load time? Or is it just a hide/display feature. I can’t seem to get consistent answer so appreciate it if you can shed some light on this please.