How To Make Header Dropdown Menu Rounded Corners In Shopify - eCommerce Thesis

How To Make Header Dropdown Menu Rounded Corners In Shopify

Want to give your Shopify store a sleek, modern look? In this tutorial, I’ll show you how to easily add rounded corners to your header dropdown menu—no advanced coding required! Whether you’re using Dawn, Debut, or a custom theme, this tweak instantly makes your navigation look more polished.

✨ Why Rounded Corners?

✅ Modern Aesthetic – Soft edges make your site feel more inviting and professional.
✅ Better UX – Smoother visual flow improves navigation experience.
✅ Brand Consistency – Match your dropdowns to your site’s rounded buttons/cards.
✅ Works on Mobile – Responsive design keeps it clean on all devices.

.header__submenu.list-menu {
  border-radius: 12px;
  overflow: visible !important;
  box-shadow: 0 6px 20px rgba(var(--color-foreground), 0.1), 
              0 2px 8px rgba(var(--color-foreground), 0.06);
  padding: 8px;
}