Ankündigungsleiste sticky machen Dawn

[vagabund]

Hallo ich benutze das DAWN Theme und hätte gerne, dass die Ankündigungsleiste immer fix im Blickfeld bleibt. Ich habe bereits ein paar genannte Möglichkeiten aus der Community probiert, das hat aber leider nie zu dem gewünschten Ergebnis geführt.

Ich hoffe ihr könnt mir helfen, schon einmal vielen Dank dafür 🙂

[Gabe]

Hey @vagabund 

Ich sehe was du meinst denn die Info in der Ankündigungsleiste soll eigentlich zusammen mit der Sticky Header auch permanent Sticky bleiben. Klingt logisch!

Du musst also die CSS Class der Ankündigungsleiste ausfindig machen und weitere CSS zum CSS Editor hinzufügen:

Ich habe jetzt den folgenden CSS Code erfolgreich getestet:

.shopify-section.shopify-section-group-header-group {
   position: sticky;
   z-index: 13;
   top: 0;
}
.section-header {
   top: 37px !important;
}

Der CSS-Code macht die gesamte Sektion, die die Ankündigungsleiste enthält, sticky und setzt sie ganz oben auf der Seite fest. Hier noch ein paar Hinweise zu dem Code, den du gefunden hast, für den Fall, dass du oder jemand anders ihn in Zukunft anpassen möchte:

1. Position Sticky: Die Eigenschaft position: sticky; ist eine hybride Version zwischen relative und fixed Positionierung. Ein Element wird sich so verhalten, als wäre es position: relative; positioniert, bis es einen bestimmten Punkt beim Scrollen erreicht, ab dem es sich wie position: fixed; verhält. Das ist ideal für Kopfzeilen, Navigationsleisten oder in deinem Fall die Ankündigungsleiste.

2. Z-Index: Ein z-index von 13 ist spezifisch gewählt, um sicherzustellen, dass diese Sektion über anderen Elementen auf der Seite angezeigt wird. Dies ist wichtig, da es sonst von anderen Elementen mit einem höheren z-index überlagert werden könnte.

3. Top 0: Dies fixiert die Sektion an der obersten Position des Viewports, sobald sie sticky wird. Es sorgt dafür, dass sie immer sichtbar bleibt, auch beim Scrollen.

4. Section-Header Adjustment: Die .section-header Anpassung mit top: 37px !important; scheint spezifisch für einen anderen Teil deines Headers zu sein und nutzt !important, um sicherzustellen, dass diese Regel Vorrang vor anderen möglichen Konflikten hat. Dies könnte nötig sein, um Layout-Probleme zu korrigieren oder die Position eines anderen Elements zu justieren, das sich relativ zur sticky Sektion verhält.

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.

[vagabund]

Klasse, danke für die schnelle Antwort! 

Ich würde mir wünschen, dass der Header nur beim hochscrollen erscheint, die Ankündigungsbar aber immer zu sehen ist.

Also wo genau muss ich den zusätzlichen Code nun einfügen? base.css? Wo Genau?

Wenn ich es so versuche wie du einzugeben, unter benutzerdefinierter CSS bekomme ich die Fehlermeldung "Sitzung im Onlineshop Editor kann nicht veröffentlicht werden".

Danke 🙂

[Gabe]

Hey @vagabund 

Du kannst den Code auch ganz unten im base.css eingeben da er vom CSS Editor doch nicht gespeichert wird aufgrund diesen Einschränkungen. 

So dass der Header nur beim hochscrollen erscheint, die Ankündigungsbar aber Sticky bliebt, musst du im Grunden ein Skript hinzufügen, das überprüft, ob der Nutzer nach oben oder unten scrollt. Wenn nach oben gescrollt wird, zeigst du den Header an; beim Scrollen nach unten versteckst du ihn:

<script>
// Definiere eine Variable, um die letzte Scroll-Position zu speichern
let lastScrollTop = 0;

