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
Der gängigste CTA auf einer Kategorieseite ist der Quick-Add-to-cart-Button auf jeder Produktkarte. So können Kunden Produkte direkt aus der Übersicht in den Warenkorb legen, ohne die Produktseite aufzurufen.
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 Abschnitt Kategorie oder das Produktraster (der Bereich, der deine Produkte anzeigt).
Schritt 4: Suche nach einer Einstellung namens „Quick Add aktivieren“, „Schnellkauf“ oder „In den Warenkorb Anzeigen“.
Schritt 5: Aktiviere sie und speichere.
Quick-Add-Buttons erscheinen normalerweise beim Hovern (Desktop) oder dauerhaft (Mobil) auf den Produktkarten. Bei Produkten mit Varianten (Farben, Größen) öffnet der Schnellkauf in der Regel ein Pop-up zur Variantenauswahl.
CTAs auf Kategorie-Ebene – Banner und Buttons
Für einen CTA, der für die gesamte Kategorie gilt – wie ein „Shop the Summer Edit“-Banner mit Button oder ein Hinweis „Gratisversand ab 75 €“ – fügst du einen Abschnitt über den Theme-Editor hinzu.
Schritt 1: Gehe zu Onlineshop > Themes > Anpassen > navigiere zu einer Kategorieseite.
Schritt 2: Klicke in der Abschnittsliste auf Abschnitt hinzufügen. Wähle zum Beispiel:
- Image Banner – ein Bild in voller Breite mit Überschrift und Button-Overlay
- Rich Text – ein Textblock mit optionalem Button
- Werbebanner – falls dein Theme diesen Abschnittstyp bietet
Schritt 3: Konfiguriere den Abschnitt: Füge Überschrift, Text, Button-Beschriftung und den Button-Link hinzu.
Schritt 4: Ziehe den Abschnitt an die richtige Stelle im Seitenlayout (über oder unter das Produktraster).
Schritt 5: Speichere die Änderungen.
Hinweis: Abschnitte, die im Theme-Editor für das Kategorie-Template hinzugefügt werden, erscheinen auf allen Kategorieseiten. Für kategorie-spezifische CTAs solltest du Metafelder nutzen oder separate 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 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.
