Add Collection to Megamenu ( Shopify Urban Theme )

Hello Everyone!

I want to add more collections under the collection image in the mega menu.
There will be 4 collections per line and there will be no limit to the number of collections added to the mega menu. I am not able to add more than 4 collections now. Also, I want to remove the border line. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

Hi @dreamtechzone_5 For adding more collections under the collection image in the mega menu and removing the borderline, try these steps:

  1. Mega Menu Code Edit

In the theme.css, base.css, or component-mega-menu.css insert the below code

/* Adjust the mega menu grid to allow more collections per row /
.mega-menu__collections {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
gap: 15px !important; /
Adjust spacing between collections */
}

/* Optional: Adjust collection image size */
.mega-menu__collection img {
width: 100% !important;
height: auto !important;
object-fit: cover;
}

  1. Removing the Mega Menu Border Line

Use this code

/* Remove the border line from the mega menu */
.mega-menu__collections,
.mega-menu__collection {
border: none !important;
}

Let me know if these work or need more assistance.

1 Like

I have pasted the code but it is not working.

I still can’t add more than 4 collections.

Hey, Are you there? Please help me. Thank you.