Nappa Theme documentation
All guides

Header and footer

Set up the announcement bar, header layout, transparent and floating header, mega menu, country and language selectors, customer accounts and footer.

The header and the footer appear on every page. In the theme editor, they sit in the Header and Footer groups at the top and bottom of the section list. Changes there apply to all templates.

Announcement bar

A thin bar above the header for short messages, such as a delivery promise or a return policy. It belongs to the header group.

Let visitors close the bar
Adds a close button. The bar stays closed until you change the messages.
Color scheme
The colors of the bar.

Blocks

Message
Text: kept on one line. Short messages work best on phones. Link: optional, makes the whole message a link.

Up to 6 messages. With several messages, visitors switch between them with arrows or by swiping. Messages never change on their own.

Menu
The main menu. Menus with a third level open as a mega menu on desktop. By default, Nappa uses the menu with the handle main-menu.
Customer account menu
The links shown in the account menu, such as orders and profile. See Customer accounts.
Logo position on mobile Left, Center
Where the logo sits on phones.
Sticky header Always, On scroll up, None
Always keeps the header at the top of the screen. On scroll up hides it when the visitor scrolls down and shows it again when they scroll up. None lets it scroll away with the page.
Show country and language selectors on desktop
Adds the selectors to the header on large screens. They always stay in the footer and in the mobile menu.
Color scheme
The colors of the header.

Header shape and layout

Two settings in Theme settings > Style change the header:

Transparent header

Show over a hero placed first
The header lies over the first section, then turns into a solid bar after a third of the screen.
Text color over the image
Only the text color of this scheme is used, for the logo text, menu and icons over the image.
Logo over the image
Optional. A light version of your logo, shown while the header is transparent.

The header becomes transparent on any page whose first section is one of these:

On other pages, the header stays solid.

Collections shown before typing
Collections listed in the search panel before the visitor types.
Popular searches
Search terms shown as shortcuts. Separate with commas.

The search panel also lists the visitor's recent searches, kept on their device only. See Predictive search.

Mega menu

A mega menu is a large panel that opens under a menu item on desktop. On phones, the menu opens as a panel with up to three levels.

From your menu

When a top-level menu item has a third level, it opens as a mega menu with one column per second-level item. You don't need a block for this. Create the levels in your menu in the Shopify admin. See Drop-down menus in Shopify Help.

A menu item with only two levels opens a simple drop-down list, unless you add a Mega menu block for it.

Mega menu block

In the Header section, click Add block and choose Mega menu. Add one block per menu item.

Menu item
Enter the exact name of a top-level menu item, for example Shop.
Intro text
A short text under the item name, in the first column of the panel.
Collections
Optional. Shown as tiles in the panel, with an image and the number of products, in place of the sub-links of the menu item. The item does not need sub-links: a menu item that is a single link can open a panel this way.
First image, First image label, First image link
A promotional image on the right of the panel. Without a link, the image links to the menu item.
Second image, Second image label, Second image link
A second promotional image.

With a block and a two-level menu item, the sub-links appear as tiles with their collection image and product count.

Country and language selectors

The country selector appears when your store sells to more than one country or region. The language selector appears when your store has more than one published language. Both work without JavaScript.

Set up countries and currencies in Settings > Markets and languages in Settings > Languages in your Shopify admin. See Languages and markets.

Customer accounts

When customer accounts are turned on in your Shopify admin, the header shows an account icon on phones and computers. It opens the Shopify account menu, with sign-in, including Sign in with Shop. The links in this menu come from the Customer account menu setting of the header. See Customer accounts in Shopify Help.

Show payment icons
Shows the icons of the payment methods turned on in your store.
Show policy links
Links to the policies you wrote in Settings > Policies in your Shopify admin.
Color scheme
The colors of the footer.

The bottom of the footer always shows the country and language selectors (when you have more than one), the copyright line with your store name, and the Powered by Shopify link. To hide that link, see the FAQ.

Brand 1 per footer
Show logo: uses the logo from theme settings, and shows the store name when no logo is set. Text: a short description of your brand. Show social media icons: add your accounts in theme settings, under Social media. Show Follow on Shop: a button that lets customers follow your store in the Shop app. Requires Shop Pay to be enabled.
Menu
Heading: defaults to the menu name. Menu: the menu to list. By default, the menu with the handle footer.
Text
Heading and Text, for opening hours, an address or contact details.
Email signup 1 per footer
Heading and Text above an email field. Subscribers are added to your customer list with the newsletter tag.
Custom Liquid
Your own Liquid or HTML code.
App blocks
Blocks provided by your installed apps.

Up to 8 blocks.

The Pop-up section belongs to the footer group, so it can show on every page. It never opens on arrival. Settings: Pop-up.