How To Add A Border To A Product in Squarespace // Custom Product Image Border Style in Squarespace

In your Squarespace storefront, you can change the ratio of the product image, but that's about it. This tutorial will help you create a custom border, box-shadow, and even change the shape by rounding the corners that with a little bit of CSS!
- -
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: insidethesquar...
- -
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 insidethesquar...
This tutorial is specific for Squarespace version 7.1 and it won't work for older versions!
- -
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;
}
- -
📑 Download my collection of CSS codes for Squarespace at insidethesquar...
- -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
buymeacoffee.c...
- -
🙋 Need some help? Visit ​insidethesquar... to see my current support options.
- -
🥰 SUPPORT MY CHANNEL → paypal.me/insi...
💻 WEBSITE → insidethesquar...
📧 NEWSLETTER → insidethesquar...
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
💸 DISCOUNT → Save 10% on your first year of Squarespace with code INSIDE10 insidethesquar...
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

[@InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html

[@GuillaumeLsch]

Thanks for this tutorial. I applied it to my shop, but in mobile mode, the border and the border box are there but my image protrudes at the corners. Did I forget something?

[@InsideTheSquare]

Interesting - it sounds like your image got stuck! Try adding this code, changing 15px to whatever border radius value you used:
.products.collection-content-wrapper .grid-item .grid-image img{border-radius:15px}

[@dreazy3683]

is there a way to wrap it around the cost of the item? and add some image blocks in that boarder?

[@InsideTheSquare]

Interesting question! I'm having trouble visualizing what you're trying to achieve. Send a screenshot/mockup to me and I'll see what I can do (support-at-insidethesquare.co)

[@dreazy3683]

@@InsideTheSquare i’ve sent you an email, thank you

[@thepictureroom]

Is there a similar code for creating borders on images/gallery grid? I tried the code you described in this video, but it did not work. Thank you.

[@InsideTheSquare]

Every image type has a unique selector or "code name" This tutorial is written for project images, so unfortunately, it wont work for any other image type. I'd love to reply with the selector you need but there are four types of grids in Squarespace: a gallery grid block, or a gallery section set to grid simple, grid strip, or grid masonry. All four have a unique name 😬 If you're not sure which one it is, feel free to email me a link and I can take a look at your source code to help! support-at-insidethesquare.co

[@Minal50]

Hi,
How do we view the image? In squarespace

[@InsideTheSquare]

I don’t understand your question 🤔 uploaded images are in your asset library. To see it on your site, use that image in the product listing, in an image block, gallery section, background, list item image, or thumbnail for a collection.

[@mcstephens5569]

Help for version 7.0? Trying to do this for my web but unfortunately I haven’t found a way around this yet.

[@InsideTheSquare]

We can totally create this effect in older versions of Squarespace, but you'll need to know your theme so we can use the right codes. Check out this article for more info: insidethesquare.co/themes

[@mariahmaven]

I am in 7.1 but don't see the aspect ratio options when editing a section. I see: Row count, Gap, fill screen, height, and alignment. I'm not sure what I'm doing wrong??

[@InsideTheSquare]

Hey Mariah! It sounds like you're looking at a page section above the products themselves. In edit mode, try to hover your cursor near the title of your store and see if two buttons show up: manage items and edit section. If you click on edit section there, you should be able to edit your store layout. Hope that info helps and best of luck!

[@mariahmaven]

@@InsideTheSquare I'm in a product section where I wanted to make all the images uniform. It looks like I can't use the premade product sections and have to instead add produtct blocks to a blank section to do what you have there for formatting? Thanks for taking the time to respond, I really appreciate it. Your videos are very helpful!!

[@Dee.Viewxoxo]

please how can i just add a border in my picture

[@InsideTheSquare]

There are over 15 types of images in Squarespace, so yu'll need to figure out the image type or use a block id. Here is an article with more info: ruclips.net/video/Z3k1Pzto2WU/видео.html

[@fasilali-u9h]

hot

[@InsideTheSquare]

🔥🔥🔥