Jump to content

Adding Black Border around images on my Shop page

Go to solution Solved by tuanphan,

Recommended Posts

I have a series of images showing on my Shop page, and I would like to have a black frame around the images (of the products). Being a complete beginner in the field, I was wondering if anyone could advise (step by step if possible) how to do this please. Thank you in advance.

Screenshot 2023-03-25 150853.png

Edited by sjkwon
Link to comment
  • sjkwon changed the title to Adding Black Border around images on my Shop page
  • Solution
On 3/30/2023 at 9:01 AM, sjkwon said:

Add to Design > Custom CSS

/* Shop image border */
.products.collection-content-wrapper .grid-item figure {
    border: 3px solid black;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/9/2023 at 6:16 AM, sjkwon said:

Thank you so much! Would I be able to use a similar Custom CSS to create the same black border around ALL images on different pages of the website (links below), please?  We would like to have border around all images of products with white background.

https://www.renamegoods.com/

https://www.renamegoods.com/shop/p/ummm-errrr-ahhhh-eco-tote-bag

Use this new code

/* Shop image border */
.products.collection-content-wrapper .grid-item figure {
    border: 3px solid black;
}
/* homepage */
body.homepage a.grid-item {
    border: 3px solid black;
}
/* products */
div.ProductItem-gallery-slides {
    border: 3px solid black;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.