Solved

Dawn Theme Collection Grid Display To Circle

dreamtechzone_5
Shopify Partner
168 1 20

Hi, can anyone please tell me 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? Thank you.

My store URL: https://urbanglowingstore.myshopify.com/

Password: Admin

 

 

 

Screenshot 2023-08-14 205358.png

Accepted Solution (1)

Emirates7
Shopify Partner
214 50 40

This is an accepted solution.

Hi,

Open a file assets/base.css and add below code at the end:

 

.collection-list .card__inner.ratio {
--ratio-percent: 100% !important;
}
.collection-list .card {
background: none !important;
}
.collection-list .card * {
color: #000 !important;
}
.collection-list .card .media {
border-radius: 1000px !important;
-webkit-border-radius: 1000px !important;
-moz-border-radius: 1000px !important;
}

View solution in original post

Replies 6 (6)

Emirates7
Shopify Partner
214 50 40

This is an accepted solution.

Hi,

Open a file assets/base.css and add below code at the end:

 

.collection-list .card__inner.ratio {
--ratio-percent: 100% !important;
}
.collection-list .card {
background: none !important;
}
.collection-list .card * {
color: #000 !important;
}
.collection-list .card .media {
border-radius: 1000px !important;
-webkit-border-radius: 1000px !important;
-moz-border-radius: 1000px !important;
}
dreamtechzone_5
Shopify Partner
168 1 20

Thank you so much, Sir! It worked. How can I reduce the size of the image?

Also, I want to keep the collection name within the radius button.

Emirates7
Shopify Partner
214 50 40

Try this code:

.collection-list .card__inner.ratio {
max-width: 150px !important;
margin: 0px auto;
}

 

Regarding the collection name. Can you explain it in more details? I am not sure what do you mean.

dreamtechzone_5
Shopify Partner
168 1 20

I want the collection list text to be centered in the mobile version.

 

367426114_989039375673144_563162683172475376_n.jpg

dreamtechzone_5
Shopify Partner
168 1 20

I want to reduce the size of the images as well. Thank you, Sir!Screenshot 2023-08-15 001009.png

sakinur-rahman
Shopify Partner
125 16 19

You may also follow this specific Shopify Circle Menu.

Link: https://www.devluxx.com/products/shopify-circle-menu-collections

 

Shopify Circle Menu Circle Collections(1).png

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications -

Your Coffee Tip and my code, A perfect blend. ❤️ Buy Me A Coffee


Website: HelloSakin.com