Header section
The Header section of Local holds the logo, main menu, search, account and cart, transparent header options and up to two info blocks.
Applies to: Local 4.2.1 and later. Added in: Local 1.0.0. Last checked: 2026-10-13 against Local 4.2.1.
The Header section is the top of every page: your logo, the main menu, the search bar, the account and cart buttons, and small info blocks next to the menu. It sits in the Header group, under the Announcement bar.
Where to find it: Header group → Header
Logo
- Desktop logo image is the logo on screens 1024 px wide and larger. Desktop logo image maximum height sets its height, from 20 to 100 px.
- Mobile logo image is the logo on screens narrower than 1024 px. Without it, Local uses the desktop logo. Mobile logo image maximum height sets its height, from 15 to 100 px.
- Without a logo image, the header shows your store name as text.
Local serves the logo at one, two and three times the maximum height, so it stays sharp on high-resolution screens. Upload a logo at least three times as tall as the height you set, or an SVG file.
Menu, search and sticky header
- Menu chooses the navigation menu of the header,
main-menuby default. Edit its links in Shopify admin → Online Store → Navigation. To turn a menu item into a mega menu, see Header menus and mega menus. - Show search shows the search bar, with results that appear while the customer types. What it searches is set in Predictive search theme settings.
- Compact search on mobile shows search as an icon on phones and tablets; the search bar opens when the customer selects it. When off, the search bar shows below the header on mobile.
- Sticky header brings the menu back at the top of the screen when the customer scrolls up the page.
The cart button is always there. It opens the cart drawer or goes to the cart page, as set in Cart theme settings.
Customer accounts
The account button shows when customer accounts are turned on in Shopify admin → Settings → Customer accounts. It uses Shopify's account component: signed-out customers see a sign-in button, signed-in customers a menu.
- Customer account menu chooses the menu shown in that account menu,
customer-account-main-menuby default. It works only with Shopify's new customer accounts. See Customer accounts in the Shopify Help Center.
Transparent header design
A transparent header sits over the first section of the page, so a full-width image or slideshow starts at the very top. You choose on which pages it is transparent.
- Enable on homepage makes the header transparent on the home page.
- Enable on collection pages makes it transparent on collection pages whose collection has a featured image.
- Enable on custom pages makes it transparent on the pages, collections or products whose handles you list, separated by commas.
- Text sets the text and icon color of the transparent header. Pick a color that reads well on your images.
- Logo image and Mobile logo image replace your logos while the header is transparent, for example a white version of a dark logo. Upload them at the same size as the normal logos.
Setting up the transparent header
Start the page with a full-width image
Make sure the page starts with a full-width visual. On the home page, the first section must be a slideshow (such as Flex slideshow) or a full-width image. On collection pages, the collection needs a featured image, shown by the Collection banner section.
Turn on the pages
In the theme editor, open Header group → Header → Transparent header design. Turn on Enable on homepage, Enable on collection pages, or both. For other pages, type their handles in Enable on custom pages, for example about-us, summer-sale.
Upload a logo for the transparent header
Upload a light version of your logo in Logo image and, if you use one, in Mobile logo image, at the same size as your normal logos.
Set the text color
Set Text to the color of the menu, icons and text over the image, then select Save.
Enable on custom pages matches parts of handles. The handle sale also makes summer-sale and sale-shoes transparent. Use the full, distinct handles of the pages you want.
Header blocks
Header blocks are small information links at the right of the main menu. Add them with Add block in the Header section. You can add up to two Info blocks, two Popup blocks and one Store selector block.
Info block
- Caption is the small line on top, for example "Free delivery".
- Title is the main line, for example "Orders over $50".
- Link makes the block a link; Open link opens it on the same page or in a new page.
- Select an icon shows one of Local's icons next to the text, or Custom icon your own 76 x 76 px PNG. See the Krown icon library for the icons.
Popup block
A Popup block opens the content of one of your Shopify pages in a popup, without leaving the current page. Use it for delivery times, opening hours or a size guide.
Write the content as a page
In Shopify admin → Online Store → Pages, create a page, for example "Delivery times", with the text and images you want in the popup.
Add the Popup block
In the theme editor, open Header group → Header and select Add block → Popup.
Fill in the block
Type the Caption and Title, select the page in Page, and choose an icon in Select an icon or upload a Custom icon (76 x 76 px PNG). Select Save.
When a customer selects the block, the popup shows the page title and the page content.
Store selector block
The Store selector block opens the store selector popup and shows which store the customer picked. Before a store is picked it says "Picking up?" and "Select store"; after, it says "My store", today's closing time, and the store name.
- Custom icon replaces the store icon with your own 76 x 76 px PNG.
- The stores themselves are set in the Store selector section, see Store selector section.
Mega menu block
The Mega menu block turns one item of the main menu into a large dropdown with columns, images and promotions. It is documented on Header menus and mega menus.
Header info blocks on mobile
- Choose an option (Header info blocks) decides whether the store selector and info blocks show in the header on phones and tablets: Don't show, Show only on homepage or Show always. Local ships with Show only on homepage.
Mobile navigation
These settings only change what shows inside the mobile navigation drawer.
- Show store selector & info blocks adds the header blocks to the drawer.
- Show language selector and Show country/region selector add the selectors, when your store has more than one language or country.
- Show social icons adds the icons from Social theme settings.
Why does the account icon not show?
Because customer accounts are off in your store. Turn them on in Shopify admin → Settings → Customer accounts; the account button then appears in the header on desktop and mobile. Customer accounts are controlled by Shopify, not by Local.
How big should my logo image be?
At least three times the height you set in Desktop logo image maximum height (or Mobile logo image maximum height), for example 135 px tall for a 45 px logo. Local serves larger versions to high-resolution screens. An SVG logo is always sharp. For more image sizes, see What image sizes should I use in Local?.
Why is the header not transparent on my collection page?
Because the collection has no featured image, or the page has no Collection banner showing it. Local keeps the normal header on collections without an image, so the menu stays readable. Add an image in Shopify admin → Products → Collections → the collection → Collection image.
All Header settings
Every setting, with its type and default, including the settings of the header blocks.
Accepts these blocks: Popup, Info, Store selector and Mega menu.
Desktop logo image (image): Sets the logo on screens 1024 px wide and larger. Without a logo, the header shows the store name as text. Upload it at least three times as tall as the maximum height, or as an SVG.
Desktop logo image maximum height (slider 20 to 100 px, default: 45 px): Sets the logo height on desktop. Local serves the image at one, two and three times this height for sharp screens.
Mobile logo image (image): Sets the logo on screens narrower than 1024 px. Without it, Local uses the desktop logo.
Mobile logo image maximum height (slider 15 to 100 px, default: 40 px): Sets the logo height on screens narrower than 1024 px. The sticky header uses at most 40 px.
Menu (menu picker, default: the main-menu menu): Sets the Shopify menu shown in the header and in the mobile navigation drawer. Mega menus are added with the Mega menu block.
Show search (checkbox, default: on): Shows the search bar, with predictive results while the customer types.
Compact search on mobile (checkbox, default: off): Shows search as an icon on phones and tablets that opens the search bar. When off, the search bar shows under the header on mobile. Shown only when Show search is on.
Sticky header (checkbox, default: on): Brings the menu back at the top of the screen when the customer scrolls up.
Header section: Customer accounts
Where to find it: Header group → Header → Customer accounts
Customer account menu (menu picker, default: the customer-account-main-menu menu): Sets the menu of the account button, from Shopify's account component. The account button shows only when customer accounts are on in Shopify admin → Settings → Customer accounts.
Header section: Transparent header design
Where to find it: Header group → Header → Transparent header design
Enable on homepage (checkbox, default: off): Makes the header transparent over the first section of the home page. The first section should be a slideshow or a full-width image.
Enable on collection pages (checkbox, default: off): Makes the header transparent on collection pages whose collection has a featured image shown by the Collection banner. Collections without an image keep the normal header.
Enable on custom pages (text field): Makes the header transparent on the pages, collections or products whose handles you list, separated by commas. Parts of handles match too: sale also matches summer-sale.
Text (color, default: #000000): Sets the text and icon color of the transparent header.
Logo image (image): Replaces the desktop logo while the header is transparent, for example a white logo. Upload it at the same size as the normal logo.
Mobile logo image (image): Replaces the mobile logo while the header is transparent. Without it, the transparent desktop logo is used on mobile.
Header section: Header info blocks
Where to find it: Header group → Header → Header info blocks
Choose an option (dropdown): Sets whether the store selector and info blocks show in the header on phones and tablets: never, on the home page only, or on every page. The theme ships with Show only on homepage. Options: Don't show, Show only on homepage, Show always.
Header section: Mobile navigation
Where to find it: Header group → Header → Mobile navigation
Show store selector & info blocks (checkbox, default: on): Adds the store selector and info blocks to the mobile navigation drawer.
Show language selector (checkbox, default: on): Adds the language selector to the mobile navigation drawer, when the store has more than one language.
Show country/region selector (checkbox, default: on): Adds the country/region selector to the mobile navigation drawer, when the store sells to more than one country.
Show social icons (checkbox, default: on): Adds the icons from Theme settings → Social to the mobile navigation drawer.
Popup block
Where to find it: Header group → Header → Add block → Popup
Up to 2 Popup blocks per section.
Caption (text field, default: "Write some information"): Sets the small line above the title of the Popup block.
Title (text field, default: "About delivery time"): Sets the main line of the Popup block.
Page (page picker): Sets the Shopify page whose title and content open in the popup when the customer selects the block.
Select an icon (dropdown, default: Commerce: Delivery time): Sets the icon next to the Popup block text. Custom icon replaces it. Options: No icon, Business: Earth globe, Business: Favorite, Business: Flag, Business: Helpline, Business: Like hand, Business: Map marker, Business: Security shield, Business: Star, Commerce: Appointment, Commerce: Archive box, Commerce: Box, Commerce: Checkout cart, Commerce: Currency, Commerce: Delivery, Commerce: Delivery time, Commerce: Giftbox, Commerce: Label, Commerce: Open 24 hours, Commerce: Open box, Commerce: Paper bag, Commerce: Shipping truck, Commerce: Store, Commerce: Time, Commerce: Time limit, Commerce: Wallet.
Custom icon (image): Replaces the icon with your own 76 x 76 px PNG image.
Info block
Where to find it: Header group → Header → Add block → Info
Up to 2 Info blocks per section.
Caption (text field, default: "Write some information"): Sets the small line above the title of the Info block.
Title (text field, default: "About your brand"): Sets the main line of the Info block.
Link (link): Makes the Info block a link.
Open link (dropdown, default: On the same page): Opens the link on the same page or in a new page. Options: In a new page, On the same page.
Select an icon (dropdown, default: No icon): Sets the icon next to the Info block text. Custom icon replaces it. Options: No icon, Business: Earth globe, Business: Favorite, Business: Flag, Business: Helpline, Business: Like hand, Business: Map marker, Business: Security shield, Business: Star, Commerce: Appointment, Commerce: Archive box, Commerce: Box, Commerce: Checkout cart, Commerce: Currency, Commerce: Delivery, Commerce: Delivery time, Commerce: Giftbox, Commerce: Label, Commerce: Open 24 hours, Commerce: Open box, Commerce: Paper bag, Commerce: Shipping truck, Commerce: Store, Commerce: Time, Commerce: Time limit, Commerce: Wallet.
Custom icon (image): Replaces the icon with your own 76 x 76 px PNG image.
Store selector block
Where to find it: Header group → Header → Add block → Store selector
One Store selector block per section.
The store selector can be configured in the Store Selector section. See Store selector section.
Custom icon (image): Replaces the store icon of the Store selector block with your own 76 x 76 px PNG image. The stores are set in the Store selector section.
Mega menu block
Where to find it: Header group → Header → Add block → Mega menu
Menu handle (text field): The handle of the top-level menu item to turn into a mega menu: its title in lowercase, with hyphens instead of spaces (Our Promotions → our-promotions). It must be an item of the header Menu.
Mega menu block: Menu images
Where to find it: Header group → Header → Add block → Mega menu → Menu images
You can add images to the top level menu items by creating JPG files with the same name as the menu handle. See Header menus and mega menus.
Show menu images (checkbox, default: off): Shows an image above each column, taken from Content → Files and named after the handle of that column's second-level link, as .jpg or .webp (coffees.jpg). The editor text above says the top-level item; the code uses the column links.
Mega menu block: Layout
Where to find it: Header group → Header → Add block → Mega menu → Layout
Link lists layout (dropdown, default: 4 columns): Sets how many columns the second-level links fill. Options: 2 columns, 3 columns, 4 columns, 5 columns.
Mega menu block: Promotion 1
Where to find it: Header group → Header → Add block → Mega menu → Promotion 1
Show promotion block (checkbox, default: off): Shows the first promotion tile at the side of the mega menu.
Title (text field, default: "Great promotion"). Shown only when Show promotion block is on.
Title size (dropdown, default: Large). Options: Regular, Large, Extra large. Shown only when Show promotion block is on.
Subtitle (text field, default: "Write all about it"). Shown only when Show promotion block is on.
Subtitle size (dropdown, default: Regular). Options: Small, Regular. Shown only when Show promotion block is on.
Button label (text field). Shown only when Show promotion block is on.
Button size (dropdown, default: Regular). Options: Regular, Large. Shown only when Show promotion block is on.
Button link (link). Shown only when Show promotion block is on.
Promotion text color (color, default: #000000): Sets the text color of the promotion, and the background of its button. Shown only when Show promotion block is on.
Promotion background color (color, default: #f3f3f3): Sets the background of the promotion tile. With a promotion image, it lies over the image at 30 percent opacity. Shown only when Show promotion block is on.
Promotion image (image). Shown only when Show promotion block is on.
Promotion height (dropdown, default: Small): Sets the height of the promotion tile. Options: Small, Regular, Large. Shown only when Show promotion block is on.
Mega menu block: Promotion 2
Where to find it: Header group → Header → Add block → Mega menu → Promotion 2
Show promotion block (checkbox, default: off): Shows the second promotion tile at the side of the mega menu.
Title (text field, default: "Great promotion"). Shown only when Show promotion block is on.
Title size (dropdown, default: Large). Options: Regular, Large, Extra large. Shown only when Show promotion block is on.
Subtitle (text field, default: "Write all about it"). Shown only when Show promotion block is on.
Subtitle size (dropdown, default: Regular). Options: Small, Regular. Shown only when Show promotion block is on.
Button label (text field). Shown only when Show promotion block is on.
Button size (dropdown, default: Regular). Options: Regular, Large. Shown only when Show promotion block is on.
Button link (link). Shown only when Show promotion block is on.
Promotion text color (color, default: #000000): Sets the text color of the second promotion, and the background of its button. Shown only when Show promotion block is on.
Promotion background color (color, default: #f3f3f3): Sets the background of the second promotion tile. With a promotion image, it lies over the image at 30 percent opacity. Shown only when Show promotion block is on.
Promotion image (image). Shown only when Show promotion block is on.
Promotion height (dropdown, default: Small): Sets the height of the second promotion tile. Options: Small, Regular, Large. Shown only when Show promotion block is on.
Related pages
- Header menus and mega menus: mega menus, menu images and promotions.
- Store selector section: the stores behind the Store selector block.
- Announcement bar section: the bar above the header.
- Troubleshoot the header, menus and popups: when a menu or block does not show.
Announcement bar
The Announcement bar section of Local shows short messages above the header, with autoplay, social icons and language and country selectors.
Header menus and mega menus
Header menus and mega menus in Local: turn a submenu into a mega menu with the Mega menu block, menu images and up to two promotions.