4 images! like the red line you drew
Topic summary
Goal: add an image above each mega menu item in Shopify’s Dawn theme.
-
Proposed fix: upload 4 images (Content > Files), then add CSS in Assets > base.css:
- Target #MegaMenu-Content-3 li:before to insert an image block (background-size: cover; no-repeat).
- Use li:nth-child(1..4):before with background-image: url(…) for each item.
- This uses a CSS pseudo-element (:before) to display images without editing theme structure.
-
Reported issue (Refresh theme): images also appear on second-level submenu items (inheritance to sublevels). No CSS fix was provided to restrict images to only top-level items.
-
Layout tip: to arrange menu items horizontally, set the header menu style to “megamenu” (not “drawer”) in theme settings. Screenshots of settings were shared.
-
CMS-driven control: a user asked to manage images via the CMS (not by editing CSS URLs) and to target level-2 links and their siblings. No native/theme solution was given.
-
Alternative: Meteor Mega Menu app was recommended; claims quick image publishing via templates (e.g., Prism) for $8/month.
Status: partially resolved. CSS approach works but affects submenus in some themes; CMS-based image management and level-2 targeting remain open without using an app. Screenshots were provided to illustrate menu structure and settings.