Ankündigungsleiste slide DAWN Theme

Deutsch Diskussion Technische Fragen & Antworten
, ,

Topic summary

Wunsch: Der Text in der Ankündigungsleiste des Dawn-Themes soll nicht horizontal, sondern vertikal (von oben nach unten) scrollen.

Einschätzung: Das ist im Standard nicht vorgesehen; ohne passende App erfordert es Theme-Code-Anpassungen (Liquid/JavaScript/CSS). Es wird darauf hingewiesen, dass diese Interaktion ggf. keine optimale UX ist.

Technische Umsetzung (Kurzüberblick):

  • HTML-Struktur der Leiste anpassen (z. B. in header.liquid/announcement-bar.liquid) mit einem Container und einem absolut positionierten Inhalt.
  • CSS-Animation per @keyframes (translateY) für vertikales Scrollen; Container mit overflow: hidden und definierter Höhe; Inhalt mit kontinuierlicher Animation (Dauer/Takt anpassbar).
  • Auf Responsivität achten (Höhe/Timing je Gerät feinjustieren).

Best Practices & Risiken: Zuerst in einer Themekopie/Testumgebung testen, Backup erstellen bzw. Wiederherstellung einplanen. Änderungen können Ladezeiten beeinträchtigen und Theme-Updates verhindern; ggf. Expert:innen hinzuziehen. Hinweise ohne Gewähr.

Status: Keine fertige Lösung implementiert. Nächste Schritte: Entweder App prüfen oder den vorgeschlagenen Codeansatz adaptieren und testen; Thread bleibt offen.

Summarized with AI on January 2. AI used: gpt-5.
1

Screenshot (5).png

Hallo zusammen,

ich möchte gerne, dass der text oben nicht von links nach rechts swiped, sondern von oben nach unten. Kann mir da jemand helfen?

Vielen herzlichen Dank im Voraus.

2

Hey @Limanko_77

Danke für das Bild aber um den Text in der Ankündigungsleiste deines Dawn-Themes von oben nach unten swipen zu lassen, statt von links nach rechts, wirst du wahrscheinlich Anpassungen am vorhandenen Theme-Code vornehmen müssen wenn keine der Apps das kann. Abgesehen davon, wäre es tbh nicht unbedingt die beste UX für deine Kunden.

Aber hast du die Tipps von @Kai zum Thema Ankündigungsliste hier schon gelesen was man alles mit der Leiste machen kann um eine tollen Kundenerfahrung zu gewährleisten?

Standardmäßig bietet das Dawn-Theme Optionen für die Konfiguration der Ankündigungsleiste, wie die Möglichkeit, verschiedene Ankündigungsblöcke anzupassen, Social-Media-Symbole hinzuzufügen und auszuwählen, ob die Ankündigungen automatisch rotieren sollen oder manuell durchgeblättert werden können​​. Für eine spezifischere Anpassung, wie das Ändern der Richtung des Text-Scrolls, ist es erforderlich, direkt in die Theme-Dateien einzutauchen und eventuell JavaScript- oder Liquid-Code-Anpassungen vorzunehmen.

Da das Dawn-Theme sehr anpassungsfähig ist und Unterstützung für JSON-Templates, App-Blocks und Sektionen auf allen Seiten bietet​​, kannst du prinzipiell eigene Abschnitte erstellen oder vorhandene modifizieren, um das gewünschte Verhalten zu erreichen. Dies könnte bedeuten, dass du eventuell einen eigenen Skript schreiben musst, der die Bewegung des Textes von oben nach unten ermöglicht.

Beispiel: Zuerst musst du den HTML- und Liquid-Code für deine Ankündigungsleiste hinzufügen oder anpassen. Wenn du bereits eine Ankündigungsleiste hast, kannst du den vorhandenen Code anpassen. Andernfalls kannst du den folgenden Code als Basis verwenden und ihn in die entsprechende Datei deines Themes einfügen, zum Beispiel in header.liquid oder announcement-bar.liquid (abhängig von deinem Theme):


  

    {{ 'Deine Ankündigungsnachricht hier' | escape }}

Um den Text von oben nach unten scrollen zu lassen, benötigst du CSS, das einen Keyframe-Animationseffekt nutzt. Füge den folgenden CSS-Code in deine CSS-Datei ein:

@keyframes scrollDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.announcement-bar {
  overflow: hidden;
  position: relative;
  height: 50px; /* Höhe der Ankündigungsleiste, anpassbar */
}

.announcement-content {
  position: absolute;
  white-space: nowrap;
  animation: scrollDown 10s linear infinite; /* Anpassbare Animationsdauer */
}
  • Animation Timing: Du kannst die Dauer und das Timing der Animation (10s linear im obigen Beispiel) anpassen, um zu steuern, wie schnell der Text scrollt.
  • Höhe der Ankündigungsleiste: Stelle sicher, dass die Höhe der Ankündigungsleiste (height: 50px; im CSS-Beispiel) ausreichend ist, um deinen Text angemessen darzustellen. Du kannst diesen Wert je nach Bedarf anpassen.
  • Responsive Design: Überprüfe das Verhalten der Ankündigungsleiste auf verschiedenen Geräten und passe ggf. die CSS-Medienabfragen an, um eine optimale Darstellung sicherzustellen.

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 obige 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! :wink:

Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd :hatching_chick: 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.