How to display product images as circular and not default square

Solved
Highlighted
New Member
11 0 0

Hi,

Please could you help me with this,

I am using the theme "Debut" and I want to display the images in a circle format oppose to the default square. Is this possible? please help!

Many Thanks

 

0 Likes
Highlighted
Shopify Expert
667 170 226

Hi, @Jackzavelli ,

This is Evita from On The Map.

 

If you know a little bit of CSS, then you need to add border-radius: 50% to image class name. If you don't know how to do it, then add your store URL and I will check what to what class names you need to add border-radius. 

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
11 0 0

Hi @OTM ,

 

Thank you for your response,

 

Unfortunately, I cannot provide the URL at the moment but I am using the standard debut them, at the moment I have the images in grid view working (returning as circular) by using:

 

.grid-view-item__image-wrapper .grid-view-item__image {border-radius: 50%;}

But can you advise how do i make all other images circular as well please?

 

e.g. collections on the home page and clicking into the product page.

 

Many Thanks 

0 Likes
Highlighted
Shopify Expert
667 170 226

This is an accepted solution.

For product page at the bottom of collection add this:

 

.grid-view-item__image {
    border-radius: 50%
}

For product image:

 

.product-featured-img {
    border-radius: 50%;
}

And if you want ALL images in circular:

 

img {
   border-radius: 50%;
}

And if you want to exclude some images then you can add this

img:not(.class-name) {
   border-radius: 50%;
}

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
11 0 0

Hi @OTM ,

 

Thank you for providing this,

 

It works perfectly.

 

I have one more question, by default if you use collection on the home page it creates a square box with the collection nam in the middle of the image. While the image of the product appears in the background there is still a grey square box. How can I change this to circular or completely remove the grey square please?

 

So I just want it to say "Resident" going through the middle and for the square to be transparent or removed.

Many Thanks1.png

0 Likes
Highlighted
Tourist
4 0 2

Hi, where do i have to go to pase the code? is it under Theme>> Edit code>> . where do we have to go exactly to copy and paste the code. Thanks

2 Likes
Highlighted
New Member
1 0 1

Hi, where do i have to go to pase the code? is it under Theme>> Edit code>> . where do we have to go exactly to copy and paste the code. Thanks

1 Like
Highlighted
New Member
1 0 0

Hi, where do i have to go to pase the code? is it under Theme>> Edit code>> . where do we have to go exactly to copy and paste the code. Thanks

0 Likes