Das Wichtigste in Kürze
- Quick-Add/In den Warenkorb-Buttons auf Produktkarten: im Theme-Editor > Einstellungen für den Abschnitt Kategorien aktivieren.
- CTAs auf Kategorie-Ebene (Banner, Werbebereiche): über Theme-Editor > Abschnitt hinzufügen einfügen.
- Benutzerdefinierte Buttons mit bestimmten Zielen: einen Button-Block in einem Rich-Text- oder Banner-Abschnitt hinzufügen.
- Für CTAs, die nicht von den Theme-Editor-Abschnitten unterstützt werden, kannst du Fudge nutzen, um den Code zu generieren.
CTAs auf Kategorie-Seiten gibt es in zwei Formen: auf Produktebene (Quick-Add-Buttons auf jeder Karte) und auf Kategorieebene (ein Werbebanner oder ein „Shop the Edit“-Button für die gesamte Kategorie). Hier erfährst du, wie du beides hinzufügst.
Warum du uns vertrauen kannst
Wir haben Hunderte von Shopify-Storefronts aufgebaut und angepasst. Wir haben außerdem Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store.
Produktkarten-CTAs – Quick-Add-Buttons
Die gebräuchlichste CTA auf einer Kategorieseite ist der Quick-Add-to-Cart-Button auf jeder Produktkarte. Dadurch können Kunden Produkte direkt aus dem Raster hinzufügen, ohne die Produktseite besuchen zu müssen.
So aktivierst du Quick-Add-Buttons:
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Navigiere zu einer Kategorieseite.
Schritt 3. Klicke in der linken Seitenleiste auf den Bereich Kategorie oder Produktraster (der Abschnitt, der deine Produkte anzeigt).
Schritt 4. Suche nach einer Einstellung namens „Quick-Add aktivieren“, „Quick Buy“ oder „In den Warenkorb-Button anzeigen“.
Schritt 5. Aktiviere die Einstellung und speichere.
Quick-Add-Buttons erscheinen normalerweise beim Drüberfahren mit der Maus (Desktop) oder dauerhaft (Mobil) auf den Produktkarten. Bei Produkten mit Varianten (Farben, Größen) öffnet sich beim schnellen Hinzufügen meist ein Pop-up zur Variantenauswahl.
Verwandtes Thema: Cross-Sells im Shopify-Warenkorb hinzufügen.
Um die Ergebnisse zu messen, siehe Klick-Events in Shopify tracken.
Verwandtes Thema: Eine Kategorieseite in Shopify anpassen.
Verwandtes Thema: Einen Button in Shopify hinzufügen.
CTAs auf Kategorie-Ebene – Banner und Buttons
Einen CTA, der für die gesamte Collection gilt – wie ein Banner „Shop the Summer Edit“ mit Button oder ein Hinweis „Kostenloser Versand bei Bestellungen über 75 €“ – fügst du als Abschnitt über den Theme Editor hinzu.
Passend dazu: Banner zu einer Shopify-Collection-Seite hinzufügen.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen > navigiere zu einer Collection-Seite.
Schritt 2. Klicke in der Abschnittsliste auf Abschnitt hinzufügen. Wähle:
- Bildbanner – ein Bild in voller Breite mit Überschrift und Button-Overlay
- Rich Text – ein Textblock mit optionalem Button
- Promo-Banner – falls dein Theme diesen Abschnittstyp hat
Schritt 3. Konfiguriere den Abschnitt: Füge deine Überschrift, Text, Button-Label und Button-Link hinzu.
Schritt 4. Ziehe den Abschnitt an die richtige Position im Seitenlayout (über oder unter das Produktraster).
Schritt 5. Speichern.
Hinweis: Abschnitte, die im Theme Editor für das Collection-Template hinzugefügt werden, erscheinen auf allen Collection-Seiten. Für Collection-spezifische CTAs solltest du Metafelder verwenden oder separate Collection-Templates erstellen.
Einen „Alle ansehen“ oder „Jetzt shoppen“ Button hinzufügen
Wenn du einen einfachen Button möchtest, der zu einem bestimmten Ziel führt (eine Kategorie, eine Landingpage oder eine externe URL), füge ihn in einem Rich Text oder Button Abschnitt im Theme-Editor hinzu.
In einem Rich-Text-Abschnitt findest du Felder für Button-Label und Button-Link. Setze das Label auf „Jetzt shoppen“ oder „Alle ansehen“ und verlinke es mit dem gewünschten Ziel.
CTAs auf Produktkarten jenseits von Quick-Add
Manche Shops wünschen sich komplexere Interaktionen auf der Produktkarte – einen „Für später speichern“-Button, eine „Vergleichen“-Checkbox, ein Wunschzettel-Icon oder eine Größenauswahl direkt auf der Karte.
Diese Funktionen gehen über den Standard-Quick-Add des Theme-Editors hinaus. Sie erfordern Code-Anpassungen am Template der Produktkarte.
Beschreibe Fudge, was du brauchst: „Füge ein Herz-Icon für den Wunschzettel oben rechts auf jeder Produktkarte auf Kategorieseiten hinzu. Beim Klicken wird das Produkt auf einer Wunschliste gespeichert.“
Stickige „Diese Kategorie shoppen“ CTAs
Ein fixierter (sticky) Balken am unteren Rand oder ein schwebender Button mit einem kategorispezifischen CTA (z. B. „Alle 47 Produkte ansehen“) ist ein neuer Trend auf Kategorieseiten mit hohen Conversion-Raten. So bleibt eine klare Handlungsaufforderung beim Scrollen immer sichtbar.
Dies ist im Standard-Theme-Editor nicht verfügbar. Beschreibe es Fudge: „Füge auf dem Handy am unteren Rand der Kategorieseiten einen Sticky Button hinzu, der sagt ‘Alle [Kategoriename] Produkte ansehen’. Er soll verschwinden, wenn der Nutzer den Footer erreicht.“
Strategie für die CTA-Platzierung
Wo du CTAs auf einer Collection-Seite platzierst, ist wichtig:
- Ganz oben (über dem Grid): Funktioniert gut für Promo-Banner (“Sommer-Sale – bis zu 40 % Rabatt”), bei denen du den Kontext vor dem Stöbern festlegen willst.
- Im Produkt-Grid: Quick-Add-Buttons sitzen direkt im Grid selbst.
- Zwischen den Grid-Reihen: Einige Shops fügen einen Promo-CTA-Block zwischen den Produktreihen ein (z. B. nach der zweiten Reihe). Das ist eine individuelle Anpassung.
- Unter dem Grid: Ein guter Platz für einen “Nicht gefunden, wonach du suchst? Kontaktiere uns”- oder Newsletter-Anmelde-CTA.
FAQ
Drei häufige Ursachen: (1) Der Schalter existiert in deinem Theme, ist aber in den Einstellungen des Collection-Abschnitts deaktiviert, (2) deine Theme-Version ist älter als das Quick-Add-Feature (ältere Debut/Brooklyn-Versionen haben es nicht), oder (3) Produkte ohne verfügbare Varianten und ausverkaufte Artikel blenden Quick-Add oft automatisch aus.
Bei Produkten ohne Varianten (oder mit nur einer Variante) – ja, überspringe die Auswahl und füge sie direkt hinzu. Bei Produkten mit mehreren Varianten (Größen, Farben) – niemals überspringen; du riskierst Retouren und Beschwerden von Käufern, die die falsche Variante gewählt haben. Moderne Themes übernehmen diese Unterscheidung automatisch.
Ja, aber das erfordert etwas Einrichtung. Die sauberste Lösung: Beschreibe Fudge was du möchtest ("Lese CTA-Text und Link aus einem Metafeld pro Collection, greife auf einen Standard zurück, falls leer") und es baut dir den Metafeld-gesteuerten Abschnitt, sodass du den CTA pro Collection ohne zusätzliche Templates festlegen kannst. Alternative: Eigene Templates für jede Collection mit jeweils eigener CTA-Konfiguration.
Kaum. Der Button selbst besteht nur aus HTML/CSS. Quick-Add-Buttons sind etwas ressourcenintensiver, da sie beim Klicken Variantendaten abrufen, aber das geschieht erst bei Bedarf – nicht beim ersten Laden der Seite.
Spezifisch schlägt generisch. "Jetzt 47 Sommerkleider shoppen" konvertiert besser als "Jetzt shoppen". "Kostenlose Retouren für jede Bestellung" ist besser als "Mehr erfahren". Sag deinen Kunden genau, was sie nach dem Klick erwartet – vage CTAs schneiden durchweg schlechter ab.
