Tutorial

Header & Footer auf spezifischen Shopify-Seiten ausblenden [2025 Easy Guide]

Melden

Hier ist ein leicht verständliches Tutorial, das speziell auf die aktuellen Shopify-Versionen (Online Store 2.0) für das Jahr 2025 zugeschnitten ist.

Möchtest du eine Landingpage, eine "Coming Soon"-Seite oder eine spezielle Aktionsseite erstellen, ohne dass die Besucher durch das Menü (Header) oder die Links im Footer abgelenkt werden?

In diesem Guide zeige ich dir die zwei einfachsten Methoden, wie du Header und Footer gezielt für einzelne Seiten deaktivierst – ohne teure Apps.

Vorbereitung: Ein Backup erstellen

Bevor du Änderungen am Code vornimmst, gehe zu Onlineshop > Themes, klicke auf die drei Punkte neben deinem aktiven Theme und wähle Duplizieren. So hast du immer eine Sicherungskopie.

Methode 1: Über die CSS-Anpassung (Die schnellste Methode)

Diese Methode ist ideal, wenn du nur eine oder zwei Seiten bearbeiten möchtest. Wir nutzen den "Handle" (den URL-Namen) der Seite.

  1. Den Page-Handle finden:

    • Gehe im Shopify-Admin zu Inhalt > Seiten.
    • Klicke auf die Seite, die du bearbeiten willst.
    • Scrolle ganz nach unten zu "Vorschau des Suchmaschinen-Eintrags". Der Teil nach .../pages/ ist dein Handle (z. B. black-friday-deal).

  2. Code einfügen:

    • Gehe zu Onlineshop > Themes > Anpassen (Customize).
    • Klicke ganz links auf das Zahnrad-Symbol (Theme-Einstellungen).
    • Suche den Punkt Benutzerdefiniertes CSS (Custom CSS).
    • Füge folgenden Code dort ein (ersetze dein-seiten-handle durch deinen echten Handle):
/* Header und Footer auf einer spezifischen Seite ausblenden */
.page-dein-seiten-handle .section-header, 
.page-dein-seiten-handle .section-footer {
    display: none !important;
}

Hinweis: Falls dein Theme andere Klassennamen nutzt (z.B. .header statt .section-header), kannst du dies im Inspektor deines Browsers prüfen.

Methode 2: Über die theme.liquid (Die Profi-Methode)

Diese Methode ist sauberer, wenn du die Elemente komplett aus dem Quellcode für diese Seite ausschließen möchtest.

  1. Gehe zu Onlineshop > Themes.
  2. Klicke auf die drei Punkte (...) und wähle Code bearbeiten.
  3. Suche im Ordner Layout die Datei theme.liquid.
  4. Suche im Code nach den Begriffen {% sections 'header-group' %} (oder {% section 'header' %}) und {% sections 'footer-group' %}.
  5. Umschließe diese Zeilen mit einer "Unless"-Bedingung. Es sollte dann so aussehen:

Für den Header:

{% unless page.handle == 'dein-seiten-handle' %}
  {% sections 'header-group' %}
{% endunless %}

Für den Footer:

{% unless page.handle == 'dein-seiten-handle' %}
  {% sections 'footer-group' %}
{% endunless %}
  1. Klicke auf Speichern.

Methode 3: Ein eigenes Template erstellen (Beste Lösung für OS 2.0)

Wenn du ein modernes Theme (wie Dawn) nutzt, kannst du ein spezielles Template erstellen, das keinen Header/Footer enthält.

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Klicke oben in der Mitte auf das Dropdown-Menü (meist steht dort "Startseite").
  3. Wähle Seiten > Vorlage erstellen.
  4. Nenne sie z.B. landingpage-ohne-header.
  5. Das Problem: In der Standard-Anpassung lassen sich Header und Footer oft nicht einfach "löschen", da sie statische Sektionen sind.
  6. Die Lösung: Nutze Methode 1 (CSS) in Kombination mit diesem neuen Template. Füge das CSS einfach direkt in die Template-Einstellungen ein, falls dein Theme das zulässt, oder nutze den Handle des neuen Templates.

Zusammenfassung: Wann welche Methode?

  • Schnell & Einfach: Methode 1 (CSS). Funktioniert in 90% der Fälle sofort.
  • Performance-Optimiert: Methode 2 (Liquid). Verhindert, dass der Code für Header/Footer überhaupt geladen wird.
  • Für Marketing-Profis: Methode 3. Erlaubt es dir, das Design komplett unabhängig von anderen Seiten zu steuern.

Pro-Tipp für 2025: Wenn du Page Builder wie PageFly oder Shogun nutzt, gibt es dort oft einen Schalter in den Seiteneinstellungen, der "Hide Header & Footer" heißt. Schau dort zuerst nach, bevor du im Code arbeitest!

Hast du Fragen zu einem spezifischen Theme? Schreib es in die Kommentare!

0