Hi, can anyone please tell how can I change in DAWN THEME the Collection Grid display on the Homepage from the default Square shape to a Circle shape like the image below?
Hi, welcome to the Shopify community.
Please share your store URL so I can help with the request.
Hey, here’s the code to achieve the expected results for the collection cards
.card__inner.color-background-2.gradient.ratio {
--border-radius: 50%;
}
Here’s how to apply this code to your theme:
-
Go to Online Store > (click three dots) > Click “Edit code”
-
Search and open base.css file
-
At the end of the file, put the above code
-
Save file and check your store.
1 Like
Hi @bsilva_123 Hope you are doing well
You can achieve this by adding this code at the end of base.css file
.section-collection-list .card--card, .card--standard .card__inner , .section-collection-list .card .card__inner .card__media{
border-radius:50% !important;
}
Here are the steps
Go to online store → theme Click on three dots
search for base.css → open CSS file → go to the end of file and then paste this code.
then Click Save
here is the quick video tutorial how to do the above steps
https://www.loom.com/share/333584ab82214303b12704ab278793ec
Thanks.
1 Like
Hi @bsilva_123 ,
This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Add this CSS at the bottom
Online Store ->Theme ->Edit code
Assets → component-card.css
.card--standard .card__inner {
border-radius: 100% !important;
}
Hope you find my answer helpful!
Best regards,
Victor | PageFly
1 Like
Thank you so much, thats what I wanted but only the top of the collection list I want to be in Circle… The other two sections I want it normal square shape … And there is a way to add in the 1st section a tiny shadow behing the cricles??? If you could help me please!!! The1st section it’s PERFECT!
@bsilva_123 Can you send me the password for this page?
you can enter now vilenkanto.com
@bsilva_123 Your page is asking for a password
1 Like
I already solvedthe problem! Thanks!
1 Like
Hello, this is not working for me. It is still showing the collection images as squares.
Can you please help me too? the code is not working to make the collection images circular