sparkles2.png

Product Images - Make Circular

 

This effect will force all products and images on category pages to appear round.

 
 
 

See the effect in action

 
Screenshot 2021-07-08 at 17.32.18.png
 
 
 

How to use the Effect

Head to your 'edit CSS' section of Blocklab, paste in the below code, hit 'Save' and then publish the site on the front end for the code to take effect.

 

CSS

#shop #blocklab-category-page .product .product-block-inner > div > .row > div > .row > div > div > a:first-of-type {height: 253px !important}
#shop #blocklab-category-page .product .product-block-inner > div > .row > div > .row > div > div > a > img { height: 100%; width: 100%; border-radius: 50%; object-fit: cover;}