Änderung der Navigationsanzeige

Hallo,

auf dem oberen Bild zu sehen ist meine Startseite von meinem Shop. Wie auf dem Bild markiert mit dem roten Punkt, wird die Navigationsliste auf der Startseite angezeigt. Ich würde gerne diese Navigationsleiste nur auf meiner Shopseite anzeigen lassen, also nachdem man auf die untere Schaltfläche welche ein Rechteck ist auf der auch Shop steht gedrückt hat.

Also auf dieser nachfolgenden Seite soll nur die Navigationsleiste angezeigt werden.

Ich benutze das Theme Dawn.

Ich bedanke mich im voraus.

Hey @LUISLOCK

Danke für die Bilder und nur so dass ich den Sachverhalt richtig verstehe, du möchtest:

  • …die Menüleiste auf deiner Homepage ausblenden und nur den weissen Umriss-Call-To-Action Button mit dem Label “Shop” auf der Homepage anzeigen.
  • Wenn man auf diesen klickt kommt man dann auf die Kollection Page in deinem zweiten Bild.
  • Auf dieser Page soll dann die Menüleiste angezeigt werden wie im 2. Bild.

Habe ich das richtig verstanden? Wenn ja, musst du einen Code mit Liquid, CSS, und JavaScript in deine theme.liquid einbauen, wie folgendes generelles Beispiel.

Wenn du es selber DIY 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!

Schritte zum Ausblenden der Menüleiste auf der Startseite1. Zugriff auf den Theme-Code:

  • Gehe in deinem Shopify-Adminbereich zu Online Store > Themes.
  • Wähle dein aktuelles Thema aus und klicke auf Actions > Edit code.
  1. CSS-Anpassungen:

    • Suche die CSS-Datei deines Themes, oft base.css oder viel einfacher: folge unsere Anleitung hier.
    • Füge folgenden CSS-Code hinzu, um die Menüleiste auf der Startseite auszublenden:
body.template-index .header-wrapper {
  display: none;
}

Oder

.template-index .header__inline-menu {
  display: none;
}

Dieser Code sorgt dafür, dass die Menüleiste nur auf der Startseite (template-index) ausgeblendet wird.

JavaScript-Logik:

  • Wenn du die Menüleiste basierend auf weiteren Bedingungen (wie Klicks oder anderen Aktionen) steuern möchtest, kannst du JavaScript-Code in der theme.js Datei oder einer anderen JavaScript-Datei hinzufügen.
  • Beispiel für das Ein- und Ausblenden beim Klicken auf einen Button:
document.addEventListener('DOMContentLoaded', function() {
  const shopButton = document.querySelector('.hero-banner-button'); // Angenommen, dein Button hat diese Klasse
  shopButton.addEventListener('click', function() {
    document.querySelector('.header-wrapper').style.display = 'block'; // Zeigt die Menüleiste an
  });
});

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


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.