Shopify themes, liquid, logos, and UX
I have a regular Shopify collection product grid that looks like this:
I'd like to make it look more this feed (e.g. Pinterest-style grid, eliminating the white space under product 1, 2, 4 and 5):
Desired Product Grid Alignment
How can I do that? I'm using the Taste theme, this is the link to my collection page: https://ragtag.style/collections/tag-hips-curves
Below my grid css right now:
.grid { display: flex; flex-wrap: wrap; margin-bottom: 2rem; padding: 0; list-style: none; column-gap: var(--grid-mobile-horizontal-spacing); row-gap: var(--grid-mobile-vertical-spacing); } @media screen and (min-width: 750px) { .grid { column-gap: var(--grid-desktop-horizontal-spacing); row-gap: var(--grid-desktop-vertical-spacing); } } .grid:last-child { margin-bottom: 0; } .grid__item { width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4); max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); flex-grow: 1; flex-shrink: 0; height: flex; }
Fair bit of work here, you'd have to remove flex for grid.
Here is a codepen that achieves it
https://codepen.io/MAB015/pen/MBaRXO
You might be best off hiring a developer to do this if you aren't familiar with CSS grid.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024