Goal: show collection images as circles on the Artists page and as squares on the Fabrics page without editing the source photos.
Proposed CSS (add via theme settings or section Custom CSS):
Alternative suggestion: round the container
Implementation note: ensure added styles in the Collection template are wrapped with ….
Attachments: multiple screenshots illustrate the CSS targets and results; links to the Artists and Fabrics pages were provided for context.
Status: no confirmation of implementation yet; solutions supplied, discussion appears open.
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?
And on the fabrics page we’re trying to restrict them to a square, Fabrics - Ikuntji Artists Aboriginal Corporation
You can add this code to Custom CSS in theme settings
.collection-list__thumbnail .product-wrap {
border-radius: 50%;
background: #000;
}
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 :) */
}
