So fügen Sie eine Ankündigungsleiste zu Shopify hinzu

Eine Shopify Announcement Bar (auch bekannt als Hello Bar, Promo-Banner oder Sticky-Banner) ist ein schmales Banner, das sich über den oberen Rand und oberhalb der Navigation einer Website erstreckt. Sie wird häufig verwendet, um dem Nutzer Vorteile zu präsentieren, die zu einem Kauf anregen können – zum Beispiel ein Blitzverkauf oder eine Frist für den kostenlosen Versand.  

Einige Shopify Online Store 2.0 Themes, einschließlich des Standard-Themes Dawn, verfügen über eine native Announcement Bar. Das ist ein guter Ausgangspunkt, aber ziemlich eingeschränkt. Mit dem Dawn-Theme können Sie das grundlegende Farbschema anpassen, Social-Media-Symbole hinzufügen oder entfernen und pro rotierender Ankündigung eine einzelne Textzeile oder Links hinzufügen.

Wenn Sie sich etwas Dynamischeres vorstellen, etwa mehrere Textzeilen, Buttons, einen Gutscheincode zum Kopieren per Klick oder einen Countdown-Timer, der Dringlichkeit erzeugt, kommen Sie mit dem nativen Editor nicht weiter. 

Um eine konversionsstarke, individuelle Announcement Bar in Shopify zu erstellen, können Sie entweder eine Drittanbieter-App aus dem Shopify App Store installieren oder ein kostenloses, schlankes Announcement Bar Widget verwenden, das Ihre Website schnell hält und Ihr Budget schont. Wir erklären hier, wie beides funktioniert.

Watch on youtube

How to Add an Announcement Bar to Shopify

Option 1: Eine dedizierte Shopify Banner-App installieren

Die gängigste Methode, mit der Händler ein Sticky-Banner in Shopify hinzufügen, besteht darin, den Shopify App Store aufzurufen und eine Marketing-App eines Drittanbieters zu installieren. 

So sieht diese Einrichtung in der Regel aus:

1. Suchen Sie im Shopify App Store nach einer App für „Announcement Bar“ oder „Promo-Banner“.

2. Installieren Sie die App und fügen Sie sie über den Onboarding-Ablauf der App zu Ihrem Theme hinzu.

3. Passen Sie Text, Farben und Verhalten Ihres Banners im Dashboard der App an.

Der Arbeitsablauf zum Anpassen des Banners hängt vom Plug-in ab. Das vorherige Bild zeigt Ihnen, wie Sie die Breite eines Banners mit dem Attrac-Plug-in anpassen können.

Auch wenn viele Händler standardmäßig diesen Weg wählen, bringt er zwei Nachteile mit sich, die Sie kennen sollten, bevor Sie sich festlegen:

1. Banner-Apps von Drittanbietern können JavaScript hinzufügen: Sie tun dies, um Animationen, rotierende Nachrichten oder Countdown-Timer zu ermöglichen, und dieser Code wird oft nahe am oberen Rand der Seite geladen. Je nachdem, wie die App aufgebaut ist, kann dies die Seitengeschwindigkeit verlangsamen und die Core Web Vitals beeinträchtigen. Prüfen Sie die Bewertungen und schauen Sie, was andere Shop-Besitzer über die tatsächlichen Auswirkungen einer App auf die Performance sagen, bevor Sie sie installieren.
2. Viele kostenlose Hello Bars in Shopify sind eingeschränkt: Der kostenlose Plan ist darauf ausgelegt, Sie zum Einstieg zu bewegen, und die Funktionen, die Sie eigentlich möchten – wie Countdown-Timer, Geotargeting oder einfach das Entfernen des Wasserzeichens der App – sind hinter einem monatlichen Abonnement verborgen.

Wenn Sie all dies lieber überspringen möchten, folgt als Nächstes ein kostenloses Website-Widget.

Option 2: Ein kostenloses, anpassbares Announcement Bar Widget hinzufügen (empfohlen)

Wenn Sie ein dynamisches, gut gestaltetes Promo-Banner mit allen benötigten Funktionen wünschen – und das kostenlos, ohne die Website-Geschwindigkeit zu beeinträchtigen – ist ein zuverlässiges, gehostetes Widget-Embed der bessere Weg. 

Hier kommt das Announcement Bar Widget von Jotform ins Spiel. Es funktioniert effektiv als Alternative zu einer Shopify Promo-Banner-App.

Die Einrichtung ist unkompliziert:

1. Erstellen Sie Ihr Banner im Jotform Widget-Editor und fügen Sie Ihren Text sowie beliebige CTA-Buttons oder Countdown-Timer in den Allgemein-Einstellungen hinzu.

2. Passen Sie die Farben und das Layout an, damit es zu Ihrem Shopify-Theme passt.

3. Klicken Sie auf Weiter und kopieren Sie den Embed-Snippet, indem Sie auf Code kopieren klicken.

4. Fügen Sie den Snippet in einen Custom Liquid– oder Custom HTML-Block in Ihrem Shopify Theme-Editor ein. 

Der Vorteil dabei ist, dass Sie das Layout vollständig anpassen und die Farben Ihres Shopify-Themes exakt abstimmen können – und das alles ohne Premium-Upgrades. 

Und da das Widget ein serverunabhängiges Shopify Announcement Bar Embed ist, findet die gesamte aufwendige Arbeit – wie Animationen, Timer, Styling und mehr – außerhalb Ihres Shopify-Themes statt. Das bedeutet, dass Sie Folgendes erhalten:

• Sauberes Styling, das unabhängig von den globalen Website-Stilen von Shopify läuft, sodass es keinen Konflikt mit Ihrem Theme gibt
• Schnelle Ladezeiten, da kein render-blockierender Code Ihre Seitengeschwindigkeit belastet
• Keine wiederkehrenden Gebühren zusätzlich zu Ihrer Hosting-Rechnung, nur um einen Countdown-Timer oder eine andere gewünschte Funktion anzuzeigen

Verbessern Sie Ihren Shopify-Shop mit intelligenten, serverlosen Widgets

Eine Announcement Bar ist nur der Anfang. Jotform lässt sich in Shopify integrieren und bietet eine vollständige Sammlung kostenloser Website-Widgets, die dieselbe Flexibilität mit demselben serverunabhängigen Ansatz bieten.

Einige, die einen Blick wert sind, wenn Sie einen Shopify-Shop ausbauen, sind unter anderem:

• Ein Google Reviews Widget, um Kundenfeedback direkt auf Ihren Produktseiten anzuzeigen und vor dem Checkout Vertrauen aufzubauen
• Ein Besucherzähler-Widget, um die Seitenaktivität in Echtzeit anzuzeigen und Listings mit hohem Traffic Social Proof hinzuzufügen
• Ein Countdown-Widget, um die Dringlichkeit bei zeitlich begrenzten Angeboten zu verstärken, ähnlich wie bei dem, was Sie in Ihre Announcement Bar integrieren würden
• Ein Popup-Widget, um E-Mail-Anmeldungen zu erfassen oder einen Rabattcode zu bewerben, ohne eine dedizierte Landingpage zu benötigen

Als wachsende E-Commerce-Marke sind Sie besser beraten, Ihr Marketingbudget in den Verkauf auf Shopify, die Produktbeschaffung und die Kundengewinnung zu investieren – und nicht in wiederkehrende App-Gebühren, nur damit ein Banner korrekt angezeigt wird. Kostenlose, serverunabhängige Tools wie das Jotform Announcement Bar Widget ermöglichen es Ihnen, in wenigen Minuten ein hochwertiges, konversionsstarkes Promo-Banner bereitzustellen – und sobald es live ist, können Sie sich dem nächsten Widget widmen, das Ihrem Shop beim Wachstum hilft. Probieren Sie es noch heute aus.