Header and Footer

Overview

The Header is the navigation bar at the top (or on the left for desktop) of your website, helping visitors identify your brand, switch pages, and click primary action buttons. The Footer is the closing section at the bottom of your site, consolidating your brand bio, multi-column navigation, contact details, social icons, and links to legal terms.

• How to edit: Click directly on the header or footer in the editor preview, or open "Layout" from the top toolbar and select "Header" or "Footer" from the list. Changes are previewed in real-time and automatically saved to your draft. Click "Publish" in the top right corner to update your live site.
• Global settings: Headers and footers are global by default. Modifying them once syncs the changes across all standard pages (multi-link tool pages do not include headers or footers).

Designing the Header

1. Brand Information and Logo Settings

In the "Basic Information" section of the header form, you can freely combine the brand identity displayed in the top-left corner:

• Display brand info (multi-select capsules): Check or uncheck "Brand Logo" and "Site Name":
  • When both are selected, the header displays the logo and site name side-by-side. If you use the "Left Sidebar" layout, the site name will automatically appear on a separate line below the logo.
  • If both are unchecked, the brand area will be blank. If only "Brand Logo" is selected but no logo has been uploaded, the system will automatically display the site name text instead.
• Logo source and size:
  • Use brand logo (default): Uses the global logo set in (supports separate light and dark mode versions).
  • Specify for header: If you want a dedicated horizontal text logo for the header, select this option to upload a separate image or select an icon.
  • Logo size: Offers "Small, Medium (default), Large" size options.

2. Setting Brand Social Links by Device (Desktop/Tablet/Mobile)

Desktop navigation bars are typically kept minimalist without a full row of social icons. However, these icons are very useful for visitors when they open the hamburger menu on tablets and mobile devices. Therefore, the "Display social links" setting in the header supports independent configuration for desktop, tablet, and mobile:

1. First, fill in your social platform links in (or click "Go to settings" next to the field to open the panel directly).
2. On the right side of "Display social links" in the header form, click the desktop, tablet, or mobile icon to switch the device you are configuring:
   • Default state: Desktop top navigation is off by default (only enabled by default in the "Left Sidebar" layout); tablet and mobile hamburger menus have social links enabled by default.
3. Click the platform capsules below (e.g., Instagram, LINE, YouTube) to toggle individual platforms for that device (deselecting all capsules for a device hides social icons on that device).

3. Header Layout, Module Background, and Appearance

In the "Layout and Appearance" section of the header, you can adjust the overall style using visual thumbnails and toggles:

• Module background (6 surface colors): Choose from Auto-interleaved (default frosted glass), Pure White (Deep Black in dark mode), Foggy Gray (Charcoal Gray), Brand Soft Light, Brand Primary Color, and Matte Black (Soft Charcoal). When a dark or brand primary color background is selected, navigation text, icons, and buttons automatically invert to white to ensure 100% readability across pages.
• Shrink header on scroll: Enabled by default; the header height slightly reduces when visitors scroll down, providing more screen space.
• Show bottom brand decorative line: Adds a subtle brand-colored gradient line at the bottom of the header.
• Add custom buttons (up to 2): Place up to 2 global buttons on the right side of the header (or bottom of the left sidebar). Choose "Brand Primary," "Default," or "Text Arrow" styles for each button.

4. Functional Buttons (Search, Cart)

On the far right of the header, next to your action buttons, are the functional buttons: "Search" and "Cart." In the "Functional Buttons" section of the header form, you can decide whether to display them and use the drag handle (⋮⋮) to adjust their order:

• Search (Site Search): Enabled by default for new sites. Existing sites can manually enable it here and click "Publish" (available for Free, Pro, and Business plans).
  • How visitors use it: When the site is published and contains searchable public content, a magnifying glass icon appears. Visitors can click it (or press / or ⌘K on desktop) to search all publicly published content (including standard pages, subpages, blog posts, categories, tags, products, and categories; sold-out items appear last). They can also click "View all results" at the bottom of the window to enter the /search results page.
  • Excluded content: Drafts, hidden pages, empty categories, and protected digital file names are not searchable. To hide specific public pages, products, or posts from site search, check "Exclude from site search" in the . The editor canvas displays the magnifying glass for previewing the search window; visitors can use it after you publish the site.
  • Turning off the button does not disable search: This toggle only controls whether the magnifying glass appears in the header. Your site's /search results page and remain available for published sites, and the index updates as usual to support custom frontends or AI assistants. To prevent visitors from finding a specific page, use the "Exclude from site search" option mentioned above instead of just hiding the button.
