So fügen Sie einer Shopify-Website einen individuellen Banner hinzu

Ein auffälliges Werbebanner ist einer der wirkungsvollsten Conversion-Treiber für Onlineshops. Es ist das Erste, was Besucherinnen und Besucher sehen, wenn sie Ihre Website öffnen. Ein klarer Call-to-Action (CTA) kann daher die Add-to-Cart-Rate und den Gesamtumsatz erheblich steigern. Ob Sie Kunden zu einem Black-Friday-Sale führen, Schwellenwerte für den kostenlosen Versand bekannt geben oder Leads im Austausch gegen einen Rabattcode gewinnen möchten: Ein Werbebanner ist dafür eines der besten Werkzeuge.

Aber warum sollten Sie sich auf ein statisches Banner beschränken? Ein Countdown-Timer kann ein Gefühl von Dringlichkeit erzeugen, Rich Media verleiht dem Banner mehr Wirkung, und ein Formular zur E-Mail-Erfassung kann sofort Leads generieren. Leider macht es Shopify nicht einfach, eines dieser Elemente einzubinden. Die OS-2.0-Themes von Shopify enthalten zwar native Bereiche für „Ankündigungsleiste“ und „Bildleiste“, diese sind jedoch auf reinen Text am oberen Seitenrand beziehungsweise auf zwei statische Bilder, etwas Text und zwei Schaltflächen im Banner beschränkt. 

Wenn Sie ein Werbebanner in Shopify einbetten möchten, das ein Formular zur Lead-Erfassung enthält, auf Mobilgeräten und Desktop-Geräten unterschiedlich dargestellt wird oder einen Countdown-Timer bzw. ein Video enthält, geht das nur mit individuellem Liquid- und JavaScript-Code. Shopify Magic, der KI-Generator von Shopify, kann zwar ein individuelles Liquid-Banner für Shopify erstellen, bietet dafür aber keinen Support. Und wenn Sie den von Shopify Magic erstellten Code nicht verstehen, können die Ladegeschwindigkeit und die Barrierefreiheit Ihres Shops darunter leiden. 

Den meisten Händlern bleiben damit zwei Optionen: Sie installieren eine kostenpflichtige Drittanbieter-App aus dem Shopify App Store oder nutzen ein kostenloses, schlankes, serverloses Widget, das die Seitengeschwindigkeit und die Theme-Architektur schützt. 

Schauen wir uns an, wie Sie ein Banner zu Ihrer Shopify-Website hinzufügen.

Option 1: Eine spezielle Shopify-App-Store-Integration installieren

Eine Shopify-Ankündigungsleiste hinzuzufügen – mit einer Banner- oder Popup-App eines Drittanbieters – ist effektiv, hat aber auch Nachteile. Dazu später mehr.

So richten Sie es ein: 

1. Rufen Sie den Shopify App Store auf und suchen Sie nach einer Banner- oder Popup-App. Ich habe mich für Essential Announcement Bar entschieden, Sie können aber jede beliebige App wählen. 

2. Klicken Sie auf Installieren. 

3. Gehen Sie die Einführung bzw. Einrichtungsanleitung durch, damit Sie die Grundlagen des Plug-ins verstehen. 

4. Konfigurieren Sie Ihr Banner oder Popup in der App. Sie können Text, Design, Platzierung und weitere Funktionen anpassen. Wenn Sie fertig sind, klicken Sie auf Veröffentlichen.

Die Ankündigungsleiste bzw. das Popup erscheint nun in Ihrem Shop. So weit, so gut. 

Allerdings fügt jede App, die Sie für Ihren Shopify-Shop installieren, ihr eigenes CSS und JavaScript zu Ihrem Storefront hinzu. Das kann sich auf Ihre Core Web Vitals auswirken, Ihre Website verlangsamen, zu Verzögerungen im Checkout-Prozess führen und Ihr SEO-Ranking beeinträchtigen. Eine einzelne App ist selten ein Problem, bei Dutzenden kann das jedoch spürbare Folgen haben. Wenn Sie etwas ohne die Installation einer App umsetzen können, haben Sie mehr Spielraum für wirklich notwendige Apps. 

Außerdem erfordern Drittanbieter-Apps für Shopify häufig kostenpflichtige Abonnements. Eine kostenlose Version hat in der Regel einen begrenzten Funktionsumfang, funktioniert nur für die ersten 1.500 Impressionen pro Monat, enthält ein Wasserzeichen oder ist anderweitig nicht besonders effektiv. Wenn Sie erweiterte Funktionen oder einfach ein sauberes Banner ohne Branding benötigen, das auch hohem Besucheraufkommen in der Weihnachtszeit standhält, müssen Sie meist eine monatliche Abonnementgebühr zahlen. 

Wenn Sie sicherstellen möchten, dass Ihr Banner genau das tut, was Sie brauchen, und für alle Ihre Kunden sichtbar ist, ohne eine monatliche Gebühr zu zahlen, gibt es eine bessere Option. 

Option 2: Ein kostenloses, interaktives Banner-Widget hinzufügen (empfohlen)

