How to turn square images to circular images for collections in homepage (debut)

Hi,

I’m wondering if it’s possible to turn square images to circular images for the collection photos in homepage (debut theme)? I’ll give an example.

This is how it appears now.

I’m looking to get it like this.

Is this possible to do?

Kind regards,

Pernille // NOIIA

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

#shopify-section-1622902321b3b57baf .collection-grid-item__overlay {
    border-radius: 50%;
}
3 Likes

@oscprofessional

Ah fantastic! Thank you so much!

Do you by any chance know how to add the store logo in the footer area?

Like this

But I’m looking to have it placed on the right side, like this

Hi

watch this video, you will have your solution

https://www.youtube.com/watch?v=hWTIwGhAYko

1 Like

Hi, Can this also be performed in the prestige theme? And only for the top collection? Thanks

This did not work for me:( I’m using Debut theme, copied the code, followed the instructions for placement - nothing changed,

What do i need to do differently?

Thanks!

Hey there! I was wondering how i could do this exact thing on my theme. www.modboutiquevw.com

But I want them to appear on mobile only at the top of my website just like they do on my app. Photo attached.

can you help me?

@Modboutique

Welcome to the shopify community.

Definitely we will help your for this issue, Its a time consuming task. If the theme does not have this feature. then we will implement this feature in your store with current theme.

we have to check your file structure and code. you have to give us for store access.

We will test this in to all screen then will deliver this for you. You can directly get connected with me via email or what’s app.

we can discuss there.

Hello, I am having same issue, I’ve tried different codes to make my featured collection smaller and the images circular, but nothing seems to work. I have currently used the Dawn theme. Any suggestions appreciated. Here’s is my layout so far.

@JGilyard ,

Share the store URL.

Hi,
I came across your solution to turn square collections into circles and tried to do it for my current theme. Unfortunately, it isn’t taking, I can input the coding but when it saves there is no change.

You can make collection slider images circular: