Re: How to make collection list image a circle

How to make collection list image a circle

doorstepdrip
Excursionist
45 0 10

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

to this:

461D3D7A-6DB5-4C7D-857C-7898955F39D6.jpeg

any help would be very much appreciated:)

thanks (studio theme)

saon
Replies 11 (11)

Moeed
Shopify Partner
4368 1123 1380

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

 

Capture.PNG

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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: 
  • Ribe_Dagandara_0-1686161061198.png

    I hope it help. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
hetdedhia
Excursionist
10 0 4

Screenshot 2024-04-16 131448.png

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
Shopify Partner
6961 1656 2041

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
hetdedhia
Excursionist
10 0 4

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

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
hetdedhia
Excursionist
10 0 4

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

hetdedhia
Excursionist
10 0 4

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

dpfuenza
Excursionist
11 0 0

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

cheers!

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
dpfuenza
Excursionist
11 0 0

Great! Will try it and then let you know.