Home 🧭 Header, Footer & Navigation

🧭 Header, Footer & Navigation

Guide customers through your store. Learn how to configure the main menu, set up complex mega menus, and customize the header and footer areas.

• 5 articles

Header Configuration

Layout & Design You can choose from several pre-defined layouts to best suit your brand's aesthetic. Under the Desktop layout setting, options include: - Logo on the left, menu on the right (Standard) - Logo on the left, menu in the center - Logo in the center, menu on the left - Mobile layout (Displays the "Hamburger" menu icon on desktop screens, ideal for minimalist designs) Menu Typography To ensure your navigation links stand out, you can customize the Font family (Heading, Body, or Accent), Font size, Font weight, and Text transform (e.g., Uppercase) specifically for the header menu items. Logo Settings While the header controls the position of the logo, the actual image and its dimensions are managed in the global Theme Settings. To upload your logo, navigate to Theme settings > Logo. Here you can configure: - Default logo: The main image used across the store. - Desktop logo width: Sets the base size of the logo. - Inverted logo: An alternative version (usually white) used specifically when the header is displayed over dark backgrounds or images to ensure visibility. Logo Size Behavior Back in the Header section settings, you can control how the logo behaves when the user scrolls down the page: - Full size on overlay, reduced otherwise: The logo appears at its maximum size when on a transparent overlay (like the homepage banner) but shrinks to a compact size on other pages or when scrolling. - Reduce on scroll: The logo actively shrinks to the Reduced logo height (defined in Theme Settings) as the user scrolls down to save screen space. - Keep logo full size: The logo maintains its dimensions regardless of scroll position. Sticky Header Behavior The Sticky header setting determines how the navigation bar behaves as customers browse your store: - Always: The header remains fixed at the top of the screen and is always visible. - On scroll up: The header disappears when scrolling down to maximize viewing area but reappears immediately when the user scrolls up. - Never: The header remains at the top of the page and moves out of view when scrolling. Color & Overlay Logic Auto Adjust Colors When enabled, the theme detects the brightness of the background behind the header. If the header is placed over a dark background or image, the text and icons will automatically switch to a light color (and vice-versa). Reduce Padding on Scroll Enable this setting to visually "tighten" the header when the user scrolls down. This reduces the vertical space the header occupies, allowing more room for current page content.

Last updated on Jan 08, 2026

Setting up Mega Menus

Freedom utilizes theme blocks for Mega Menus. This architecture allows you to combine your standard navigation links with rich visual content like images, videos, and promotions directly within the menu dropdown. How it Works When you add a Mega Menu the theme automatically generates three Static theme blocks. This structure translates the vertical list in your editor into a horizontal layout on the storefront. Inside the Mega Menu block you will see: 1. Blocks (Top Container): Any theme blocks nested inside here render to the Left of the menu links. 2. Links: The structured list of links sourced from your Menu that is set in the Header. The Menus can be created in your Shopify Admin (Content > Menus). 3. Blocks (Bottom Container): Any theme blocks nested inside here render to the Right of the menu links. Note: Mega Menus are designed for desktop use. On mobile devices the theme automatically falls back to the standard nested navigation (hamburger menu) and ignores these visual blocks. The two Blocks items act as containers for your visual content. You must configure these containers correctly to ensure your layout looks right. - Direction: Controls how content inside this container is arranged. Select Vertical to stack elements (like a list of promotions) or Horizontal to place them side-by-side. - Gap: Adjusts the empty space between the elements inside the container. - Width: This is the most critical setting for custom layouts. - Fit: The container shrinks to match the natural size of the content inside it. - Custom: Allows you to manually define the container width in pixels. ⚠️ Important: When you are building a layout from scratch or adding new content groups we strongly recommend changing the Width setting to Custom. This unlocks the Custom width slider. Using a custom width ensures you reserve exactly enough space for your blocks (e.g. setting it to 260px to fit a specific banner) preventing the menu links from being squashed or the layout from breaking. 1. Creating the Menu Structure For the best visual result we recommend using a 3-level menu structure in your Shopify Admin. - Level 1: The main Header link (e.g. "Shop"). - Level 2: Column headers (e.g. "Mens", "Womens", "Accessories"). - Level 3: The clickable links under each header. Below is an example of the menu used in our demo store: 2. Activating the Mega Menu To turn a standard dropdown into a Mega Menu: 1. In the Theme Editor locate the Header section. 2. Under the Mega menus group click Add block and select Mega menu. 3. In the Parent menu item field type the exact name of the Level 1 link you want to attach this menu to (e.g. if your menu link is "Shop" type "Shop"). Note: The name is not case-sensitive but spelling must match exactly. Multi-language Setup for Mega-menus Mega menus support multi-language stores but require additional configuration. First translate your menu using Shopify's free Translate & Adapt app. Then in the Theme Editor locate your mega-menu block, click the three dots, and select "Localize". Presets To help you get started quickly the theme includes several presets. Mega Menu (default) Mega menu: Card collage Mega menu: Left-aligned cards Mega menu: Full-width cards When using this preset, we recommend hiding the Links block. This preset uses a Collage block located in Blocks below Links. For example, to add a new card, duplicate the Collage part block. Mega menu: Multicolumn

