Jump to content

Changing the shape of images and product images

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

You can target the images with CSS. For your home page product images, add this to Design > Custom CSS to make them circular. The collection specifies the page and then the code specifies images in the product block.

#collection-5ef925025708dc5cb9e01f4b .product-block .image-container img {
    border-radius: 50%;
}

For other images, you can specify the block (I use the first plugin in this post: https://christyprice.com/squarespace-tips-tricks/chrome-extensions-squarespace-designers) and then set the border radius.

Link to comment
  • 1 year later...
On 8/9/2020 at 8:14 PM, christyprice said:

You can target the images with CSS. For your home page product images, add this to Design > Custom CSS to make them circular. The collection specifies the page and then the code specifies images in the product block.

#collection-5ef925025708dc5cb9e01f4b .product-block .image-container img {
    border-radius: 50%;
}

For other images, you can specify the block (I use the first plugin in this post: https://christyprice.com/squarespace-tips-tricks/chrome-extensions-squarespace-designers) and then set the border radius.

Hello, is their a way to chnage product images and summary images to display as a shield shape. Their is a feature for images directly yo change shape but i would like them all to match

Link to comment

@JAADOOGEMS I don't have the code for this offhand, so many someone else can jump in with it. You could try something like https://www.clairecodes.com/blog/2018-10-25-drawing-a-shield-with-one-div/

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.