Hey!
I know I need to put border-radius: 50% in my code to make the images round but I don’t know where in my code. I’d like all the images- or at least home page, to have round images of the products.
thanks
Topic summary
Goal: Make product images appear circular (Expressions theme), ideally on the homepage.
Key solution (CSS):
- Add border-radius: 50% to the image element.
- Examples provided:
• Global: .rimage__image { border-radius: 50%; }
• Homepage-only: .template-index #shopify-section-1587414592168 img.rimage__image { border-radius: 50% !important; }
• Variant: .template-index div#shopify-section-1587414592168 img { border-radius: 50% !important; }
Where to add it in Shopify:
- Online Store > Themes > Actions > Edit code > Assets > theme.scss.css (or theme.css), paste at the bottom.
Important caveat:
- For a proper circle, product images must be square (1:1 aspect ratio). Non-square images produce uneven/oval results; a screenshot was shared to illustrate this.
Resources:
- A YouTube tutorial link was shared demonstrating how to add border radius.
Open question:
- Whether the same approach works for the Ella theme was asked; no direct answer provided.
Status:
- Multiple workable CSS approaches suggested; no single confirmed resolution from the original poster.
Hi,
you can add this code to your theme.scss file
.rimage__image {
border-radius: 50%;
}
but in order to have a nice design, it is important that all your images has a square factor, 1:1 ratio, otherwise the result will not be pleasant and you’ll get something like this
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:
.template-index div#shopify-section-1587414592168 img {
border-radius: 50% !important;
}
hello @loveelle
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-index #shopify-section-1587414592168 img.rimage__image {
border-radius: 50% !important;
}
Hi,
Can you help me please with this …
Is the solution same for Ella theme ?
Thanks
We can add border radius:
