So fügen Sie einen Button in Shopify hinzu (2026)

Zuletzt aktualisiert
•
Von Experten geprüft
•
5 Min. Lesezeit
Jacques Blom
Jacques Blom
CTO bei Fudge.

Das Wichtigste in Kürze

  • Der einfachste Weg, einen Button hinzuzufügen, ist über den Theme-Editor – die meisten Abschnitte haben einen integrierten Button-Block, den du hinzufügen kannst.
  • Für die benutzerdefinierte Platzierung von Buttons außerhalb bestehender Abschnitte benötigst du entweder Code oder ein KI-Tool wie Fudge.
  • Die Verlinkung eines Buttons zu einer Seite, einem Produkt oder einer externen URL erfolgt im Einstellungsbereich des Buttons im Theme-Editor.
  • Sticky Add-to-Cart-Buttons und CTAs im Header erfordern Code-Anpassungen.

Buttons gehören zu den häufigsten Anpassungswünschen in Shopify. Egal, ob du einen CTA in deinem Hero-Bereich, einen Link-Button in einem Inhaltsbereich oder einen Sticky „Jetzt kaufen“-Button möchtest – hier erfährst du, wie du sie hinzufügst.

Warum Sie uns vertrauen können

Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Wir haben auch Fudge entwickelt — einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.


So fügen Sie einen Button im Shopify Theme Editor hinzu

Die meisten Shopify-Sections unterstützen Button-Blöcke von Haus aus. Dies ist die schnellste Methode.

Passend dazu: Shopify-Buttons klickfreundlicher machen.

Schritt 1. Gehen Sie zu Onlineshop → Themes → Customizer.

Schritt 2. Navigieren Sie zu der Seite und der Section, in der Sie den Button platzieren möchten.

Schritt 3. Klicken Sie auf die Section, um deren 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.

Falls Sie keine Button-Option sehen, enthält das Template dieser Section keinen. Sie müssten entweder zu einer Section wechseln, die dies unterstützt, oder einen Button via Code oder Fudge hinzufügen.


So verlinken Sie einen Button mit einer Seite in Shopify

Im Theme-Editor sehen Sie ein Link-Feld, wenn Sie auf einen Button-Block klicken. Sie können verlinken auf:

Die Link-Auswahl im Theme-Editor zeigt eine durchsuchbare Liste Ihrer Seiten, Produkte und Kategorien.

Siehe auch: So fügst du CTAs zu einer Shopify-Kategorieseite hinzu (2026).


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 der 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 Optionen:

Option 1 — Eine Shopify App. Im App Store gibt es diverse Sticky Add-to-Cart Apps. Dies ist der schnellste Weg ohne Code-Änderungen.

Option 2 — Custom Code via Fudge. Beschreiben Sie Fudge, was Sie möchten:

“Füge einen Sticky Add-to-Cart-Balken zu meinen Produktseiten hinzu, der erscheint, wenn der Nutzer am Haupt-ATC-Button vorbeiscrollt. Zeige Produkttitel, Preis und einen Kaufen-Button.”

Fudge generiert den Code und fügt ihn als Entwurf zu Ihrem Theme hinzu. Sie prüfen und veröffentlichen ihn.

Fügen Sie jeden beliebigen Button zu Ihrem Shop hinzu — beschreiben Sie ihn einfach.
Try Fudge for Free

Passend dazu: Custom JavaScript in Shopify hinzufügen.


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 buchen“) erfordert normalerweise die Bearbeitung der Header-Section Ihres Themes.

Im Theme-Editor: Navigieren Sie zur Header-Section und prüfen Sie, ob diese eine Button- oder CTA-Blockoption hat. Einige Themes (wie Dawn) enthalten dies, andere nicht.

Wenn Ihr Theme keine Header-Buttons nativ unterstützt, ist Code erforderlich — die Bearbeitung der header.liquid oder der entsprechenden Section-Datei, um ein Button-Element mit dem gewünschten Link und Styling hinzuzufügen.

Dies ist eine häufige Anfrage. Sie können sie Fudge beschreiben: „Füge einen ‘Jetzt starten’-Button auf der rechten Seite des Headers hinzu, der auf /pages/kontakt verlinkt.“

Passend dazu: Fudge Page Builder.


So ändern Sie den Button-Text in Shopify

Der Button-Text wird im Theme-Editor festgelegt, wenn du einen Button-Block hinzufügst oder bearbeitest. Klicke in den Abschnittseinstellungen auf den Button-Block und aktualisiere das Feld Label.

Für Buttons, die in den Spracheinstellungen deines Themes vorkommen (wie “In den Warenkorb” oder “Jetzt kaufen”), gehe zu Onlineshop → Themes → Aktionen → Sprachen bearbeiten. Suche nach dem Text, den du ändern möchtest, und aktualisiere ihn dort. Eine vollständige Anleitung findest du unter Wie man den Button-Text in Shopify ändert.


FAQ

Was ist der Unterschied zwischen einem Shopify Buy Button und einem Theme-Editor-Button?

Ein Theme-Editor-Button ist ein klickbares Element, das du innerhalb deiner Storefront-Abschnitte hinzufügst und für jeden beliebigen Link oder CTA verwendet wird. Der Buy Button ist ein separater Shopify-Vertriebskanal, der ein einbettbares Widget generiert, um Shopify-Produkte auf externen Websites (einem Nicht-Shopify-Blog oder einer Landingpage) zu verkaufen. Nutze Theme-Editor-Buttons innerhalb deines Shopify-Stores und den Buy Button für Verkäufe außerhalb.

Wie füge ich einen Quick-Add-Button zu einem Shopify-Kategorie-Grid hinzu?

In modernen Online Store 2.0-Themes öffnest du den Theme-Editor → Template für Kategorien → klicke auf den Produkt-Grid-Abschnitt. Suche in den Abschnittseinstellungen nach einem Schalter für "Schnellkauf" (Quick add) oder "Schnellansicht" (Quick view). Wenn dein Theme keinen enthält, musst du entweder das Theme wechseln oder ihn per Custom Code hinzufügen.

Kann ich einen Button ohne Code zu einer Shopify-Seite hinzufügen?

Ja, für Abschnitte, die einen Button-Block enthalten – nutze einfach den Theme-Editor. An Stellen, an denen das Theme keinen Button anbietet (benutzerdefinierte Positionen auf Produktseiten, im Header, in Inhaltsbereichen), benötigst du entweder Custom Code, einen Page Builder oder ein KI-Tool wie Fudge, das den Code anhand einer Beschreibung generiert.

Wie ändere ich die Farbe oder den Stil eines Shopify-Buttons?

Die meisten Themes legen Button-Farben global unter Theme-Editor → Theme-Einstellungen → Farben oder Buttons fest. Um das Design eines einzelnen Buttons zu ändern, ohne den Rest zu beeinflussen, benötigst du einen Custom-Liquid-Block mit Inline-CSS oder Änderungen am Theme-Code. Siehe Wie man Farben und Schriftarten in Shopify aktualisiert für die vollständige Anleitung.

Was ist der "Follow on Shop"-Button von Shopify?

Das ist ein separater Button, den du in den Footer deines Stores einfügen kannst, damit Besucher deiner Marke in Shopifys Shop-App folgen können. Füge ihn unter Onlineshop → Themes hinzu → suche nach den Einstellungen des „Follow on Shop“-Abschnitts. Er hat nichts mit Theme-Editor-Buttons oder dem Buy Button-Vertriebskanal zu tun.

Jacques's signature
Füge jeden beliebigen Button überall hinzu – indem du ihn einfach beschreibst.

You might also be interested in

So bearbeitest du Text auf jeder Seite in Shopify (2026)
Die drei Orte, an denen Texte in Shopify gespeichert sind, und wie man sie jeweils bearbeitet – Seiten-Editor, Theme-Spracheinstellungen und fest im Theme-Code eingebauter Text.
So änderst du die Schriftgröße von Überschriften in Shopify (2026)
Erfahre, wie du die Schriftgröße von Überschriften in Shopify änderst — über die globalen Typografie-Einstellungen im Theme-Editor sowie mit individuellem CSS für präzise Kontrolle.
So duplizierst du einen Abschnitt in Shopify (2026)
So duplizierst du einen Abschnitt im Shopify Theme Editor. Kopiere jeden Bereich samt Inhalt und Einstellungen, um Seiten-Layouts schneller zu erstellen.