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!