Navigation and menus
Fine Print does not store menus itself. You build them in the Shopify admin, then pick them in the theme editor. The header uses one menu for both the desktop navigation and the phone menu drawer. Each Menu block in the footer shows one menu of its own.
Build a menu in Shopify
Section titled “Build a menu in Shopify”- From your Shopify admin, go to Content > Menus.
- Click the menu you want to edit, for example Main menu.
- Click Add menu item, enter a name, choose a link, and click Add.
- To nest an item, drag it by its handle under the item that should hold it.
- Click Save menu.
Shopify lets a top-level item hold two nested levels, so a menu has three levels at most. Fine Print’s header shows all three. Shopify’s guides cover editing menus and drop-down menus.
Set up the header
Section titled “Set up the header”- Go to Online Store > Themes > Customize.
- Click Header in the sidebar.
- Under Menu, choose your menu. The default is Main menu.
- Choose a Layout:
- Inline puts the logo, the menu and the search, account and cart links on one row.
- Logo centered centers the logo on the top row, with the country and language button on its left and the search, account and cart links on its right. The menu runs centered on a second row.
- Split puts the menu on the left, the logo in the middle and the links on the right.
- Add a Logo and set its Logo width. Without a logo, the header shows your store name.
- Choose a Sticky header option. Always keeps the header at the top of the screen. On scroll up hides it while the shopper scrolls down and brings it back when they scroll up. Off lets it scroll away with the page.
Customer account menu picks the menu for the account link, which shows when customer accounts are on in your store. The Header reference lists every setting.
How the header shows each item
Section titled “How the header shows each item”The desktop navigation shows on screens 750 pixels wide and up.
- An item with no nested items is a plain link.
- An item with nested items opens a dropdown panel. The panel starts with a “View all” link to the item’s own link, then lists its second-level items. A second-level item with links of its own shows as a heading with those links under it.
With a mouse, panels open on hover as well as on click. Pressing Escape closes the open panel. While a panel is open, the page behind it dims.
When the top-level items don’t fit on one row, the header moves the ones that don’t fit into a “More” menu, along with their nested links. There is no setting for this.
Add a mega menu
Section titled “Add a mega menu”A Mega menu block replaces the dropdown of one top-level item with a wide panel: up to four link columns and up to two promotions. Add one block for each item that should get a mega menu.
- In the theme editor, click Header, then click Add block and choose Mega menu.
- In Menu item, type the title of a top-level item from your menu, for example
Skincare. The match ignores capitals. - Under First promotion and Second promotion, add an Image, a Label, a Heading and a Link. A promotion shows once it has an image or a heading. Without a link, it links to the top-level item.
The panel turns the item’s first four second-level items into columns. Each column’s heading is the second-level item, linked, and its links are that item’s third-level items. The item needs at least one nested item for the mega menu to open. A block whose Menu item matches no top-level title shows nothing.
If you translate your menu, give the block’s Menu item the translated title as well, since the block compares it with the title in the shopper’s language.
Mega menus show on desktop only. On phones the item opens in the menu drawer like any other. See Mega menu for the block’s settings.
The menu drawer on phones
Section titled “The menu drawer on phones”Below 750 pixels, the header shows a menu button, the logo, and search, account and cart icons. The menu button opens a drawer from the side with the same menu.
The drawer shows one level at a time. Tapping an item with nested items slides to a panel of its links, which starts with a “View all” link and a back button. A second-level item with links of its own opens a third panel the same way. Closing the drawer returns it to the first level.
The bottom of the drawer holds the account link and, when they’re on in the header, the country and language selectors. See Languages and currencies.
Search in the header
Section titled “Search in the header”The header’s “Search” link, and the search icon on phones, open the predictive search panel. Results appear as the shopper types, from the second character on. Before they type, the panel shows your suggested searches and a featured collection. Set these in the Predictive search section, which you find in the Overlays group of the theme editor. See Predictive search.
Announcement bar
Section titled “Announcement bar”The Announcement bar sits above the header. It holds up to six Announcement blocks.
- In the theme editor, click Announcement bar.
- Edit each block’s Message, and add a Link if you want the message to link somewhere.
- Choose a Layout:
- Static shows every message side by side, split by a thin rule. On phones the messages stack.
- Rotating shows one message at a time, with previous and next buttons and a count. Rotation interval sets how long each message stays.
- Ticker runs all messages in a moving line. Ticker speed sets how fast.
A Rotating bar with one message shows as Static. Both moving layouts pause while the shopper hovers over the bar or moves focus into it, and have a pause button. When the shopper’s device asks for reduced motion, and in the in-app browsers of Instagram, Facebook and TikTok, the bar shows only the first message and does not move.
Show a line under the bar draws a line under the bar. The Announcement bar reference lists every setting, and Announcement covers the block.
Footer
Section titled “Footer”The Footer holds up to five blocks:
- Brand shows its own Logo, or your store name without one, Text, and an icon link for each account you set in Theme settings > Social media: Facebook, Instagram, YouTube, TikTok, X (Twitter), Threads, Pinterest, Snapchat, Tumblr and Vimeo.
- Menu shows one menu with an optional Heading. The default is Footer menu.
- Footer text shows a Heading and Text.
- Newsletter shows a Heading, Text and an email field. Shoppers who sign up are added as customers tagged “newsletter”.
To add a footer menu:
- Create the menu in Content > Menus. Shopify stores come with a Footer menu.
- In the theme editor, click Footer, then add a Menu block.
- Choose its Menu, and add a Heading if you want one.
A footer menu shows only the menu’s top-level items. Nested items do not appear, so build footer menus flat. On phones, each Menu block collapses into an accordion that starts closed, with the heading as its title.
The footer’s Layout offers Columns and Compact. Compact hides the headings of Menu blocks on desktop and runs their links on one line.
Under the blocks, a bottom bar shows the copyright line with your store name and these items, each with its own checkbox: Show policy links, Show payment icons, Show country/region selector, Show language selector and Show Follow on Shop.
See the Footer reference for every setting, and the Social media settings for the brand links.