So fügen Sie einen benutzerdefinierten Button in Shopify hinzu

Wenn Sie auf Shopify verkaufen, ist das Design Ihres CTA-Buttons von größter Bedeutung. Egal, ob er zu einer Werbeseite, einer VIP-Newsletter-Anmeldung oder einem Affiliate-Link führt – ein Button, der ins Auge fällt, wird häufiger angeklickt als einer, der in der Seite untergeht. Und in einem Shop bedeuten mehr Klicks auch mehr Verkäufe.

Shopify-OS-2.0-Themes, einschließlich Dawn, verfügen über native Button-Blöcke, geben Ihnen aber nur wenig Kontrolle über das Aussehen dieser Buttons. Mit dem Block können Sie die Beschriftung, den Link und die Angabe festlegen, ob der Stil gefüllt oder umrandet ist, während die Farben aus Ihren globalen Theme-Einstellungen stammen. Das sorgt für ein einheitliches Erscheinungsbild Ihres Shops (was der Sinn von Theme-Einstellungen ist), bedeutet aber auch, dass ein Button, der hervorstechen soll, genauso aussieht wie jeder andere Button auf Ihrer Website.

Um einen eigenständigen Button mit eigenen Farben, Hover-Effekt oder Symbol zu erhalten, gibt es zwei Ansätze. Sie können in Ihrem Theme-Editor einen Custom-Liquid-Block hinzufügen und das HTML und CSS selbst schreiben, oder Sie verwenden ein kostenloses gehostetes Widget, das sich um das Styling kümmert und Ihnen einen Einbettungscode zum Einfügen liefert.

Wenn Sie einen conversion-optimierten, individuellen CTA-Button in Ihrem Shopify-Shop haben möchten, ohne den Theme-Code zu bearbeiten oder einen Entwickler zu bezahlen, erklärt dieser Leitfaden, wie Sie mit beiden Methoden einen Button in Shopify hinzufügen.

Watch on youtube

How to Add a Custom Button to Shopify

Option 1: Custom Liquid und CSS verwenden

Die übliche Methode, um ein individuelles Button-Design in einen Shopify-Shop zu bringen, ohne eine Drittanbieter-App zu installieren, besteht darin, den Code selbst zu schreiben. Der Theme-Editor von Shopify enthält einen Custom-Liquid-Bereich, in dem Sie Ihr eigenes HTML und CSS hinzufügen können, sodass Sie einen Button definieren und genau nach Ihren Wünschen gestalten können, ohne die Dateien Ihres Themes direkt zu bearbeiten.

So fügen Sie mit Custom Liquid und CSS einen Button in Shopify hinzu:

1. Gehen Sie in Ihrem Shopify-Admin im Menü auf der linken Seite zu Onlineshop. Klicken Sie dann auf das Stift-Symbol neben Onlineshop oder klicken Sie auf dem Bildschirm auf Theme bearbeiten.

2. Klicken Sie in der linken Seitenleiste auf Abschnitt hinzufügen, suchen Sie nach Custom Liquid und wählen Sie es aus. Auf der rechten Seite erscheint ein Textfeld, in das Ihr Code kommt.

3. Fügen Sie das HTML für Ihren Button zusammen mit einem <style>-Block, der Ihr CSS enthält, hinzu und klicken Sie dann oben rechts auf Speichern. Ihre Änderungen werden während der Arbeit in der Vorschau angezeigt.

Ein Wort der Warnung bei dieser Methode: Wenn Sie das Styling selbst schreiben, riskieren Sie, Fehler zu machen. Ohne gescopte Selektoren geschriebene Regeln können andere Elemente auf der Seite beeinflussen, und Custom Liquid, das in Ihrem Header oder Footer hinzugefügt wird, erscheint auf jeder Seite Ihres Shops – ein kleiner Fehler kann also größere Auswirkungen haben als nur auf den Button, den Sie gestalten wollten. Shopify empfiehlt außerdem, Ihr Theme vor dem Bearbeiten des Codes als Backup zu duplizieren, was widerspiegelt, wie die Plattform das Risiko einschätzt.

Einen Entwickler zu beauftragen, löst vielleicht das technische Problem, verursacht aber Kosten, die sich für einen einzelnen Button schwerer rechtfertigen lassen – besonders dann, wenn Sie einige Versionen testen möchten und jede Änderung eine weitere Anfrage bedeutet.

Option 2: Ein kostenloses, anpassbares Button-Widget hinzufügen (empfohlen)

Sie möchten die Design-Kontrolle ohne das Risiko? Ein gehostetes kostenloses Button-Widget ist eine Custom-Liquid-Alternative in Shopify mit eigenen Farben, Hover-Status und Symbol. Sie können den Button in einem visuellen Generator anpassen, den Einbettungscode kopieren und in einen Custom-Liquid-Block in Ihrem Theme-Editor einfügen.

