Tutorials

Shopify Header und Footer auf bestimmten Seiten entfernen [2025 Easy Guide]

Melden

Hier ist ein aktueller Schritt-für-Schritt-Guide für 2025, wie du den Header und Footer auf spezifischen Shopify-Seiten entfernst. Das ist besonders nützlich für Landingpages, Sales-Funnels oder "Coming Soon"-Seiten.

In modernen Shopify-Themes (Online Store 2.0 wie Dawn, Sense, Refresh etc.) gibt es drei gängige Wege, dies zu tun. Wir starten mit der einfachsten Methode.

Methode 1: Über das Page-Handle (CSS-Methode) – Am schnellsten

Diese Methode eignet sich hervorragend, wenn du nur auf einer einzigen, bereits existierenden Seite Header und Footer ausblenden willst, ohne neue Templates zu erstellen.

  1. Finde dein Page-Handle:

    • Gehe im Shopify Admin zu Onlineshop > Seiten.
    • Klicke auf die gewünschte Seite.
    • Scrolle ganz nach unten zu "Vorschau des Suchmaschineneintrags" und klicke auf "Website-SEO bearbeiten".
    • Das Ende der URL (nach /pages/) ist dein Handle (z. B. black-friday-aktion).

  2. Code einfügen:

    • Gehe zu Onlineshop > Themes.
    • Klicke beim aktuellen Theme auf die drei Punkte (...) > Code bearbeiten.
    • Suche die Datei theme.liquid.
    • Scrolle nach ganz unten und füge vor dem schließenden </body>-Tag folgenden Code ein:
{% if page.handle == 'dein-seiten-handle' %}
<style>
  .header-wrapper, .section-header, #shopify-section-sections--footer, .footer {
    display: none !important;
  }
</style>
{% endif %}

Ersetze dein-seiten-handle mit dem Namen aus Schritt 1.

Methode 2: Ein eigenes Seiten-Template erstellen (Sauberste Lösung)

Dies ist die "Profi-Lösung" für Themes wie Dawn. Du erstellst ein Layout, das du später auf beliebig viele Seiten anwenden kannst.

  1. Template erstellen:

    • Gehe zu Onlineshop > Themes > Anpassen (Customizer).
    • Klicke oben in der Mitte auf das Dropdown-Menü (meist steht dort "Startseite").
    • Wähle Seiten > Vorlage erstellen.
    • Name: landingpage-ohne-header. Basiere es auf der "Standardseite".

  2. Code-Anpassung im Theme:

    • Gehe zurück zur Code-Bearbeitung (Code bearbeiten).
    • Suche im Ordner Templates nach der neu erstellten JSON-Datei (z. B. page.landingpage-ohne-header.json).
    • Hier siehst du, welche "Sections" geladen werden.

  3. Header/Footer im Liquid ausschließen:

    • Öffne die Datei theme.liquid.
    • Suche nach {% sections 'header-group' %} (oder ähnlich) und {% sections 'footer-group' %}.
    • Umschließe diese Zeilen mit einer Abfrage deines neuen Templates:
{% unless template contains 'landingpage-ohne-header' %}
  {% sections 'header-group' %}
{% endunless %}

{{ content_for_layout }}

{% unless template contains 'landingpage-ohne-header' %}
  {% sections 'footer-group' %}
{% endunless %}
  1. Template zuweisen:
    • Gehe zurück zu Onlineshop > Seiten.
    • Wähle deine Seite aus.
    • Wähle rechts unter Theme-Vorlage dein neues Template landingpage-ohne-header aus und speichere.

Methode 3: CSS direkt im Theme-Customizer (Kein Code-Editor nötig)

Seit den neuesten Shopify-Updates (2024/2025) kannst du CSS oft direkt im Customizer hinzufügen.

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Navigiere im Customizer zu der Seite, die du bearbeiten willst.
  3. Klicke links in der Seitenleiste ganz unten auf Theme-Einstellungen (Zahnrad-Icon).
  4. Suche den Bereich Benutzerdefiniertes CSS.
  5. Füge dort den Code ein, aber achte darauf, die CSS-Klasse deiner spezifischen Seite zu nutzen (Shopify fügt dem <body> oft eine Klasse wie .template-page-handle hinzu):
.template-page-dein-handle .header-wrapper, 
.template-page-dein-handle .footer {
  display: none !important;
}

Wichtige Hinweise für 2025:

  • Apps: Wenn du PageBuilder wie PageFly oder Shogun nutzt, haben diese oft einen einfachen Schalter in den Seiteneinstellungen ("Hide Header & Footer"), den du mit einem Klick aktivieren kannst.
  • Checkout: Beachte, dass du den Header/Footer im Checkout-Bereich nur als Shopify Plus Händler über die checkout.liquid oder die neuen Checkout-Extensibility-Tools entfernen kannst.
  • Vorsicht bei SEO: Wenn du den Header entfernst, entfernst du auch die Hauptnavigation. Stelle sicher, dass der Nutzer einen Weg zurück zum Shop hat (z.B. durch einen auffälligen "Zurück zum Shop"-Button auf der Seite), um die Absprungrate gering zu halten.

Welche Methode soll ich wählen?

  • Für eine schnelle Änderung: Methode 1.
  • Wenn du viele Landingpages planst: Methode 2.
0