Solved

How to display product images as circular and not default square

Jackzavelli
Excursionist
34 0 3

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

 

Accepted Solution (1)
OTM
Shopify Expert
696 170 252

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!

View solution in original post

Replies 12 (12)

OTM
Shopify Expert
696 170 252

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!
Jackzavelli
Excursionist
34 0 3

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
Shopify Expert
696 170 252

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!
Jackzavelli
Excursionist
34 0 3

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

GenevaSpace
Tourist
4 0 3

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
Visitor
1 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

slimesweetpea
Visitor
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

zarmeena
New Member
8 0 0

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
Tourist
9 0 1

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
Excursionist
42 0 11

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

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

For this example

sambhavjain0123
Visitor
2 0 0

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

AaronMPG
Tourist
9 0 1

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.