Das Wichtigste auf einen Blick
- Der einfachste Weg, einen Button hinzuzufügen, ist über den Theme Editor — die meisten Abschnitte haben einen integrierten Button-Block.
- Für individuelle Button-Platzierungen außerhalb bestehender Abschnitte benötigen Sie entweder Code oder ein KI-Tool wie Fudge.
- Die Verlinkung eines Buttons mit einer Seite, einem Produkt oder einer externen URL erfolgt in den Einstellungen des Buttons im Theme Editor.
- Sticky Add-to-Cart-Buttons und Header-CTAs erfordern Code-Änderungen.
Buttons gehören zu den häufigsten Customization-Anfragen in Shopify. Egal, ob Sie einen CTA in Ihrem Hero-Bereich, einen Link-Button in einem Inhaltsabschnitt oder einen persistenten „Jetzt kaufen“-Button wünschen — hier erfahren Sie, wie Sie diese hinzufügen.
Warum Sie uns vertrauen können
Wir haben hunderte Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt — einen KI-Storefront-Editor mit einer 5.0-Bewertung im Shopify App Store.
So fügen Sie einen Button im Shopify Theme Editor hinzu
Die meisten Shopify-Abschnitte unterstützen Button-Blöcke nativ. Dies ist die schnellste Methode.
Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.
Schritt 2. Navigieren Sie zu der Seite und dem Abschnitt, in dem Sie den Button platzieren möchten.
Schritt 3. Klicken Sie auf den Abschnitt, um dessen Einstellungen zu öffnen. Suchen Sie in der linken Seitenleiste nach einem Button-Block oder der Option Block hinzufügen.
Schritt 4. Fügen Sie den Button-Block hinzu. Geben Sie das Button-Label (den angezeigten Text) und den Link (das Ziel beim Klicken) ein.
Schritt 5. Speichern.
Wenn Sie keine Button-Option sehen, enthält das Template dieses Abschnitts keinen Button. In diesem Fall müssen Sie entweder zu einem Abschnitt wechseln, der dies unterstützt, oder einen Button via Code oder Fudge hinzufügen.
So verlinken Sie einen Button mit einer Seite in Shopify
Wenn Sie im Theme Editor auf einen Button-Block klicken, sehen Sie ein Link-Feld. Sie können verlinken auf:
- Eine Seite — geben Sie
/pages/ihr-seiten-slugein oder nutzen Sie die Seitenauswahl - Ein Produkt —
/products/produkt-handle - Eine Kategorie (Collection) —
/collections/kategorie-handle - Eine externe URL — fügen Sie die vollständige URL ein
- Eine E-Mail-Adresse —
mailto:[email protected]
Die Link-Auswahl im Theme Editor zeigt eine durchsuchbare Liste Ihrer Seiten, Produkte und Kategorien an.
So fügen Sie einen Button im Inhaltsbereich einer Shopify-Seite hinzu
Wenn Sie eine einfache Seite bearbeiten (Onlineshop → Seiten) und einen Button im Textinhalt hinzufügen möchten:
Schritt 1. Klicken Sie auf das Link-Symbol in der Werkzeugleiste des Seiteneditors (sieht aus wie ein Kettenglied).
Schritt 2. Geben Sie Ihren Linktext und die URL ein.
Dadurch entsteht ein verlinkter Text, kein设计ter Button. Damit er wie ein Button aussieht, müssten Sie eine CSS-Klasse anwenden oder ein Theme-Feature nutzen.
Für einen richtig gestalteten CTA-Button innerhalb von Seiteninhalten ist es sauberer, einen Button-Block über den Theme Editor hinzuzufügen (sofern Ihr Theme Abschnitte auf Seiten unterstützt) statt über den einfachen Seiteneditor.
So fügen Sie einen Sticky Button in Shopify hinzu
Ein Sticky Add-to-Cart-Button — einer, der dem Nutzer beim Scrollen auf einer Produktseite folgt — ist ein Feature zur Conversion-Optimierung, das in den meisten Themes standardmäßig nicht enthalten ist.
Um einen hinzuzufügen, haben Sie zwei Möglichkeiten:
Option 1 — Eine Shopify App. Es gibt mehrere Sticky Add-to-Cart Apps im App Store. Dies ist der schnellste Weg ohne Code-Änderungen.
Option 2 — Custom Code via Fudge. Beschreiben Sie Fudge, was Sie möchten:
“Füge eine Sticky-Leiste für den Warenkorb auf meinen Produktseiten hinzu, die erscheint, wenn der Nutzer am Haupt-Button vorbeiscrollt. Zeige Produkttitel, Preis und einen Kaufen-Button an.”
Fudge generiert den Code und fügt ihn als Entwurf zu Ihrem Theme hinzu. Sie prüfen und veröffentlichen ihn.
So fügen Sie einen Button im Shopify Header hinzu
Das Hinzufügen eines CTA-Buttons zum Header Ihres Shops (z. B. „Jetzt shoppen“ oder „Termin vereinbaren“) erfordert normalerweise die Bearbeitung des Header-Abschnitts Ihres Themes.
Im Theme Editor: Navigieren Sie zum Header-Abschnitt und prüfen Sie, ob er eine Option für einen Button oder CTA-Block hat. Einige Themes (wie Dawn) enthalten dies, andere nicht.
Wenn Ihr Theme keine Header-Buttons nativ unterstützt, ist Code erforderlich — die Datei header.liquid oder die entsprechende Sektions-Datei muss bearbeitet werden, um ein Button-Element mit dem gewünschten Link und Styling hinzuzufügen.
Dies ist eine häufige Anfrage. Sie können es Fudge so beschreiben: „Füge einen ‘Loslegen’-Button auf der rechten Seite des Headers hinzu, der auf /pages/kontakt verlinkt.“
So ändern Sie den Button-Text in Shopify
Der Button-Text wird im Theme Editor festgelegt, wenn Sie einen Button-Block hinzufügen oder bearbeiten. Klicken Sie auf den Button-Block in den Abschnittseinstellungen und aktualisieren Sie das Feld Label.
Für Buttons, die in den Spracheinstellungen Ihres Themes erscheinen (wie „In den Warenkorb“ oder „Jetzt kaufen“), gehen Sie zu Onlineshop → Themes → Aktionen → Sprachen bearbeiten. Suchen Sie nach der Phrase, die Sie ändern möchten, und aktualisieren Sie sie dort. Eine vollständige Anleitung finden Sie unter So ändern Sie den Button-Text in Shopify.
