Changing the shape of images and product images

Site URL: https://www.naamnom.com

I would like to make the product images on my landing page (naamnom.com) circular. I would also like to add a separate circular image that is not an product block image... does anyone know how to do this? (that is, instead of a square or rectangle shape...) Thank you!

-Oshri

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.

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

@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/