window.addEventListener("scroll", function() {
  // Aktuelle Scroll-Position holen
  let st = window.pageYOffset || document.documentElement.scrollTop;

  // Überprüfe, ob nach oben oder unten gescrollt wird
  if (st > lastScrollTop){
      // Nach unten gescrollt
      document.getElementById("DeinHeaderID").style.top = "-100px"; // Header verstecken
  } else {
     // Nach oben gescrollt
     document.getElementById("DeinHeaderID").style.top = "0"; // Header anzeigen
  }
  lastScrollTop = st <= 0 ? 0 : st; // Aktualisiere die letzte Scroll-Position, setze aber nicht unter 0
}, false);
</script>

Ersetze "DeinHeaderID" durch die tatsächliche ID deines Headers. Die style.top = "-100px" und style.top = "0" Werte sind beispielhaft. Du musst sie möglicherweise an die Größe deines Headers anpassen. Wenn dein Header beispielsweise 50px hoch ist, möchtest du vielleicht -50px verwenden, um ihn vollständig zu verbergen.

[vagabund]

Hi Gabe, danke für deine Mühen! 🙏

Wo finde ich meine Header ID und die Größe davon? Sorry das ist alles Neuland für mich.

Ich sollte vielleicht noch erwähnen, dass ich in den Header Einstellungen bereits ausgewählt habe, dass der Header nur beim hochscrollen erscheint. Das funktioniert an sich auch, nur eben ohne Announcement bar.

Mit deinem ersten Code von dir bleibt jetzt der Header und die Announcement bar immer präsent.

Ich habe dir mal meine base.css angehängt (ohne deine codes), falls dir das es einfacher macht.

Tausend Dank!

[Gabe]

Hey @vagabund 

Für die Header ID kannst du die Class nehmen, in diesem Fall meines Dawn Theme Headers, wie .header-wrapper oder sticky-header.

An dieser Stelle werde ich einen Experten empfehlen, der/die einen Blick in das Code wirft denn so einfach ist das ganze Unternehmen nicht leider. Wenn du es selber doch 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!

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

[vagabund]

Hi Gabe, vielen Dank für deine Mühe.

Ich habe mich entschieden den Header ganz oben zu lassen, weil es einfacher ist.

Die Announcement bar habe ich sticky bekommen mit folgendem code:

#shopify-section-sections--20681872736583__announcement-bar {
position: sticky !important;
top: 0;
}

Leider funktioniert dies nur am Desktop, auf der mobilen Version nicht, warum?

Danke dir!

[vagabund]

Komischerweise funktioniert es auf der mobilen Vorschau im Theme Editor (announcement bar bleibt sticky), aber auf dem Handy funktioniert es nicht.

[Gabe · Accepted solution]

Hey @vagabund 

Das Problem, dass der Sticky-Code nur auf dem Desktop funktioniert und nicht auf mobilen Geräten, könnte auf mehrere Ursachen zurückzuführen sein, wie z. B., dass mobile Browser bestimmte CSS-Eigenschaften anders interpretieren oder zusätzliche Regeln benötigen. Es könnte sein, dass auf mobilen Geräten der Viewport oder z-Index anders gehandhabt wird, was die Sticky-Eigenschaft beeinflussen könnte. 

Überprüfe mal, ob im Theme spezifische media queries existieren, die die Sticky-Eigenschaft für mobile Geräte überschreiben oder einschränken. Es könnte auch helfen, die CSS-Regeln innerhalb eines media query zu definieren, das explizit für mobile Geräte gilt, um sicherzustellen, dass die Sticky-Funktionalität auf allen Geräten konsistent angewendet wird.

Um die Sticky-Eigenschaft für die Announcement-Bar auch auf mobilen Geräten anzuwenden, kannst du einen Code wie folgenden CSS-Code verwenden. Dieser Code beinhaltet ein Media Query, das speziell auf Bildschirmgrößen abzielt, die typischerweise für mobile Geräte verwendet werden.

#shopify-section-sections--20681872736583__announcement-bar {
  position: sticky !important;
  top: 0;
  z-index: 1000; /* Stellt sicher, dass die Announcement-Bar über anderen Elementen liegt */
}

@media (max-width: 768px) {
  #shopify-section-sections--20681872736583__announcement-bar {
    position: sticky !important;
    top: 0;
    z-index: 1000; /* Passt den z-Index auch für mobile Geräte an */
  }
}