Wenn Sie ein dynamisches, konversionsstarkes Banner mit Rich Media, Gutscheinen, Formularen und Countdowns möchten, ohne ein monatliches Abonnement zu bezahlen, Ihre Website zu verlangsamen oder sich um die Core Web Vitals sorgen zu müssen, ist die klügste Lösung ein zuverlässiges gehostetes Embed wie das Jotform Banner-Widget. Der gesamte aufwendige Teil läuft außerhalb Ihres Shopify-Shops ab. So erhalten Sie ein einwandfreies, responsives Banner, ohne die Nachteile einer installierten Drittanbieter-App. Es ist das beste kostenlose Banner-Widget für Shopify. 

So richten Sie es ein:

1. Rufen Sie das Jotform Banner-Widget auf und melden Sie sich bei Ihrem Jotform-Konto an. Wenn Sie noch keines haben, können Sie sich kostenlos registrieren.

2. Fügen Sie Ihrem Banner ein Badge, eine Überschrift und eine Beschreibung hinzu. Sie können das gesamte Banner anklickbar machen und Funktionen wie eine CTA-Schaltfläche, einen Countdown-Timer, einen Gutschein und ein Formular zur E-Mail-Erfassung ergänzen. 

3. Passen Sie auf der Registerkarte Stil das Erscheinungsbild Ihres Banners an. Sie können eine eigene Schriftart festlegen, benutzerdefiniertes CSS verwenden und das Jotform Branding deaktivieren.

4. Steuern Sie auf der Registerkarte Layout, wie die Elemente in Ihrem Banner angezeigt werden. Außerdem können Sie festlegen, ob es auf Desktop-Geräten, Mobilgeräten oder auf beiden sichtbar ist. 

5. Wechseln Sie zur Registerkarte Einstellungen, auf der Sie Ihrem Banner einen Titel geben können. Außerdem können Sie es aktivieren oder deaktivieren, was hilfreich ist, wenn Sie Banner für Feiertagsaktionen im Voraus erstellen möchten. 

6. Gehen Sie weiter zu Veröffentlichen und klicken Sie dann auf Code kopieren, um den Einbettungscode für Ihr Banner zu erhalten. 

7. Wechseln Sie zurück zu Shopify. Wählen Sie in der Seitenleiste Onlineshop und anschließend Theme bearbeiten. 

8. Klicken Sie auf Abschnitt hinzufügen und dann auf Custom Liquid. 

9. Fügen Sie den Einbettungscode in das Feld „Custom Liquid“ ein. Anschließend können Sie das Ankündigungsbanner an beliebiger Stelle positionieren und sein Erscheinungsbild konfigurieren. 

10. Klicken Sie abschließend auf Speichern, und Ihr Banner ist auf Ihrer Website live. 

Der größte Vorteil des Jotform Banner-Widgets ist die beispiellose visuelle Kontrolle über das Banner, ganz ohne Premium-Abonnement oder Programmierkenntnisse. Mit dem benutzerfreundlichen Editor können Sie das Hintergrundbild des Banners anpassen oder sogar ein YouTube- oder Vimeo-Video einbetten. Außerdem können Sie CTA-Schaltflächen, einen Countdown-Timer oder ein Anmeldeformular für den E-Mail-Newsletter hinzufügen – alles kostenlos.

Um Ihr individuelles Banner für Shopify zu installieren, kopieren Sie einfach den Einbettungscode und fügen ihn in Shopify ein. Da Jotform das Banner außerhalb Ihres Servers erstellt, kommt es nicht zu Konflikten mit den globalen Website-Stilen von Shopify, und auch die Ladegeschwindigkeit Ihrer Seite bleibt unberührt. So erhalten Sie ein leistungsstarkes Banner, mit dem Ihre Kampagnen reibungslos laufen. 

Optimieren Sie Ihren Shopify-Shop mit intelligenten, serverlosen Widgets

Das Verzeichnis der Jotform Website-Widgets bietet eine Vielzahl hervorragender kostenloser Website-Widgets, darunter das Jotform Banner-Widget. Mit Jotform Widgets kann Ihr Instagram-Feed-Widget Ihr Produkt im Einsatz zeigen, Kundenstimmen können verdeutlichen, wie beliebt es ist, Verkaufsbenachrichtigungen rücken jeden Verkauf ins Rampenlicht, und eine Größentabelle kann Kunden dabei helfen, die passende Produktgröße zu finden. Zahlreiche weitere kostenlose Tools können Ihre Add-to-Cart-Conversions maximieren und halten Ihren Shop dabei schnell ladend und schlank.

Indem Jotform Website-Widgets einen Teil des Aufwands beim Verkaufen auf Shopify abnehmen, können Sie Ihre Zeit und Ihr Budget auf die Beschaffung großartiger Produkte, Online-Marketing und den Aufbau eines erfolgreichen E-Commerce-Shops konzentrieren. Für ein einfaches Banner auf einer Produktseite müssen Sie nichts bezahlen. 

Wenn Sie mit Shopify noch mehr erreichen möchten, werfen Sie einen Blick auf die vollständige Jotform + Shopify Integration. Damit können Sie Formulare zu Ihrem Shopify-Shop hinzufügen, Zahlungen entgegennehmen und vieles mehr.