• Cart: Ensure "Store › Settings › General" "Enable cart" is on (enabled by default for new sites) and that at least one product is listed. If conditions aren't met, the toggle will be disabled and show the missing step. Click "Go to settings" to open a new tab and resolve it; the editor will update once you return.
• Hiding the cart: Once conditions are met, simply turn off the "Cart" toggle. Visitors will still be able to checkout when they click "Add to cart" on a product.
• From store settings: The "Enable cart" description in "Store › Settings › General" also includes a link to open these header settings directly.
• Positioning on different devices: On desktop, all buttons are placed to the right of action buttons. On mobile and tablet, up to 2 functional buttons appear next to the menu button, with the rest automatically placed at the top of the opened menu. In the "Left Sidebar" layout, if there is only one functional button, it shares the row with the brand logo; if there are two or more, they are placed on a separate line below the logo and site name.

Designing the Footer

1. Brand Logo, Borderless Presentation, and Social Links

• Display brand info: Use multi-select capsules to decide whether to show the "Brand Logo," "Site Name," and "Social Links."
• Display social links (individual selection): Once enabled, a compact row of platform capsules appears, allowing you to freely select which social links to display in the footer.
• Logo size and "Logo with white border":
  • The footer logo defaults to a clean, borderless, proportional presentation (horizontal logos or transparent backgrounds won't be cropped by unnecessary white borders; sizes: Small/Medium/Large).
  • If your image requires a white background, enable the "Logo with white border" toggle.
• Brand bio and copyright text: Enter a short brand description (long text collapses if over 150 characters) and a copyright notice (e.g., © 2026 Brand Name).

2. Multi-column Group Navigation, Contact Info, and Legal Links

• Create multi-column footer navigation with "Groups":
  • When adding items to "Navigation Items" in the footer, set the link type to "Dropdown Group." This group will automatically render as a separate column in the desktop footer (the group name becomes the column header, and sub-items become the vertical link list).
  • Single link items are added to the default navigation column. Combined with "Contact Us" on the right, you can create a neat 4-column footer grid.
• Contact information: Choose whether to display address, phone, email, and business hours (sourced from ).
• Legal links and Cookie settings: Select the legal links to list at the bottom of the footer (please first enable these pages in ). If is enabled, a "Cookie Settings" button will also be provided here for visitors to update their preferences.

3. Footer Layout, Module Background, and Dual Action Buttons

• Footer layout (3 types):
  • Multi-column Standard (default): Brand logo, bio, buttons, and social icons on the left; multi-column navigation and contact info on the right.
  • Centered Symmetry: Centers the logo, name, bio, buttons, social icons, and navigation.
  • Minimalist Single-line: Omits the large upper section, presenting only the site name, copyright text, action buttons, social icons, and legal links in a single clean line.
• Module background (6 surface colors): Defaults to soft Foggy Gray/Charcoal Gray. When you select "Brand Primary Color" or "Matte Black/Soft Charcoal," the footer's contact icon borders, text, and dividers automatically switch to high-contrast semantic colors to ensure visibility.
• Add custom buttons (up to 2): Place up to 2 action buttons below the brand bio (or to the right of the minimalist single-line).

Creating Navigation Items, Dropdowns, and In-page #Anchor Links

Header and footer navigation menus do not automatically populate when you add pages. You must manually add and reorder them in "Navigation Items":

1. Bind destinations with the unified link selector

Click "Add navigation item," enter the display text (e.g., "Services"), and search or select in "Select link destination":

• Internal content: Directly select standard pages, products, product categories, blog posts, or post categories/tags/authors (if the selected page is "Hidden" or the post is a "Draft," a reminder label appears; the live site automatically hides unpublished items to prevent 404 errors).
• External URL: Scroll to the bottom and select "External URL" (or paste https://... directly into the search box). Choose to open in the "Same tab" or "New tab."
• Dropdown Group: After switching to "Dropdown Group," add up to 8 sub-items (if you have already created public subpages for the selected page, you can click the "Add N subpages as dropdown" button to import them in one click; see ). In the header, this appears as a dropdown menu triggered by hover or click (accordion on left sidebar and mobile). In the footer, it automatically becomes an independent navigation column.

2. Setting "Click navigation or button → Scroll to specific section" (In-page #Anchor jump)

If you have a one-page site or want visitors to scroll smoothly to the FAQ section in the middle of the homepage when they click "FAQ" in the navigation, follow these two steps:

1. Name the target module's anchor ID: Click the target module (e.g., FAQ), scroll to the bottom of the right-hand form under "Global and Advanced Settings," and enter a lowercase English name in "Block Anchor ID" (e.g., faq).
2. Select the anchor in the navigation item or button: Open the header (or custom button) editor, select the page in "Select link destination" (e.g., "Homepage"), and the "Select page anchor" dropdown will appear below. Simply select #faq!

Related Documents