Store setup
Navigation and mega menu
Set up the header menu, turn dropdowns into a mega menu with images, and configure the mobile menu and announcement bar.
Vellora builds its navigation from your Shopify menus. A menu with one level shows plain links, a menu with two levels shows dropdowns, and a menu with three levels becomes a mega menu.
Create the main menu
- In your Shopify admin, go to Content > Menus.
- Open Main menu (handle
main-menu). The header uses this menu by default. - Add top level items, such as Shop, Collections, Journal and About.
- To nest an item, drag it under another item. Nested items appear in that item's dropdown.
- Click Save.
To use a different menu, open the theme editor, select the Header section and choose it under Menu.
How menu levels display
| Menu structure | Desktop | Mobile |
|---|---|---|
| Top level item only | A plain link | A link in the menu drawer |
| Top level + one nested level | A dropdown list | An expandable row with a "View all" link |
| Top level + two nested levels | A full-width mega menu with column headings | Nested expandable rows |
| Any item with a Menu images block | A full-width mega menu with images | Images at the bottom of the drawer |
In the mega menu, second level items become column headings and third level items are listed under them.
On desktop, dropdowns open when a customer points at the menu item, and with the arrow button next to it for keyboard and touch users. Escape closes an open dropdown.
Add images to the mega menu
Each Menu images block adds up to two images with titles to one dropdown.
- Open the theme editor and select the Header section.
- Click Add block and choose Menu images.
- Under Menu item, enter the title of the top level item exactly as it appears in your menu, such as
Shop. - Add a First image, First title and First link, and the same for the second image.
Adding a Menu images block to an item turns its dropdown into a mega menu, even if the menu only has two levels.
The mobile menu drawer shows the images from the first Menu images block only, and only the images that have a title.
Header settings
| Setting | What it does |
|---|---|
| Desktop layout | Logo on the left with the menu beside it, or Logo in the center with the menu on the left and the icons on the right. |
| Menu | The menu shown in the header and the mobile drawer. |
| Menu style | Text, or Pill, which places the menu in a rounded bar. |
| Keep header visible while scrolling | Makes the header sticky. |
| Show bottom border | Adds a line under the header. |
| Show search | Shows the search icon, which opens the search panel. See Search. |
| Account menu | The menu shown in the customer account sheet. See Customer accounts. |
| Show country selector, Show language selector | Adds the selectors to the header. They appear only when your store has more than one country or language. |
The logo itself is set in Theme settings > Logo and favicon. All header settings are listed in the Header reference.
Mobile menu
On small screens the menu moves into a drawer that opens from the left. It includes your main menu, the first set of menu images, the country and language selectors (when your store has more than one of either) and your social media icons from Theme settings > Social media.
Announcement bar
The Announcement bar sits above the header.
- Select Announcement bar in the header group.
- Add up to six Announcement blocks, each with text and an optional link.
- Turn on Rotate announcements automatically and set Change announcement every to control the speed.
- Use Text on the left for a short line shown on desktop only, such as a phone number.
See the Announcement bar reference.
Footer menus
The Footer section shows menus with Menu blocks. In every preset it has two: Shop shows main-menu and Help shows footer. New Menu blocks show footer until you pick another menu. Add more Menu blocks for other menus, such as Help or Company, and create those menus in Content > Menus first.
Tips
- Keep top level items short. With the centered logo, the menu shares the row with the logo and icons, so four or five items fit best.
- Link every top level item to a page, even when it has a dropdown. Customers can click the item itself, and the mobile drawer shows it as "View all".
- Use images that look good in a landscape crop. The mega menu shows them at a 4:3 ratio.