How to add a border to a product in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit insidethesquare.co/themes

In this Squarespace tutorial, we’ll use some clever CSS to add border to a product image in your Squarespace storefront. We'll also use a border radius code to curve the corners, and a box shadow code to lift it off the page. Last but not least, we'll change up the border color and shadow on a hover!

This code is meant to be changed, so get creative with the colors and all the other codes to match your site style. Borders are SUPER customizable - learn about all your options at insidethesquare.co/border

---

Here is the code example from this tutorial:

.products.collection-content-wrapper .grid-item .grid-image{
border: 1px solid #000;
border-radius: 15px;
box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.1)
}
.products.collection-content-wrapper .grid-item:hover .grid-image{
border-color: red! important;
box-shadow: none!important; }

I use this free Chrome extension to grab block id’s; not affiliated - just a fan!