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

[MPOPernille]

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

[oscprofessional · Accepted solution]

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

[oscprofessional · Accepted solution]

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

[MPOPernille]

@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

[oscprofessional · Accepted solution]

Hi

watch this video, you will have your solution

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

[tdenney]

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!

[Modboutique]

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?

[oscprofessional]

@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.

[JGilyard]

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.

[oscprofessional]

@JGilyard ,

Share the store URL.

[Bows2Toes]

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.

[LabelSource]

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

[MRamzan]

You can make collection slider images circular: