Dawn Theme Collection Grid Display To Circle

Topic summary

A user seeks to transform the Dawn theme’s default square collection grid on the homepage into circular displays.

After receiving initial guidance (details reversed in the post), they successfully implemented the circular shape but encountered additional styling challenges:

Remaining Issues:

  • Reducing image size while keeping collection names within the circular radius
  • Centering collection list text in mobile view
  • Overall image size reduction

Solution Offered:
Another participant suggested a pre-built Shopify Circle Menu product from devluxx.com as an alternative approach.

Status: The basic circular transformation is complete, but fine-tuning for responsive design and sizing remains in progress. The discussion involves CSS customization of the Dawn theme’s collection display component.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.

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

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.

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

I want to reduce the size of the images as well. Thank you, Sir!

You may also follow this specific Shopify Circle Menu.

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