Das Button-Widget von Jotform bietet die Styling-Optionen, die der native Block von Shopify auslässt. Sie legen Hintergrund-, Text- und Hover-Farben unabhängig voneinander fest, fügen vor oder nach der Beschriftung ein Symbol hinzu und passen Eckenradius, Höhe, Innenabstand und Schlagschatten an.

So fügen Sie mit dem Button-Widget von Jotform einen Button in Shopify hinzu: 

1. Klicken Sie auf Ihrer Jotform-Workspace-Seite auf Erstellen, wählen Sie Website-Widget, suchen Sie nach „Button“ und klicken Sie dann auf Widget verwenden.

2. Wählen Sie unter dem Tab Allgemein Ihre Button-Aktion, geben Sie die angeforderten Informationen (E-Mail, Telefonnummer, URL-Link usw.) ein und schreiben Sie Ihre Button-Beschriftung. Fügen Sie eine zweite Zeile oder umgebenden Text hinzu, falls Ihr Angebot einen Kontext benötigt.

3. Legen Sie unter dem Tab Stile Ihre Farben fest, aktivieren Sie ein Symbol und wählen Sie dessen Position, und passen Sie dann Form und Größe an. Der Tab Layout steuert, ob der Button inline oder schwebend ist und ob er auf dem Desktop, auf Mobilgeräten oder auf beiden erscheint.

4. Klicken Sie in der oberen Navigationsleiste auf Veröffentlichen und klicken Sie dann im Menü auf der linken Seite im Abschnitt Einbetten auf Code kopieren.

Sie können auch auf Plattformen klicken und Shopify auswählen, um plattformspezifische Einbettungsanweisungen zu erhalten.

5. Um Ihren individuellen Button in Shopify einzubetten, öffnen Sie Ihren Theme-Editor, wählen Sie Ihre Seitenvorlage aus, klicken Sie auf Abschnitt hinzufügen oder Block hinzufügen, wählen Sie Custom Liquid, fügen Sie Ihren Einbettungscode ein und klicken Sie oben rechts auf Speichern. 

Da Sie bei dieser Option den Button in Jotform gestalten und nicht direkt in Ihrem Website-Theme, bleiben Ihre Änderungen von Ihren globalen Theme-Einstellungen getrennt. Eine andere Farbe oder Beschriftung zu testen bedeutet, das Widget zu bearbeiten, anstatt erneut den Theme-Code zu ändern. Für die vollständige Einrichtung lesen Sie wie Sie einen Button zu einer Website hinzufügen.

Verbessern Sie Ihren Shopify-Shop mit smarten, serverlosen Widgets

Ein Button ist eine von mehreren Funktionen, die Sie zu Ihrer Website hinzufügen können, ohne einen Entwickler zu beauftragen oder für eine weitere monatliche App zu bezahlen. Als Alternative für einen Shopify-Call-to-Action bietet das Verzeichnis der kostenlosen Website-Widgets von Jotform mehr als 150 Optionen, darunter mehrere, die auf dieselben Storefront-Lücken abzielen wie der Button.

Ein Announcement-Bar-Widget platziert beispielsweise Ihre Grenze für kostenlosen Versand oder Ihre Aktionszeiträume oben auf jeder Seite, wo Käufer sie sehen, bevor sie zur Kasse gehen. Ein Buy-Button-Widget leitet Käufer mit einem Kauf-CTA direkt zu einer Produkt-, Warenkorb- oder Checkout-URL weiter, was sich für eine Kampagnen-Landingpage oder einen Upsell nach dem Kauf eignet. Und die E-Commerce-Kategorie bietet Produktkarten und Preistabellen. Es gibt außerdem eine Jotform-Shopify-Integration, mit der Sie Kundeninformationen parallel zu Ihrem Shop erfassen können. 

Jedes Widget wird genauso eingebettet wie der Button, sodass Sie nicht jedes Mal für ein weiteres App-Abonnement zahlen, wenn Sie eine einfache Funktion hinzufügen möchten.

Als E-Commerce-Marke sollten Ihre Zeit und Ihr Budget in Dinge wie die Beschaffung von Produkten und die Verbesserung Ihrer Werbe-Funnels fließen – nicht ins Schreiben von Custom Liquid, damit ein Button anders aussieht als der Rest. Das Button-Widget von Jotform gibt Ihnen einen CTA, den Sie in einer Minute umgestalten können, ohne Ihr Theme anzurühren. Probieren Sie es noch heute kostenlos aus.