Restricting collection images to circles and sqaures

[Ikuntji]

Looking for some css help. We’re trying to get all our collection images to be restricted to a circle image without having to update all our photos. Can anyone help?

Artists

And on the fabrics page we’re trying to restrict them to a square, Fabrics - Ikuntji Artists Aboriginal Corporation

[Dan-From-Ryviu]

You can add this code to Custom CSS in theme settings

.collection-list__thumbnail .product-wrap {
    border-radius: 50%;
    background: #000;
}

[tim_1]

For Artists page, use this into “Custom CSS” of the section:

.collection-list__thumbnail  img {
  border-radius: 100%;
  object-fit: cover !important;
}

For Fabrics:

.product__thumbnail  img {
  object-fit: cover !important;
  object-position: 50% 20%; /* vertical 20% to avoid cutting heads :) */
}

[tim_1]

Also check that added styles on your Collection template are wrapped with <style> and `: