NaamNom Posted August 9, 2020 Share Posted August 9, 2020 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 Link to comment
christyprice Posted August 9, 2020 Share Posted August 9, 2020 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. christyprice.com 🇺🇸 Austin, TX US Best Squarespace Plugins • Resources for Designers • Make Money with your Blog ✅ Download a FREE Squarespace Prelaunch Checklist Link to comment
JAADOOGEMS Posted November 22, 2021 Share Posted November 22, 2021 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
christyprice Posted November 22, 2021 Share Posted November 22, 2021 @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/ christyprice.com 🇺🇸 Austin, TX US Best Squarespace Plugins • Resources for Designers • Make Money with your Blog ✅ Download a FREE Squarespace Prelaunch Checklist Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment