How to display product images as circular and not default square

[Jackzavelli]

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

[OTM]

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

[Jackzavelli]

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 

[OTM · 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%;
}

[Jackzavelli]

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 Thanks

[GenevaSpace]

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

[Mar2]

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

[slimesweetpea]

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

[zarmeena]

hi, i only want to display one image as circular on my home page. where do I add the css for image with text. https://jywpmw3p3haxgc49-49960190121.shopifypreview.com

[AaronMPG]

Go to the online store. Select the "customize theme" buttom. Most likely just says "Customize". Select the section in the task bar on the left where the image is at. Scroll to the bottom where it says "Custom CSS", add the code there. 

[jrltrend]

Hello! Where can i see the (class-name) of the picture?

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

For this example

[sambhavjain0123]

How to display product images as circular and not default square with proper LOCATION

[AaronMPG]

From Online Store: Customize Theme. Select the section in the task bar on the left where the image is at. Scroll to the bottom where it says "Custom CSS", add the code there. 

[MRamzan]

You can try this solution. It supports all the themes: