Das Wichtigste auf einen Blick
- Quick-Add/Warenkorb-Buttons auf Produktkarten: Im Theme-Editor in den Einstellungen für Kategorien (Collections) aktivieren.
- CTAs auf Kategorie-Ebene (Banner, Werbeabschnitte): Über den Theme-Editor > Abschnitt hinzufügen.
- Eigene Buttons mit speziellen Zielen: Einen Button-Block in einem Text- oder Banner-Abschnitt hinzufügen.
- Für CTAs, die nicht von den Standard-Abschnitten des Theme-Editors unterstützt werden, kannst du Fudge nutzen, um den Code zu generieren.
CTAs auf Kategorieseiten gibt es in zwei Varianten: 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 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 Kategorieseite platzierst, ist entscheidend:
- Ganz oben (über dem Raster): Ideal für Werbebanner („Summer Sale – bis zu 40 % Rabatt“), um den Kontext vor dem Stöbern zu klären.
- Innerhalb des Produktrasters: Quick-Add-Buttons befinden sich direkt im Raster selbst.
- Zwischen den Rasterzeilen: Einige Shops fügen einen Werbe-CTA-Block zwischen Produktzeilen ein (z. B. nach der 2. Zeile). Dies ist eine individuelle Anpassung.
- Unter dem Raster: Ein guter Platz für „Nicht gefunden, was du suchst? Kontaktier uns“ oder einen Newsletter-CTA.