Ein Nutzer möchte in der Ankündigungsleiste (Announcement Bar) seiner Shopify-Homepage ein anderes Farbschema verwenden als auf den restlichen Seiten.
Vorgeschlagene Lösungsansätze:
<body>-Tag der Startseite mittels JavaScriptTechnische Hinweise:
Ergebnis:
Der Nutzer testete die vorgeschlagene CSS-Lösung, aber das Resultat entsprach nicht vollständig den Erwartungen – nur ein Teil der Ankündigungsleiste änderte die Farbe, nicht die gesamte Bar. Aufgrund der Komplexität entschied sich der Nutzer, die Änderung nicht weiter zu verfolgen und das einheitliche Farbschema beizubehalten.
Sehr geehrte Damen und Herren,
ich möchte gerne in der Ankündigungsleiste für meine Homepage ein anderes Farbschema haben, als auf den anderen Seiten. Auf den Bildern ist es zu sehen. Wie kann ich das konkret im Code implementieren? Könnt ihr mir hier diesbezüglich helfen?
Ich freue mich auf eine Antwort und verbleibe mit freundlichen Grüßen.
Mikesch
Hey @mikesch23
Danke für die Bilder und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren.
Dann ist es auch so dass du eine Logik in die Suchleiste einprogrammieren musst die darauf “hört” auf welcher Seite der User sich gerade befindet um die jeweiligen Farben anzuzeigen, was nicht ganz einfach sein wird.
Wenn du es selber auf deiner Suchleiste 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!
Das habe ich jetzt in meinem Free Shopify Ride Theme getestet und folgendes hat geklappt:
Um ein unterschiedliches Farbschema für die Ankündigungsleiste auf deiner Homepage und anderen Seiten zu implementieren, kannst du eine spezifische CSS-Klasse für die Homepage hinzufügen und dann CSS verwenden, um die Farben zu ändern. Hier ist ein Beispielansatz:
Identifiziere die Homepage: Füge eine eindeutige Klasse zur <body>-Tag deiner Homepage hinzu. Dies kann über das Template oder die spezifische Seiteneinstellung in deinem CMS erfolgen, abhängig von der Plattform, die du verwendest.
Anpassen des CSS: Verwende CSS, um das Farbschema der Ankündigungsleiste nur auf der Homepage zu ändern, indem du die neue Klasse ansprichst. Zum Beispiel:
.homepage .utility-bar.color-scheme-4 {
/* Neue Farben für die Homepage */
background-color: #neueFarbe;
color: #neueTextfarbe;
}
.utility-bar.color-scheme-4 {
/* Standardfarben für andere Seiten */
background-color: #standardFarbe;
color: #standardTextfarbe;
}
Stelle sicher, dass du .homepage durch die tatsächliche Klasse ersetzt, die du deiner Homepage gibst. Die CSS-Eigenschaften background-color und color musst du durch die gewünschten Farbwerte ersetzen.
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.
Guten Tag Gabe, vielen Dank für deine Antwort.
Ich benutze das Default Theme und hier ist der befristete Vorschaulink zum Shop: https://j2yz311b0w0sersm-79844802885.shopifypreview.com
Ich verstehe den ersten Schritt nicht: ,Identifiziere die Homepage’‘. Meinst du, dass ich im Code bei ,theme.liquid’’ einen neuen Body aufmachen soll? Also …? Oder wie soll das konkret aussehen?
Ich freue mich auf eine Antwort und verbleibe mit freundlichen Grüßen.
Hey @mikesch23
Tut mir leid das war etwas verwirrend, da gebe ich dir recht! Und im Grunde wird es nicht ganz einfach sein wenn du das DIY programmieren möchtest, ohne eine unserer vielen Announcement Bar Apps die auch Bedingungslogik anbieten zu testen.
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 auf der Startseite deines Shopify Dawn Themes eine andere Farbe für die Ankündigungsleiste zu verwenden, könntest du folgenden CSS-Code als Beispiel nutzen:
/* Standardfarbe für die Ankündigungsleiste */
.announcement-bar__announcement {
background-color: #StandardFarbe;
}
/* Spezielle Farbe für die Startseite */
.homepage .announcement-bar__announcement {
background-color: #SpezielleFarbe;
}
Um dies umzusetzen, musst du die CSS Class .homepage zum <body>-Tag der Startseite hinzufügen. Dies könnte manuell im Theme-Code oder dynamisch mit JavaScript gemacht werden, abhängig davon, ob deine Startseite eine einzigartige Klasse oder ID hat, die du ansprechen kannst. Bitte ersetze #StandardFarbe und #SpezielleFarbe durch die tatsächlichen Farbcodes, die du verwenden möchtest.
Du kannst Anpassungen wie das Hinzufügen einer speziellen Klasse für die Startseite in der theme.liquid-Datei deines Shopify-Dawn-Themes vornehmen. Die theme.liquid ist das Hauptlayout-Template, das den Rahmen für jede Seite in deinem Shop bildet. Du könntest JavaScript innerhalb dieses Templates verwenden, um zu prüfen, ob der Nutzer sich auf der Startseite befindet, und dann entsprechend eine Klasse zum <body>-Tag hinzufügen.
Um im theme.liquid des Shopify Dawn Themes eine spezielle Klasse nur für die Startseite hinzuzufügen, kannst du folgendes JavaScript-Snippet verwenden. Dieses Script prüft, ob die aktuelle Seite die Homepage ist, und fügt dann dem <body>-Tag eine Klasse homepage hinzu. Dies kannst du direkt vor dem schließenden </body>-Tag in theme.liquid einfügen:
Mit dieser Klasse kannst du dann spezifische CSS-Regeln für die Startseite definieren, wie im vorherigen Beispiel für die Anpassung der Farbe der Ankündigungsleiste gezeigt.
Hoffe das hilft dir weiter - lass wissen falls nicht!
Guten Nachmittag Gabe, alles klar! Vielen Dank für deine ausführliche Antwort. Leider ist es nicht so ganz, wie ich es wollte, weil nicht die ganze Ankündigungsbar die Farbe bekommt, sondern nur so ein langer Rechteck und außen rum ist es noch in der selben Farbe. Ich werde es doch sein lassen und lieber daran nichts machen. Alles Gute weiterhin noch!
Dir ebenfalls!