Das Wichtigste in Kürze
- Quick-Add / In den Warenkorb-Buttons auf Produktkarten: Im Theme-Editor > Kategorie-Abschnitt-Einstellungen aktivieren.
- CTAs auf Kategorie-Ebene (Banner, Promo-Abschnitte): Über Theme-Editor > Abschnitt hinzufügen einbauen.
- Eigene Buttons mit bestimmten Zielen: Füge einen Button-Block in einem Rich-Text- oder Banner-Abschnitt hinzu.
- Für CTAs, die von den Theme-Editor-Abschnitten nicht 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 Kategorie-Ebene (ein Promo-Banner 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 erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung 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
Für eine CTA, die sich auf die gesamte Kategorie bezieht – wie ein „Shoppe das Summer Edit“-Banner mit Button oder einen „Kostenloser Versand ab 75 €“-Hinweis – fügst du diese als Abschnitt über den Theme-Editor hinzu.
Verwandtes Thema: Ein Banner zu einer Shopify-Kategorieseite hinzufügen.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen > Navigiere zu einer Kategorieseite.
Schritt 2. Klicke in der Abschnittsliste auf Abschnitt hinzufügen. Wähle:
- Bild-Banner – ein bildschirmfüllendes Bild mit Überschrift und Button-Overlay
- Rich Text – ein Textblock mit optionalem Button
- Promo-Banner – falls dein Theme diesen Abschnittstyp bietet
Schritt 3. Konfiguriere den Abschnitt: Füge deine Überschrift, den Text, das Button-Label und den Button-Link hinzu.
Schritt 4. Verschiebe den Abschnitt an die richtige Position im Seitenlayout (oberhalb oder unterhalb des Produktrasters).
Schritt 5. Speichern.
Hinweis: Abschnitte, die im Theme-Editor für die Vorlage „Kategorie“ hinzugefügt wurden, erscheinen auf allen Kategorieseiten. Für kategorienspezifische CTAs verwende Metafelder oder erstelle separate Kategorie-Vorlagen.
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) Die Funktion existiert in deinem Theme, ist aber in den Abschnitts-Einstellungen für Kategorien deaktiviert, (2) deine Theme-Version ist älter als das Quick-Add-Feature (älteren Themes wie Debut/Brooklyn fehlt es), oder (3) bei Produkten ohne verfügbare Varianten oder nicht vorrätigen Artikeln wird der Quick-Add oft automatisch ausgeblendet.
Bei Produkten ohne Varianten (oder mit nur einer Variante) – ja, überspringe die Auswahl und füge den Artikel direkt hinzu. Bei Produkten mit mehreren Varianten (Größen, Farben) – niemals überspringen. Das führt nur zu Retouren und Beschwerden von Käufern, die aus Versehen die falsche Variante gewählt haben. Moderne Themes übernehmen diese Unterscheidung meist automatisch.
Ja, aber es erfordert etwas Setup. Der sauberste Weg: Beschreibe Fudge einfach, was du brauchst ("Lese CTA-Text und -Link aus einem Kategorie-Metafeld aus, nutze einen Standardwert, falls leer"), und das Tool erstellt dir den Metafeld-basierten Abschnitt, damit du den CTA pro Kategorie ohne zusätzliche Templates festlegen kannst. Alternative: Eigene Templates für jede Kategorie mit jeweils eigener CTA-Konfiguration.
Nur minimal. Der Button an sich ist schlicht HTML/CSS. Quick-Add-Buttons sind etwas aufwendiger, weil sie beim Klick Varianten-Daten abrufen, aber das passiert erst auf Anfrage – nicht direkt beim Laden der Seite.
Spezifisch schlägt generisch. "47 Sommerkleider shoppen" funktioniert besser als "Jetzt shoppen". "Kostenlose Rücksendung bei jeder Bestellung" konvertiert besser als "Mehr erfahren". Sag deinen Kunden genau, was sie beim Klick erwartet – unklare CTAs schneiden konstant schlechter ab.
