Header And Footer

Footer

Footer The footer is the band at the bottom of every page. It holds two parts: a content area you fill with blocks (menus, an email signup, your logo, text) and a bottom row the section builds for you (locale selectors, social icons, payment icons, copyright, and policy links). The footer lives in the Footer section group, not in the Add section list. The theme limits the store to one footer, so you edit the existing one. Open the footer 1. In the theme editor, open the section list on the left. 2. Find the Footer group near the bottom and click Footer to open its settings. 3. To change what shows in the content area, expand the section's blocks and edit the blocks nested under it (a Menu, an Email signup, a Group, and so on). Footer settings These settings control the section as a whole. The content above the bottom row comes from blocks, covered further down. Background - Background media: what sits behind the footer. None (the default), Image, or Video. The next fields appear based on this choice. With an image or video set, the footer switches to light text for readability. - Background image: the image behind the footer. Shows when Background media is Image. - Background video: the video behind the footer. Shows when Background media is Video. Supply an MP4 file. The theme skips adaptive streaming sources so the looping background stays sharp, so a video with no MP4 source does not play. - Overlay opacity: the darkening layer over the media, so text stays legible. Runs from 0% to 200%, default 100%. Below 100% the layer fades out and more of the picture shows through. Above 100% the layer stays full and the gradient itself deepens. Shows when Background media is not None. Country/region selector - Show country/region selector: lets shoppers switch country or region in the footer. It appears on the storefront only when your store has more than one country or region in market settings. - Show country code: puts the two-letter country code in front of the country name. Shows when Show country/region selector is on. The selector always ends with the currency symbol, code or not. Language selector - Show language selector: lets shoppers switch language in the footer. It appears only when your store has more than one published language. Social icons These two controls style the social row. The links come from theme settings (see Tips), so there are no link fields here. - Icon style: Outline draws the glyph on its own. Pill (the default) sets it on a rounded chip. - Icon size: the icon size in pixels, from 14 to 32. The default is 18. Payment methods - Show payment icons: shows icons for the payment methods your store accepts. They appear only when at least one payment method is enabled. Policy links - Show policy links: shows links to your store policies (refund, privacy, terms, and so on). Each appears only once you have written that policy in your store policy settings. Copyright - Custom copyright text: your copyright line. Leave it blank to use the automatic line, which fills in the current year and links your store name to the home page. - Show "Powered by Shopify": adds the "Powered by Shopify" credit next to the copyright. This section also uses the standard Color, Padding, and Margin controls. See Common section settings. Blocks inside the footer The content area above the bottom row is built from blocks. Any block can go here, arranged with groups. These three carry footer-specific behavior worth calling out. Menu Shows a column of links from one of your store navigation menus. It renders the top level of the chosen menu as a flat list and ignores any nested items. In Add block it sits under Links. - Menu: which store menu to show. It defaults to Main menu. - Heading: the text above the link column. Leave blank to hide it. - Heading style: Default or Eyebrow (a small uppercase label). - Heading size: Small, Base, or Large. Shows when Heading style is Default. - Gap: the space between the links, in pixels. - Link emphasis: link contrast, Normal, Muted, or Faded. The Menu block also uses the standard Color and Padding controls. See Common section settings. Email signup A newsletter form that collects email addresses. New subscribers are tagged as newsletter, so you can find them in your customer list. In Add block it sits under Forms. - Email placeholder: the hint text inside the email field. - Button label: the text on the submit button. - Success message: the text shown after someone subscribes. - Style: Default (a pill input with a button) or Editorial (a slim underlined row with an arrow). - Small text below form: an optional note under the form, for example a privacy line. - Alignment: aligns the form Left, Center, or Right. - Max width: the widest the form can grow, from 240 to 720 pixels. The default is 440. The Email signup block also uses the standard Margin controls. See Common section settings. Social icons A row of social media icons. It has no link fields of its own: it reads the same links as the footer's built-in social row (see Tips). In Add block it sits under Basic. - Alignment: aligns the icons Left, Center, or Right. The Social icons block also uses the standard Margin controls. See Common section settings. Tips - Social links are not set on the section or the block. Open Theme settings, go to the Social media panel, and fill in the URL fields (Instagram URL, Facebook URL, TikTok URL, YouTube URL, Pinterest URL, X (Twitter) URL, LinkedIn URL, Threads URL). Only the platforms you fill in show an icon. The footer's social row and the Social icons block both read these same links, so you enter them once. - If the country/region selector, language selector, payment icons, or policy links are missing on the storefront with their toggle on, the matching store data is missing. Check your market settings, published languages, enabled payment methods, or written store policies.