Last updated on Jan 15, 2026

Top Bar (Announcement Bar)

The Top Bar is an area located above the main header. It is primarily used for announcements, promotions, or quick access to localization tools and social icons. Announcement Modes You can display announcements in two distinct ways using the Type setting: 1. Slider This mode rotates through your messages one by one using a slide or fade animation. It is ideal for longer messages that require the user's full attention. - Auto-rotate: Enable this to cycle through messages automatically. - Full width: Allows the slider to span the entire screen width on large monitors. 2. Scroller (Marquee) This mode creates a continuous, moving ticker-tape effect. - Scroll speed: Adjust how fast the text moves. - Scroll direction: Choose between Left or Right movement. - Fade edges: Adds a soft fade effect to the sides of the bar. - Separate with dots: Automatically places a dot between messages. Layout & Appearance Overlay Colors The Always use overlay colors setting is enabled by default. This ensures the Top Bar adopts the transparent or overlay style used by the Header, allowing it to blend seamlessly with your hero image or video banner. If you prefer the Top Bar to have a distinct, solid background, simply uncheck this setting. Link Underlining Applies to both Slider and Scroller modes. You can control the visibility of underlines for links embedded in rich text using the Underline links setting: - Never: Links appear without an underline. - Always: Links are permanently underlined. - Hover: Links are underlined only when the mouse hovers over them. Separator Line You can enable Show separator line to draw a thin border between the Top Bar and the Header. The separator line is typically recommended when the Top bar uses light colors. Social Media & Localization The Top Bar can also serve as a utility bar. When enabled, these elements are positioned on either side of the announcement text: - Social Media Icons: Displays icons linked to your social accounts on the left side. (Links are managed in Theme Settings > Social media). - Language & Country Selector: Displays dropdowns on the right side for customers to switch their region and language. Languages must be added in your Shopify Admin under Settings > Languages, and countries must be configured in your Shopify Admin under Markets. Mobile Behavior To save screen space on mobile devices, the Social Icons and Localization Selectors are removed from the Top Bar and displayed inside the Hamburger Menu instead. Only the announcement text remains visible at the top of the screen.

Last updated on Feb 25, 2026

Footer & "Powered by Shopify" label

The footer is the anchor of your online store, providing essential navigation, trust signals, and legal information. Freedom splits the footer into two main areas: the content blocks (Upper) and the utility bar (Lower). Content Blocks (Upper) The upper section of the footer is built using standard theme blocks. You can arrange these to fit your needs: - Menu: Displays a vertical list of links (e.g., "Help", "Shop"). - Text: Useful for "About Us" summaries or contact details. - Newsletter: A signup form for email marketing. - Social Icons: Displays your brand's social media links. - Image: Can be used for a branding logo or trust badges. Utility Bar (Lower) The lower section handles technical and legal requirements. Localization If your store sells internationally, you can enable the Country/region selector and Language selector. These dropdowns allow customers to choose their local currency and language (requires configuration in Shopify Admin Markets and Languages settings). Policy Links Enable Show policy links to automatically display links to your Refund Policy, Privacy Policy, Terms of Service, etc. Note: The content for these links is pulled directly from your Shopify Admin under Settings > Policies. Payment Icons Enable Show payment icons to display the logos of the payment methods accepted by your store (e.g., Visa, Mastercard, PayPal). These are automatically detected based on your payment gateway settings. How to remove the "Powered by Shopify" label By default, the footer displays a "Powered by Shopify" credit. To remove this: 1. Click on the Footer section in the Theme Editor. 2. Uncheck the setting labeled Show "Powered by Shopify".

Last updated on Jan 14, 2026

Search box

The Search Box section controls the overlay that appears when a customer clicks the search icon in the header. This feature is designed to guide customers immediately, offering helpful suggestions before they even begin typing. Before Search Configuration When the search overlay is opened but empty, you can display curated content to inspire visitors. This is managed through the Before search block located within the Search box section. Top Search Terms You can define a list of keywords to act as quick links for trending or common searches. - In the Terms field, enter the words you want to display, separating them with commas (e.g., Dresses, Summer Sale, New Arrivals). Popular Recommendations You can also showcase specific items under a "Popular" heading to drive traffic to key areas of your store. - Item type: Choose whether to display Products or Collections. - Selection: Once the type is selected, assign the specific products or collections you wish to feature in this list. While the Search Box focuses on these initial suggestions, it seamlessly transitions into a predictive search experience as soon as the user starts typing, automatically displaying relevant results.

Last updated on Jan 08, 2026