How to make collection list image a circle

[doorstepdrip]

Hi, I’m wondering how I can make my collection list a circle shape. My website is: doorstepdrip.com

im trying to go from this: 

 

to this:

any help would be very much appreciated:)

thanks (studio theme)

 

[Moeed]

Hey @doorstepdrip 
The section which you're referring is called "Bubble Navigation" and it's a completely different section. You might have to hire a Shopify Developer who can do that for you but I have a similar solution for you which can help you out.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

{% if template == 'index' %}
<style>
.collection-list .media.media--transparent.media--hover-effect {
    aspect-ratio: 1;
    border-radius: 50%;
}
</style>
{% endif %}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @doorstepdrip ,

I understand that you want to make my collection list a circle shape. 

Try this. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "theme.css, styles.css or base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
• And Save.

.collection-list .media.media--transparent.media--hover-effect {
    aspect-ratio: 1;
    border-radius: 50%;
}

• Result: 
• 
  

  I hope it help. 

[hetdedhia]

Hi Made4uo,

The square tile is still visible. How do I get rid of that? Also, how to make it circular only at a specific place, for example, with the code that you shared, all collection lists will become circular. How can we make it circular only for a certain section of a page? 

[Made4uo-Ribe]

Hi @hetdedhia 

Would you mind to share your store URL? The code I have above is for the store of the post owner. Your store would be different. Thanks!

[hetdedhia]

The URL is freshroute.in
The Store Password is freshroute.com

[Made4uo-Ribe]

It was working but you have a color scheme that is grey background. 

Check this code. 

.section-template--15931980775497__collection_list_3krYgy-padding .media.media--transparent.media--hover-effect img {
    border-radius: 50%;
}
.section-template--15931980775497__collection_list_3krYgy-padding .card__inner.color-scheme-2.gradient.ratio {
    background: transparent !important;
}

And Save. 

I only add the circle on the collection only. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[hetdedhia]

For this collection list display, In the mobile view, there are only 2 columns. How can I customise to view 3 columns? 

[hetdedhia]

How can I repeat this for other collection lists on some other pages on the website?

[dpfuenza]

Hi there! Would you include this piece of code for editing the background to TRANSPARENT, in the same base.css?

cheers!

[Made4uo-Ribe]

Hi @dpfuenza 

If the first code your referring to try to add the background: transparent. 

.collection-list .media.media--transparent.media--hover-effect {
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
}

And Save. 

If doesnt work i would need your store URL. Thanks!

[dpfuenza]

Great! Will try it and then let you know. 

[Yokiel]

I am having same problem I made the circles but I still have the background problem can you help me please?