Mega menu

Mega menu A mega menu turns a plain navigation dropdown into a wide panel with columns of links, product rails, or featured images. In the theme you build it from blocks inside the Header section, and each panel attaches to one top-level item in your store navigation. A mega menu needs two things to work together: 1. A navigation menu in your Shopify admin with items nested under the top-level item (two levels give you the columns, three levels fill them with links). 2. A mega menu block in the Header section that names the same top-level item so the theme knows which dropdown to replace. If the name in the block and the menu item do not match, the panel does not appear and the link falls back to a plain dropdown. Build the navigation menu first The link structure comes from your Shopify navigation, not from the theme. Set it up before you add the block. 1. In your Shopify admin, go to Online Store, then Navigation. 2. Open the menu your header uses. By default this is Main menu. (You can confirm which menu the header reads in the Header section under Menu.) 3. Add a top-level item, for example Oils & Vinegars. 4. Add items nested under it. Each second-level item becomes a column heading in the panel, and the heading is itself a link to that item. 5. Add items nested under those. Each third-level item becomes a link inside that column. Two levels are enough to produce a panel: you get a row of linked column headings with nothing under them. The third level is what fills the columns. The column layout and link text always come from this menu. The blocks below control the panel style and any extra content. Add a mega menu block 1. In the theme editor, open the Header section. 2. Click Add block. 3. Choose one of the mega menu blocks (described below). 4. In the block settings, find the Binding heading and the Parent menu item field. 5. Type the name of the top-level menu item you want this panel to attach to, for example Oils & Vinegars. The theme is forgiving about capitalization, spacing, and punctuation, so Oils & Vinegars and oils & vinegars bind to the same item. It is not forgiving about wording. Typing Oils and Vinegars where the menu says Oils & Vinegars does not match, because "and" is a word you added, not punctuation the theme ignores. You can add several mega menu blocks, one per top-level item, to give different parts of your store different panel styles. Choosing a panel style When you click Add block, the theme offers the mega menu in several starting layouts. The editor lists each one as Mega menu followed by the layout name. They share the same binding field and differ in what content they include. - Links: columns of navigation links only, taken from your menu. - Feature: link columns plus a media card for a featured image or video. - Collage: link columns plus an arrangement of media cards. - Editorial: link columns plus a captioned landscape image card. - Showcase: a two-card image gallery with headings, for an image-led panel. The five layouts above are presets of the one Mega menu block. After you add one you can add, remove, or rearrange the child blocks inside it. (For how presets and blocks work, see Sections, blocks, and groups.) The tabbed layout is a separate block with its own settings, covered below. Mega menu block settings This is the panel container. Its own settings are short because most content lives in the child blocks. Binding - Parent menu item: the name of the top-level navigation item this panel attaches to. Type it as it appears in your menu. The panel then replaces the plain dropdown for that item. The child blocks you can add inside this panel: - Menu links: the link columns. See its settings below. - Collage: a group of Media card blocks arranged into a layout. - Any other content block, most often a Media card for a featured image or promotion. Menu links block settings Add this block inside a mega menu panel to render the link columns. The columns and link text come from the bound menu item; these settings control how they look and add optional extra text. - Intro text: a short line of text shown above the columns. - Button label: text for an optional call-to-action link below the columns. Leave it empty to hide the button. - Button link: where the call-to-action link goes. - Heading size: the size of the column headings. Choose Small, Base (the default), or Large. - Link gap: the vertical space between links within a column, from 0 to 32 pixels. The default is 8. - Column gap: the horizontal space between columns, from 0 to 48 pixels. The default is 24. Tabbed mega menu block settings This is a separate block, listed in the editor as the Mega menu tabs layout. It binds to a top-level menu item the same way and holds Tab blocks instead of link columns. Because its content comes from the tabs you build, it ignores the nesting under the bound menu item. Binding - Parent menu item: the top-level menu item this tabbed panel attaches to. Type it as it appears in your menu. Other settings on the tabs panel: - Intro text: a short line of text shown above the tab list. - Button label: text for an optional call-to-action link in the tab rail. Leave it empty to hide the button. - Button link: where that call-to-action link goes. Tab block settings Add a Tab block inside the tabs panel for each tab. Each tab is a row in the rail on the left and a content panel on the right. - Tab title: the tab name shown in the rail. - Tab description: a short line under the tab title in the rail. - Products heading: a heading shown above the product rail in the tab panel. - Collection: pick a collection to fill the product rail with its products. A collection takes priority over hand-picked products. - Products: hand-pick up to six products for the rail. Used only when no Collection is set. Each Tab ships with a Media card for a featured image beside the products. You can edit it, and you can add more media cards to the tab. Tips - If a dropdown still looks plain, the words in Parent menu item do not match the menu item. Recheck them against your navigation in the Shopify admin. - A Menu links panel needs the menu item to have child items. A top-level item with no nesting has nothing to fill the columns. A tabbed panel does not: it builds its content from its own Tab blocks. - Whether dropdowns open on hover or click is set once for the whole header under Open menu on in the Header section, not per panel. - Mega menus are a desktop feature. Below 950 pixels wide the header switches to the hamburger menu, and the panels are replaced by the mobile menu's nested lists.

