So fügst du deinem Shopify-Theme einen „Alle Produkte anzeigen“-Button hinzu (Guide 2025)

Je nachdem, welches Shopify-Theme du verwendest, kann es schwierig sein, auf der Kollektionsseite einen „Alle Produkte anzeigen“-Button hinzuzufügen. Mit diesem Button können deine Kund:innen alle Produkte der Kollektion ohne bestimmte Sortierung sehen – das verbessert die Navigation und erhöht die Sichtbarkeit deiner Produkte.

Hier ist eine einfache Möglichkeit, diesen Button zu Themes wie Minimal hinzuzufügen. Das kann je nach Theme unterschiedlich sein, aber die Grundprinzipien sind oft ähnlich. Mit Shopifys verbessertem Code-Editor und dem Online Store 2.0-Framework im Jahr 2025 ist die Anpassung so unkompliziert wie nie zuvor.

So fügst du einen „Alle Produkte anzeigen“-Button hinzu

Die folgende Methode zeigt, wie du den Button am unteren Ende des Abschnitts „Featured Collection“ hinzufügst. Du kannst das aber bei Bedarf auch auf andere Seiten deines Shops übertragen. Bevor du Änderungen am Code vornimmst, dupliziere immer dein Theme, um eine Sicherungskopie zu erstellen:

1. Gehe zu „Code bearbeiten“:
   • Navigiere in dein Shopify-Admin.
   • Wähle Online Store > Themes > Actions > Edit Code.
   • Hinweis: Shopifys neuer Code-Editor (ausgerollt 2025) bietet eine verbesserte Suche, LiquidDoc-Unterstützung und Dark-Mode-Optionen für leichteres Bearbeiten.
2. Wähle „Sections“:
   • Öffne den Ordner Sections und suche feature-collection.liquid (oder die entsprechende Section-Datei in deinem Theme).
   • Moderne Online Store 2.0-Themes können andere Dateistrukturen haben – prüfe bei Bedarf die Dokumentation deines Themes.
3. Code finden:
   • Suche die passenden </div>-Tags, an der Stelle, an der du den Button einfügen möchtest (typischerweise nahe dem Ende des Abschnitts).
   • Füge den folgenden Code zwischen diese Tags ein:

   {% if section.settings.show_view_all_button %}
             <div class="text-center">
             <a href="/collections/all" class="btn">View All Products</a>
             </div>
   {% endif %}

    

4. Settings-Schema aktualisieren:
   • Scrolle zum Ende der Section-Datei, um die Schema-Settings zu finden.
   • Suche nach einer Einstellung wie "label": "Center text below product images" oder ähnlich.
   • Füge vor der schließenden geschweiften Klammer (}) ein Komma ein und füge dann folgenden Code ein:

     {
             "type": "checkbox",
             "id": "show_view_all_button",
             "label": "Display the View All Button"
           }

   • Tipp: Nutze Kommentare in deinem Code, um deine Änderungen zu dokumentieren. In Liquid verwendest du dafür {% comment %} deine Notiz {% endcomment %}, damit du Custom-Code später leichter wiederfindest.
5. Speichern und anpassen:
   • Klicke auf Save (oder nutze Cmd + S auf dem Mac bzw. Ctrl + S unter Windows).
   • Gehe im Theme-Editor zu Customize.
   • Wähle im Bereich Sections die Featured Collection aus und aktiviere das Kontrollkästchen, um den „View All Products“-Button anzuzeigen.
   • Du kannst den Button-Text auch anpassen, indem du "View All Products" durch deinen gewünschten Text ersetzt, z. B. "Shop All" oder "Browse Collection"

{% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/all" class="btn">Shop All</a>
          </div>
    {% endif %}

Best Practices für 2025

1. Immer ein Backup erstellen:
   • Dupliziere dein Theme, bevor du Änderungen am Code vornimmst, damit du bei Bedarf jederzeit zurückrollen kannst.
2. Shopifys verbesserten Code-Editor nutzen:
   • Nutze die neuen Funktionen des Code-Editors – einschließlich des Theme Check Linters, der Fehler früh erkennt und Best Practices unterstützt.
3. Änderungen schrittweise testen:
   • Nimm jeweils nur kleine Änderungen vor und teste sie, bevor du weitermachst – so vermeidest du, dass dein Shop kaputtgeht.
4. Erst den Theme-Editor in Betracht ziehen:
   • Für einfache Anpassungen kannst du mit Shopifys visuellem Theme-Editor Änderungen auch ohne Code vornehmen.
5. Dein Theme schlank halten:
   • Überlade dein Theme nicht mit unnötigem Code, damit die Ladezeiten schnell bleiben.

Gründe/Vorteile für das Hinzufügen eines „Alle Produkte anzeigen“-Buttons

1. Verbesserte Navigation:
   • Bietet Kund:innen eine einfache Möglichkeit, alle Produkte einer Kollektion zu sehen – das verbessert das Einkaufserlebnis.
2. Mehr Produktsichtbarkeit:
   • Stellt sicher, dass alle Produkte innerhalb einer Kollektion leicht erreichbar sind – das kann den Umsatz steigern, weil Kund:innen mehr Artikel entdecken.
3. Mehr Komfort für Nutzer:innen:
   • Reduziert die Anzahl der Klicks, die Kund:innen benötigen, um Produkte zu erkunden – das macht den Kaufprozess flüssiger und angenehmer.
4. Erweiterte Theme-Anpassung:
   • Mit diesem Button kannst du dein Theme stärker anpassen und deinen Shop benutzerfreundlicher sowie optisch ansprechender gestalten.
5. Bessere Darstellung des Sortiments:
   • Besonders hilfreich für Shops mit großem Sortiment, da Kund:innen umfangreiche Produktlisten schneller durchstöbern können.
6. Verbesserte Conversion Rates:
   • Bessere Navigation und höhere Produktsichtbarkeit können zu mehr Conversions führen – Studien zeigen, dass optimierte Shop-Anpassungen die Conversion Rate deutlich steigern können.

Fazit

Ein „View All Products“-Button auf deiner Shopify-Kollektionsseite kann die Navigation deutlich verbessern und das Einkaufserlebnis deiner Kund:innen spürbar aufwerten. Auch wenn die Schritte je nach Theme leicht variieren können, bleiben die grundlegenden Prinzipien gleich.

Mit Shopifys verbessertem Code-Editor und dem Online Store 2.0-Framework im Jahr 2025 sind solche Anpassungen deutlich zugänglicher geworden. Diese Ergänzung verbessert nicht nur die Usability, sondern erhöht auch die Sichtbarkeit aller Produkte innerhalb einer Kollektion – was potenziell den Umsatz steigern kann. Wenn du die oben beschriebenen Schritte befolgst und Best Practices wie Backups und schrittweises Testen einhältst, kannst du diese Funktion leicht umsetzen und deinen Kund:innen ein nahtloseres Stöber-Erlebnis bieten.

Wenn du dich nicht wohl dabei fühlst, Code direkt zu bearbeiten, nutze alternativ den Shopify-Theme-Editor oder beauftrage einen Shopify Partner, der dich bei den Anpassungen unterstützt.