Want to create a Masonry-style product layout in Squarespace with CSS? In this tutorial, you’ll learn how to do that by using column-count to condense the spacing, override the native grid, prevent item breaks, and make the layout fully responsive across desktop, tablet, and mobile devices.

Squarespace Product pages don’t support mixed image aspect ratios at the moment… but CSS does.
This tutorial shows you how to remove the forced crop, restore native image proportions, and make sure everything works on the live site (not just in edit mode!).

Take a look at how you can customize the Related Products section of Shop pages in Squarespace, with a bit of CSS.

Have you ever wanted to highlight products on a shop page to visually indicate which are new, vegan, on-demand, or up for pre-order, etc? If so, then today’s tutorial is for you!