Top bar and announcements

Top bar and announcements The Top bar is the slim strip that sits above your header on every page. It shows scrolling announcements, social media icons, and language and country selectors. It belongs to the Header group in the theme editor, so it stays in place across your whole store rather than on a single page. Each message is its own Announcement block inside the bar. Find the Top bar The theme installs the Top bar by default, so in most stores it is already there. 1. In the Shopify admin, go to Online Store > Themes. 2. On your theme, click Customize. 3. In the left sidebar, open the Header group at the top of the section list. 4. Click Top bar to open its settings. The Top bar is part of the Header group. There is one for the whole store. Announcements Announcements are the messages that scroll across the center of the bar. Each message is a separate Announcement block, so you can run several in rotation. The theme starts you with three. To edit a message, click an Announcement block under Top bar in the section's blocks. Each block has: - Text: the message that scrolls across the bar. You can apply bold or italic and add a link. - Apply custom color: turn this on to override the bar's color scheme for this one message. - Custom color: the text color for this message. It appears only when Apply custom color is on. To add or remove a message, use Add block under the Top bar section, or click an existing Announcement block and remove it. Drag the blocks to change their order in the scroll. These settings on the Top bar section control how all announcements scroll, grouped under the Announcements heading: - Separator: the symbol placed between messages. The options are None, Bullet (•), Slash (/), Chevron (›), Middle dot (·), Em dash, Asterisk (✦), and Diamond (◆). The theme ships with the asterisk. - Scroll speed: how fast the messages move across the bar, from 5 to 100. A higher value moves faster. The default is 25. - Gap: the space between each item in the scroll, from 0 to 80 pixels. The default is 16. - Pause on hover: stops the scroll while a visitor hovers over the bar, so they can read a message. On by default. Social media icons - Show social media icons: turn the row of social icons on or off. The icons sit on the left of the bar. The icons read from the social media URLs in your theme settings. To set or change them, go to Theme settings > Social media and fill in each platform's URL. An icon appears only for a platform that has a URL. Language selector - Show language selector: turn the language menu on or off. It sits on the right of the bar. The selector appears to shoppers only when your store offers more than one language. To add a language, go to your Shopify Settings > Languages. Country/region selector - Show country/region selector: turn the country and region menu on or off. It sits on the right of the bar. The selector appears to shoppers only when your store ships to more than one country or region. To add one, go to your Shopify Settings > Markets. Layout - Show on mobile: keep the bar visible on phones, or hide it there to save vertical space. On by default. When on, the bar shows on every screen size. When off, it shows on desktop only. This section also uses the standard Color control. See Common section settings. Pick a scheme that contrasts with the header below it. Tips - If the language or country selector does not appear, confirm the matching toggle is on and that your store has more than one language or market. With only one of each, the selector stays hidden even when the toggle is on. - If the icon row is empty while Show social media icons is on, no social URLs are set. Add them under Theme settings > Social media. - To run a single static message instead of a scroll, keep one Announcement block. The scroll still applies, but with one item there is nothing to rotate between. - The bar is a section like any other, so you can hide it entirely with the eye icon next to Top bar in the Header group.

Header and navigation menu

