Betreff: Header nur auf einer einzelnen Seite ausblenden - Theme Dawn

LauraLemuria · ‎04-07-2024

Hallo Zusammen,

ich komme an einem Punkt leider einfach nicht weiter und habe auch keine Antwort hier im Forum gefunden. Hier mein Problem: Ich möchte eine Seite als Landingpage benutzen, also sollte sie keinen Header haben. Ich habe für diese Seite eine neue Vorlage erstellt und diese Vorlage auch der entsprechenden erstellten Seite zugeordnet. Die Änderungen sollte also eigentlich nur diese Seite / Vorlage betreffen. Wenn ich jedoch innerhalb dieser Vorlage alle Elemente im Header ausblende, sind sie dennoch überall auf allen Seiten inkl. Startseite verschwunden! Heißt der Header mit dem Menü ist dann auch nicht mehr auf der Startseite zu sehen.

Ich weiß nicht wirklich, was ich hier falsch mache, denn ich arbeite ja nicht in der Standardvorlage, sondern in einer extra neu erstellen Vorlage, die nur einer Seite zugewiesen ist. Ich hoffe ihr könnt mir weiterhelfen.

Herzliche Grüße
Laura Eggert

Gabe · ‎04-08-2024

Hey Laura! @LauraLemuria

Wenn man den Header in Dawn über das Augensymbol ausblendet dann macht es das auf alle Seiten auf Elternebene (global), nicht auf Kinderebene wie mit dem Theme Vorlagen.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um den Header nur auf bestimmten Seiten deines Shopify Dawn Themes auszublenden, musst du eine spezielle Seitenvorlage erstellen oder anpassen und CSS oder Liquid-Code verwenden, der gezielt nur auf diese Seite wirkt. Eine Möglichkeit ist, eine CSS-Klasse oder ein eindeutiges Kennzeichen in der Vorlage der spezifischen Seite hinzuzufügen und dann CSS zu nutzen, um den Header nur auf dieser Seite auszublenden.

Beispiel: Wenn du eine Klasse .hide-header nur auf der Landingpage hinzufügst, könntest du im CSS mit .hide-header .header-wrapper { display: none; } den Header ausblenden. Erinnere dich daran, dass diese Änderungen nur in der spezifischen Vorlage vorgenommen werden sollten, um globale Auswirkungen zu vermeiden.

Erstelle eine Seitenvorlage für die spezifische Seite.
Füge in der neuen Seitenvorlage eine spezifische Klasse zum obersten Container-Element hinzu, z.B. <body class="custom-page">.
Füge folgenden CSS-Code hinzu per unserer Anleitung hier:

.custom-page .header-wrapper {
    display: none;
}

Dies sorgt dafür, dass der Header nur auf Seiten mit der Klasse custom-page ausgeblendet wird. Stelle sicher, dass du den Klassennamen (custom-page) entsprechend anpasst, um Konflikte mit anderen Stilen zu vermeiden.

Bei weiteren Fragen werde ich dich an einen unserer oben-verlinkten Experten leiten. Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

Gabe · ‎04-08-2024

Hey Laura! @LauraLemuria

Wenn man den Header in Dawn über das Augensymbol ausblendet dann macht es das auf alle Seiten auf Elternebene (global), nicht auf Kinderebene wie mit dem Theme Vorlagen.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um den Header nur auf bestimmten Seiten deines Shopify Dawn Themes auszublenden, musst du eine spezielle Seitenvorlage erstellen oder anpassen und CSS oder Liquid-Code verwenden, der gezielt nur auf diese Seite wirkt. Eine Möglichkeit ist, eine CSS-Klasse oder ein eindeutiges Kennzeichen in der Vorlage der spezifischen Seite hinzuzufügen und dann CSS zu nutzen, um den Header nur auf dieser Seite auszublenden.

Beispiel: Wenn du eine Klasse .hide-header nur auf der Landingpage hinzufügst, könntest du im CSS mit .hide-header .header-wrapper { display: none; } den Header ausblenden. Erinnere dich daran, dass diese Änderungen nur in der spezifischen Vorlage vorgenommen werden sollten, um globale Auswirkungen zu vermeiden.

Erstelle eine Seitenvorlage für die spezifische Seite.
Füge in der neuen Seitenvorlage eine spezifische Klasse zum obersten Container-Element hinzu, z.B. <body class="custom-page">.
Füge folgenden CSS-Code hinzu per unserer Anleitung hier:

.custom-page .header-wrapper {
    display: none;
}

Dies sorgt dafür, dass der Header nur auf Seiten mit der Klasse custom-page ausgeblendet wird. Stelle sicher, dass du den Klassennamen (custom-page) entsprechend anpasst, um Konflikte mit anderen Stilen zu vermeiden.

Bei weiteren Fragen werde ich dich an einen unserer oben-verlinkten Experten leiten. Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

LauraLemuria · ‎04-08-2024

Hi Gabe,

zunächst einmal vielen Dank! Ich kann verstehen, was du meinst und in welche Richtung die Lösung geht. Ich habe es nun selbst versucht, aber scheitere immer wieder an folgendem Punkt:

2.) Füge in der neuen Seitenvorlage eine spezifische Klasse zum obersten Container-Element hinzu, z.B. <body class="custom-page">.

Von daher wäre es wahrscheinlich gut, wenn ich einmal einen Experten engagieren würde. Optimal wäre, wenn dieser mir zeigen könnte wie es geht, denn sonst muss ich bei jeder neuen Landingpage immer wieder einen Experten engagieren 😉 Ich würde es zukünftig gerne selbst können. Deshalb danke erstmal für deine Tipps!

Herzliche Grüße
Laura

Gabe · ‎04-08-2024

Hey Laura! @LauraLemuria

Das kann ich voll verstehen und ein Experte kann das für dich machen. Im Grunde, um in Dawn eine spezifische Klasse wie <body class="custom-page"> hinzuzufügen, muss man normalerweise direkt im Theme-Code arbeiten, was in Shopify nicht so einfach ist, da die <body>-Tag Direktbearbeitung nicht über die Shopify-Oberfläche unterstützt wird. Stattdessen kannst du versuchen, einen eindeutigen Bezeichner oder eine Klasse in den übergeordneten Container deiner spezifischen Seitenvorlage einzufügen, und dann CSS verwenden, um den Header nur auf dieser Seite auszublenden.

Wenn diese Anpassung für dich zu komplex ist, empfehle ich, wie gesagt, die Hilfe eines Shopify-Experten oder Entwicklers in Anspruch zu nehmen, um die Änderung sicher durchzuführen. Du kannst auch deine Frage auf Englisch in unserem Experten Forum hier posten, aber möglichst mit Bilder und einen Link zu einem Beispiel.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Betreff: Header nur auf einer einzelnen Seite ausblenden - Theme Dawn

Header nur auf einer einzelnen Seite ausblenden - Theme Dawn

Community Blog Artikel