---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer"
locale: en
meta:
  "og:title": "Academy Article"
---

[Go to home](https://academy.laioutr.com/en)

- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)

- [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)

- [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)

# Set up shop navigation and footer

Header Shop, Mega Menu or Menu Side by Side, Top Bar and Footer form the navigation of a storefront and are usually maintained as global sections. In Studio, menu items, search, service links, contact details and footer columns are set up once and adapted per language.

## Before you start

<dl>

<dt>Plan</dt>
<dd>Laioutr UI licence for the project (platform edition)</dd>

<dt>Role</dt>
<dd>Editor or Admin in the project</dd>

<dt>Duration</dt>
<dd>10 min</dd></dl>

### Prerequisites

- Header and footer as global sections in the project
- Logo in the media library
- Connected commerce system for category menus

Last reviewed on October 15, 2026

Header and footer frame every page of the storefront. Laioutr UI provides ready-made sections for them, usually set up as global sections: a change applies to every page that uses them.

### Header Shop

The **Header Shop** holds the logo, search with suggestions and icons for customer account, wishlist and cart with a counter. On desktop, a **Mega Menu** suits broad ranges and a **Menu Side by Side** suits deep category trees; on mobile an off-canvas menu opens. When scrolling down, the header slides away and returns when scrolling up. Sites without a shop use the leaner **Header Basic**.

### Top Bar

The **Top Bar** above the header shows service links, language selection and a dark mode switch on desktop.

### Footer

The **Footer** brings together logo, phone, email and address, up to four menu columns, social media icons and the copyright line. Content can be maintained per language, so every market gets matching links.

## Step by step

1. 1 ### Step 1: Open the header

   Open any page in Studio and select the header section in the header area of the layer tree. If the header is a global section, changes apply to every page.
2. 2 ### Step 2: Choose and fill the menu

   Choose **Mega Menu** or **Menu Side by Side** for desktop and create the menu items. Individual items, such as Sale, can be highlighted with a colour.
3. 3 ### Step 3: Set the mobile search

   Decide whether phones show only a search icon or a visible search field. For search-heavy ranges, the visible search field is usually the better choice.
4. 4 ### Step 4: Set up the Top Bar

   Add service links such as help, stores or contact and show or hide language selection and the dark mode switch as needed. The grey colour mode usually fits, black only above bright hero images.
5. 5 ### Step 5: Maintain the footer

   In the footer area, enter contact details, menu columns with links, social media profiles and the copyright name.
6. 6 ### Step 6: Check each language

   Switch market or language in the Studio top bar and check menu and footer texts for every language.
7. 7 ### Step 7: Save and publish

   Use **Save** to store the draft and **Publish** once everything looks right.

## Check the result

In the desktop preview, open the menu, scroll down and up again and check that the header slides away and returns. Then open the off-canvas menu in the mobile view, test the search and tap the phone and email links in the footer.

## Frequently asked questions

Mega Menu or Menu Side by Side?

The Mega Menu suits broad ranges with many top-level categories and leaves room for promotional tiles in the open menu. Menu Side by Side suits deep category trees because it slides in level by level.

Why is the Top Bar not visible on smartphones?

The Top Bar only appears on large screens so that phones keep more space for shopping. On mobile, language selection and the dark mode switch sit in the off-canvas menu.

Can every market have its own footer?

Footer texts and links can be maintained per language. This way, every market gets its own links to imprint, shipping or contact, for example, without a second footer.

Where do the menu items come from?

Menu items can be taken from the category structure of the connected commerce system or created manually. Manually created items can also have their own text colour.

## Related

- [Global sections for header, footer and recurring content](https://academy.laioutr.com/en/artikel/global-sections-for-header-footer-and-recurring-content)5 min

  A global section is created once and referenced on any number of pages. Changing its content changes it on every page that uses it, which is typical for headers, footers or a USP bar.
- [Maintain markets and translations in Studio](https://academy.laioutr.com/en/artikel/maintain-markets-and-translations-in-studio)6 min

  Languages and markets are set up in Cockpit under Translations and Markets, and Studio uses them in its market and language switcher. Translatable fields are maintained per language; empty fields show the value of the fallback language.
- [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)6 min

  Search consists of the search field with suggestions in the shop header and the search results page with search term, result count, filters and product grid. Suggestions and results come from the search or commerce app through Orchestr, so search quality depends on the connected search service.
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min

  Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.
- [Preview and publish changes in Studio](https://academy.laioutr.com/en/artikel/preview-and-publish-changes-in-studio)5 min

  Studio saves changes as a draft and shows them instantly in the live preview. Publish in the top bar takes the saved state to the storefront through a deployment of the environment.

## [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)

Search this guide

1. [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
2. [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
3. [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
4. [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min
5. [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)8 min
6. [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)9 min

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Storefront features",
          "item": "https://academy.laioutr.com/en/bereiche/storefront-features",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Content and navigation",
          "item": "https://academy.laioutr.com/en/leitfaeden/content-and-navigation",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Set up shop navigation and footer",
          "item": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Mega Menu or Menu Side by Side?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>The Mega Menu suits broad ranges with many top-level categories and leaves room for promotional tiles in the open menu. Menu Side by Side suits deep category trees because it slides in level by level.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Why is the Top Bar not visible on smartphones?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>The Top Bar only appears on large screens so that phones keep more space for shopping. On mobile, language selection and the dark mode switch sit in the off-canvas menu.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Can every market have its own footer?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Footer texts and links can be maintained per language. This way, every market gets its own links to imprint, shipping or contact, for example, without a second footer.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer#/schema/question/4",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Where do the menu items come from?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Menu items can be taken from the category structure of the connected commerce system or created manually. Manually created items can also have their own text colour.</p>"
      }
    }
  ]
}
```