Der Media Query @media (max-width: 768px) zielt auf Bildschirme mit einer maximalen Breite von 768px ab, was die meisten mobilen Geräte und Tablets in Hochformat einschließt. Du kannst die maximale Breite anpassen, um sie besser an deine spezifischen Bedürfnisse anzupassen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

[vagabund]

Leider immer noch nicht. Ich habe keinerlei relevante Veränderungen im code gemacht, es ist alles Standard

Im Chrome Browser am Desktop, wenn ich hier über rechtsklick Untersuchen und auf Mobile Ansicht wechsel, funktioniert es ebenfalls. Es funktioniert nur nicht auf dem Handy (nicht nur bei mir nicht)...

Danke dir vielmals!

[Gabe]

Gerne geschehen! 😉

[vagabund]

Hallo Gabe, nochmals vielen Dank für deine Unterstützung. Nachdem ich jetzt die base.css komplett durch den standard code ersetzt habe, funktioniert es. Woran es lag weiß ich allerdings nicht, denn an dem Code hatte ich nichts verändert.

Dennoch funktioniert deine Lösung, vielen Dank!

Ein letzte Frage: Weißt du wo ich die Durchlaufzeit der Announcements von min 3s auf 2s herabsetzen kann? Vielen Dank 🙂

[Gabe]

Hey @vagabund 

Ggf. können wir das 👀 als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme bekommst. Sende eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

[vagabund]

Vielen Dank für den Hinweis! Ich werde darauf zurück kommen 🙂

Ich hätte noch eine andere Frage: Vielleicht stehe ich hier nur auf dem Schlauch... Ist es nicht möglich den Header Bereich für die unterschiedlichen Seiten anders zu gestalten?

Oder anders gefragt: Wie kann ich unterschiedliche Ankündigungen in der Ankündigungsleiste -je nach Seite- erstellen?

Vielen Dank, wirklich klasse Support von euch! 🙂

[Gabe]

Hey @vagabund 

Ich sehe was du meinst - individuelle Ankündigungen in der oberen Leiste anzeigen im Shop, je nachdem auf welcher PDP, Pages, oder Kategorieseite usw. man sich befindet! Keine schlechte Idee! 😉

Hast du keine Apps dafür in unserem App Store finden können?

Es DIY machen

Wenn nicht, um die Ankündigungsleiste auf unterschiedlichen Seiten deines Shops mit individuelle Ankündigungen zu gestalten, gibt es mehrere Ansätze. Dawn, ist zwar für Flexibilität bekannt, erfordert jedoch oft benutzerdefinierte Anpassungen im Liquid für spezifische Anforderungen wie das. Der Grund: die Logik dieser Anpassung würde verlangen, dass der Code zuerst eine Anfrage durchgeführt, die überprüft, auf welcher Seite sich der User befindet, und basierend darauf unterschiedliche Ankündigungen anzeigt. Einfach willkürlich Ankündigungen anzeigen wird keinen richtigen Mehrwert bringen denn ggf. wird dann der falsche Inhalt in der Leiste angezeigt je nachdem wo man sich befindet, was nicht sehr professionell wäre.

Ggf. kannst du Metafields verwenden, benutzerdefinierte Daten zu speichern und diese auf bestimmten Seiten deines Shops zu verwenden. Du könntest Metafields definieren, um unterschiedliche Ankündigungstexte zu speichern und diese dann im Theme-Code abfragen, um auf verschiedenen Seiten unterschiedliche Ankündigungen anzuzeigen. Dies erfordert eine Anpassung des Liquid-Codes deines Themes.

Hier ein Beispiel:

{% if template.name == 'index' %}
  <!-- Code für die Ankündigungsleiste auf der Startseite -->
{% elsif template.name == 'product' %}
  <!-- Code für eine andere Ankündigungsleiste auf Produktseiten -->
{% endif %}

Also eine conditional logic wäre hier notwendig, um verschiedene Ankündigungen zu laden, basierend darauf welcher Page Handle oder welche Theme Vorlage verwendet wird. Das beinhaltet das Einfügen von Bedingungen in die Theme-Dateien (wie header.liquid), die basierend auf der aktuellen Seite unterschiedliche Header oder andere Elemente einbinden.

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.