Compatibility: Dawn version 2.5 and lower
For updated code that works with any Shopify 2.0 Free themes, see link here.
A well-designed navigation bar is essential for any website, and Shopify stores are no exception. A mega menu can be a great way to improve the navigation of your Shopify store, especially if you have a lot of products or categories.
What is a mega menu?
A mega menu is a type of drop-down menu that allows you to display a large amount of information in a user-friendly way. This can be helpful for Shopify stores that have a lot of products or categories, as it can make it easier for customers to find what they are looking for.
Why is mega menu used in Shopify websites?
Additional tips
- When creating your mega menu, prioritize organization and clear navigation.
- Use concise and descriptive language for menu items.
- Consider incorporating high-quality images to visually represent your products.
- Leverage the marketing potential by highlighting promotions and new arrivals.
By following these tips, you can create a mega menu that enhances both user experience and marketing efforts on your Shopify store.
Steps on how to add Mega Menu to Dawn theme?
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
Step #2. Open the file and find the code
Under the Sections folder, open the header.liquid file and "menu-drawer__navigation" with <nav> tag and delete the code, replace it with the code below.Step #3. Find the code in the same file.
Find "header__inline-menu", delete the code as shown in the video. Paste the code below.
Step #4. Add the schema
Go all the way down, before the last "]", add the code below.
Step #5. Add a new asset file
Open the Asset folder, and Add a new asset. Name it ''mega-header", and paste the code below. Change the root colors to personalize.
Step #6. Add the stylesheet
In the header.liquid, paste the code at the top. See the video.
Step #7. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #8. Customize theme
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme to add your images. See video on how to add the images. Make sure to SAVE once you are done customizing.
Conclusion
Mega menus offer a valuable combination of improved navigation, a better user experience, and built-in marketing capabilities. If you have a Shopify store with a large product selection or want to incorporate strategic marketing elements into your navigation, a well-designed mega menu can be a game-changer.
Mega menus offer a valuable combination of improved navigation, a better user experience, and built-in marketing capabilities. If you have a Shopify store with a large product selection or want to incorporate strategic marketing elements into your navigation, a well-designed mega menu can be a game-changer.
Copied!
6 comments
Hi,
Please check the compatibility before following the tutorial.
it is not working dawn-9. My website voova.com
Menu isnt showing on mobile
Hi @Ali,
The code might not be working on a newer version of Dawn.
Hi @Phillip,
There should be an option in your theme editor to change the color of the header as shown on the video
Code works for the most part, but the background color seems to be transparent, how can I change that