Setting up the navigation bar, top banner, and footer

The Navigation bar (Navbar), the top Banner, and the Footer are the three global pieces that frame your website.

How global site pieces work

In the Layers panel, you’ll see Site menu (Nav), Banner, and Site footer (Footer) grouped under All pages (Shared across every page):

• They sync automatically: any change you make to the menu or footer while on the Home page automatically applies to every other page on your site.
• Hide on a specific page: if you’re building a landing page and want to hide the menu or footer on that page only, open its options in Layers and pick Hide on this page only (instead of Remove from all pages).

Editing navigation menu links, dropdown menus, mega menus, and the mobile menu

When you select the Navigation bar and open its Navbar tab (or click More menu options… in the context bar), you can choose how its links are managed:

• Automatic (Updates on its own): the menu builds itself from your published site pages and active catalog sections. Whenever you create, rename, or delete a page, the menu updates automatically.
• Manual (You control this): lets you add, reorder, rename, or remove items however you like, including:
  • Simple links to pages, section anchors, or external URLs.
  • Dropdown (+ Dropdown): groups several sub-links under a single label on hover or click.
  • Mega menu (+ Mega menu): opens a wide panel where you can design columns, featured links, images, or cards.

To preview and edit how the open menu looks on phones or tablets, switch the top viewport bar to Mobile and click Open the menu to edit it in the navigation bar’s context bar.

Turning on or customizing the action button (CTA), search, and cart icon in the bar

On the far right of the navigation bar, you can show or hide three key tools:

1. Action button (Show the CTA): the main call-to-action button in your header (for example, Book appointment or Get started). You can customize its label, link destination, and button style.
2. Search: displays the magnifying glass icon so visitors can search your pages, offers, or blog posts right away.
3. Cart: when Use a cart is enabled under Settings → Site settings, the shopping bag icon with its item counter appears automatically in the site bar.

Setting up bar behavior (sticky on scroll, transparent, and link separators)

From the Navbar settings and under Brand → Styles → Sections → Navigation bar, you can control how the header behaves as visitors scroll:

• Sticky (Sticky): keeps the navigation bar fixed at the top of the screen while scrolling.
• Background and transparency: use the theme’s background color, a frosted glass blur (Blur), or place it Over content so it sits transparently over your hero section.
• Separation and link separators: choose how the bar divides from the page (No separation, Hairline, Ink line, Thick line, Tinted bar, Tinted with line) and whether to show a Separator between menu links (None, Line, Dot, or Slash).

Adding and customizing the top promo Banner (message, discount code, phone, socials)

Above the navigation bar, you can enable the site Banner (from Layers → Add banner). When selected, its Banner panel is organized into three tabs:

• Message: write your announcement or promo (for example, “Free shipping on orders over $50”), add a companion Icon, and include an optional Link (Learn more).
• Extras:
  • Discount code: enter a coupon code (for example, SAVE20) so it appears as a pill that visitors can copy to their clipboard with a single click.
  • Phone / WhatsApp: add your number and pick what happens When tapped (Call or open WhatsApp).
  • Social media: display direct icons to your social profiles.
• Visibility:
  • Background and Alignment: pick the background (Like the footer, Brand color, or Soft) and whether content is Centered or Spread.
  • Close button: lets visitors dismiss the banner so they won’t see it again until you update the promotion dates.
  • Date scheduling (Starts / Ends): schedule the exact start and end dates so the banner turns on and off automatically when your campaign finishes.
  • Where it shows: across every page or Only on this page.

Editing the Footer: columns, logo, social links, dynamic copyright year, and automatic legal policy links

Select the Footer at the bottom of the canvas and open its Footer tab to set up:

• Brand (Logo and description): use the same logo as the top bar (or a dedicated footer logo) paired with your business tagline or summary.
• Link and contact columns: just like the menu, the footer can fill itself automatically from your pages, catalog, contact details, and social profiles, or you can customize each column manually (Add column, Add link).
• Legal strip and automatic policy links:
  • Dynamic copyright: use {year} next to your company name (© {year} Your company. All rights reserved.) so the year updates automatically every January 1st.
  • Legal links: automatically links to the legal documents you have completed and published under Settings → Policies (Terms and conditions, Privacy policy, Refunds, Cancellations, Shipping, and Legal notice).