Header and navigation menu The header is the navigation at the top of every page: your logo, the main navigation menu, and the search, account, and cart actions. In the theme editor it lives in the Header group, not on an individual page, so any change you make applies across the whole store. Open the header settings 1. In the Shopify admin, go to Online Store then Themes. 2. On your theme, click Customize. 3. In the top section group list (left side), open the Header group and click Header. 4. The header settings open on the right. The header cannot be added or removed like a page section. It is always present, and you can only have one. To control the message bar above it, edit the Top bar entry in the same Header group. Logo Your logo image, its sizes, and its inverted version are set under Theme settings in the Logo panel, not here. A link in this group points you there. The two settings below apply only when no logo image is set, so the store name shows as text. - Store name: overrides the text shown in place of a logo. Leave it blank to use your shop name. - Uppercase: shows the text store name in all capitals. Layout - Desktop menu: chooses how the navigation appears on desktop. - Full menu shows the menu items across the header. - Hamburger hides the items behind a menu icon, the same icon used on mobile. - Open menu on: chooses whether a dropdown opens when a shopper hovers over a parent item (Hover) or clicks it (Click). This appears only when Desktop menu is set to Full menu. - Sticky header: controls whether the header stays on screen as a shopper scrolls. - Always visible keeps it pinned to the top at all times. - Show on scroll up hides it while scrolling down and brings it back when the shopper scrolls up. - Never sticky lets it scroll away with the page. Menu - Menu: selects which navigation menu fills the header. It defaults to Main menu. You build and reorder the actual links in the Shopify admin under Online Store then Navigation, not in the theme editor. Nested items in that menu become dropdowns in the header. Actions These control the icons and button on the right side of the header. - Show search: shows or hides the search icon. - Show account: shows or hides the account icon. It appears only when customer accounts are turned on for your store. - Account menu: selects the navigation menu shown to a signed-in customer. This appears only when Show account is on. - Cart icon: the cart link is always shown and has no toggle. A count badge appears on it once the cart holds items. Whether clicking it opens a slide-in drawer or the full cart page is set by Cart type in Cart settings. - Button label: text for an optional call to action button in the header, for example a promotion or a sale link. Leave it blank to hide the button. - Button link: the destination for that button. How the header sits over the page The header is not a solid bar across the top. It floats near the top of the page as rounded translucent panels: one for the logo, one for the navigation, one for the actions. Its Color scheme sets the text, link, and button colors and tints those panels. There is no separate background color to set. On most pages the theme reserves a strip of space above the first section so the panels do not cover your content. That strip is painted with the first section's own color scheme, so it reads as part of that section rather than as a band of its own. Two things change that: - A section running under the header. The Hero slideshow has an Overlay this section with the header setting. With it on, and with the hero at the top of the page, the hero fills that space instead and the header floats over the image. The collection banner and the blog banner do the same on their own when they sit at the top of the page. - The dark header treatment. Open a section and turn on Use dark header theme over this section. While the header sits over that section its panels switch to a dark, frosted finish so light text stays readable over a photo or a dark scheme. The control appears on full-width sections that can sit behind the header, and is documented in Common section settings. The dark finish does not come from a color scheme. It is one store-wide Surface color, set in Theme settings under Colors, so every dark header on the store matches. Changing it also tints the theme's other translucent surfaces. Dropdowns and mega-menus A parent item with child items in your navigation menu produces a dropdown automatically. The header can also hold richer mega-menu panels, built as blocks inside the Header section: see Mega menu. For most stores, building a well-structured menu in your store's navigation settings is all you need. Below 950 pixels wide the desktop navigation and its panels give way to the hamburger menu, so dropdowns and mega menus are a desktop feature. The Menu block The theme also ships a Menu block you add elsewhere, most often in the footer or a group. It renders one navigation menu as a flat list and is separate from the header. In Add block it appears under Links. Its settings are documented in Footer. The Logo block A Logo block places your store logo anywhere on the page, most often in the footer. The logo image itself comes from Theme settings under Logo. In Add block it appears under Basic. - Use inverted logo: shows the inverted logo version where it reads better against a dark surface. This appears only when both a logo and an inverted logo are set in theme settings. - Link: where the logo links to. It defaults to the home page. - Alignment: Left, Center, or Right. - Desktop width: from 40 to 400 pixels, default 160. - Mobile width: from 40 to 300 pixels, default 120. The Logo block also uses the standard Margin control. See Common section settings. The Header section itself uses the standard Color scheme control. See Common section settings. Tips - The header's links come from the navigation menu you pick in Menu, not from blocks. To change what appears in the bar, edit that menu under Online Store then Navigation. - If the account icon is missing even with Show account on, confirm customer accounts are enabled in your Shopify settings. - If you choose Show on scroll up or Never sticky, test a long page on a phone so the header behaves the way you expect while scrolling.