How to make collection list image a circle

Store Design
, , ,
1

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:

C20771F3-E1D4-4964-BA17-14330FED1259.jpeg
C20771F3-E1D4-4964-BA17-14330FED1259.jpeg828×1077 82 KB

to this:

461D3D7A-6DB5-4C7D-857C-7898955F39D6.jpeg
461D3D7A-6DB5-4C7D-857C-7898955F39D6.jpeg828×768 63.9 KB

any help would be very much appreciated:)

thanks (studio theme)

1 Like
2

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 tag.
{% if template == 'index' %}

{% endif %}

Capture.PNG
Capture.PNG1900×961 207 KB

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

Best Regards,
Moeed

3

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%;
}
1 Like
4

Collection List View after adding your code. Theme: Dawn
Collection List View after adding your code. Theme: Dawn1897×737 182 KB

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?

2 Likes
5

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!

6

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

1 Like
7

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:

Made4uoRibe_0-1713302069304.png
Made4uoRibe_0-1713302069304.png1363×723 121 KB

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

1 Like
8

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

9

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

10

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

cheers!

11

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!

1 Like
12

Great! Will try it and then let you know.

13

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

14

Add collection list slider circular: