How to display product images as circular and not default square - Expressions Theme

Solved
loveelle
New Member
1 0 0

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.

www.loveelleboutique.com

 

thanks 

0 Likes

This is an accepted solution.

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

2021-07-22 12_36_34-Love Elle Boutique.jpg

 

 

 

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like ?? if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Pallavi
Shopify Expert
2235 370 484

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Natztech
Shopify Partner
1385 389 944

This is an accepted solution.

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes