Announcement Bar: Suche & Sprachauswahl

[Sabrina_MD]

Hallo zusammen,

ich habe zwei Fragen zur Announcement Bar.

Das verwendete Theme ist Craft.

Ich bin kein Profi in html & co., aber ich bin offen für Vorschläge zur Code-Anpassung. Das ein oder andere habe ich selber schon hinbügeln können 😄

1. 

Ich würde gerne die Sprach- und Länderauswahl in die Announcement Bar platzieren. Allerdings öffnet sich das Dropdown-Menü immer hinter dem Header. Damit ist es nicht nutzbar. Wie kann ich das ändern?

Hier zu sehen:  orange ist die Announcement Bar, Grün ist der Header.

2.

Ich würde auch gerne die Suchfunktion (Lupe im Bild oben) und/oder auch das Kundenkonto-Symbol in die Announcement Bar verschieben.

Ist das möglich und wenn ja wie? Wahrscheinlich per Code Anpassung?

Lieben Dank!

Sabrina

[Gabe · Accepted solution]

Hey Sabrina! @Sabrina_MD 

Du bist ja schon ein Profi im Programmieren! 😉

Aber das hier wird, wie du auch erwähnt hast, eine komplexere Programmierung verlangen, um die 2 Dinge zu erreichen, die du oben beschreibst leider. Hast du es erwägt einen unserer Experten zu heuern wenn du keine App gefunden hast die das kann? Und hast du von deinem Design Time Gebrauch gemacht?

Wenn das Dropdown-Menü hinter dem Header angezeigt wird, liegt das Problem wahrscheinlich an den CSS z-index Eigenschaften. Versuche, den z-index des Dropdown-Menüs zu erhöhen, damit es oberhalb des Headers angezeigt wird:

.dein-dropdown-klasse {
    z-index: 1001; /* oder eine höhere Zahl, je nach dem aktuellen z-index des Headers */
}

Um die Suchfunktion und das Kundenkonto-Symbol zu verschieben den HTML-Code dieser Elemente in der header.liquid oder einer ähnlichen Datei suchen. Verschiebe diesen Code an die Stelle in der announcement-bar.liquid oder einer ähnlichen Datei, an der du diese anzeigen möchtest. Passe anschließend das CSS an, damit es optisch in der Announcement Bar richtig aussieht. Suche in der header.liquid Datei nach dem HTML-Code für die Suchfunktion und das Kundenkonto-Symbol. Kopiere den notwendigen HTML-Code und füge es in der announcement-bar.liquid oder eine ähnliche Datei an der gewünschten Stelle ein. Passe ggf. die CSS-Stile an, um das Aussehen der verschobenen Elemente zu korrigieren.

---
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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.