Tutorials

Wie man den „Alle anzeigen“-Button in Shopify ändert [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du den „Alle anzeigen“ (View All) Button in deinem Shopify-Store im Jahr 2025 anpassen kannst – ohne oder mit nur wenig Code.

Der „Alle anzeigen“-Button ist entscheidend für die Benutzererfahrung (UX). Er leitet Kunden von deiner Startseite zu deinen vollständigen Kollektionen. In diesem Guide lernst du, wie du den Text, das Design und die Position anpasst.

Methode 1: Den Text ändern (Über den Sprach-Editor)

Möchtest du, dass der Button statt „Alle anzeigen“ lieber „Jetzt shoppen“ oder „Ganze Kollektion“ heißt? Das geht ganz einfach ohne Programmierung.

  1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
  2. Klicke bei deinem aktuellen Theme auf die drei Punkte (...) und wähle Standard-Theme-Inhalt bearbeiten (Edit default theme content).
  3. Gib in das Suchfeld oben das Wort View all ein.
  4. Suche den Bereich „Collections“ oder „Featured Collection“.
  5. Ersetze den Text im Feld durch deinen Wunschtext (z. B. „Alles entdecken“).
  6. Klicke oben rechts auf Speichern.

Methode 2: Das Design im Theme-Editor anpassen

Moderne Shopify-Themes (wie Dawn, Sense oder Refresh) bieten integrierte Einstellungen für das Button-Design.

  1. Gehe zu Onlineshop > Themes > Anpassen (Customize).
  2. Klicke auf der linken Seite auf den Abschnitt (Section), der den Button enthält (meistens „Ausgewählte Kollektion“ / Featured Collection).
  3. Scrolle in den Einstellungen auf der rechten Seite nach unten bis zum Punkt „Alle anzeigen“-Button aktivieren.
  4. Je nach Theme kannst du hier oft den Button-Stil wählen:
    • Solid button: Ausgefüllter Button.
    • Outline button: Nur Umrandung.
    • Link: Nur Text-Link.
  5. Um die Farben global zu ändern, gehe links auf das Zahnrad-Symbol (Theme-Einstellungen) > Farben. Beachte, dass sich dies auf alle Buttons im Shop auswirkt.

Methode 3: Individuelles Styling mit CSS (Für Fortgeschrittene)

Wenn du die Farbe, Schriftgröße oder Abrundung nur für diesen speziellen Button ändern möchtest, kannst du Custom CSS nutzen.

  1. Gehe im Theme-Editor auf die Sektion „Ausgewählte Kollektion“.
  2. Scrolle ganz nach unten zum Bereich Benutzerdefiniertes CSS (Custom CSS).
  3. Füge dort einen Code ähnlich wie diesen ein:
/* Den Button individuell anpassen */
.view-all-button {
  background-color: #ff0000 !important; /* Deine Wunschfarbe */
  color: #ffffff !important; /* Textfarbe */
  border-radius: 20px; /* Abgerundete Ecken */
  padding: 10px 30px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Hover-Effekt (wenn man mit der Maus drüberfährt) */
.view-all-button:hover {
  background-color: #000000 !important;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

(Hinweis: Die CSS-Klasse kann je nach Theme variieren. Bei „Dawn“ heißt sie meist .button innerhalb der Collection-Sektion.)

Methode 4: Den Button verschieben (Layout)

Standardmäßig platzieren viele Themes den Button unter den Produkten. Wenn du ihn nach oben oder direkt neben die Überschrift schieben möchtest:

  1. Suche im Theme-Editor unter der Sektion „Ausgewählte Kollektion“ nach „Layout“.
  2. Einige Premium-Themes bieten eine Dropdown-Option für die „Button-Position“ (Oben, Unten, Zentriert).
  3. Wenn dein Theme dies nicht anbietet, müsstest du die Datei featured-collection.liquid im Code-Editor bearbeiten (nur für Profis empfohlen!).

Profi-Tipps für 2025:

  • Mobile First: Prüfe immer in der mobilen Ansicht des Theme-Editors, ob der Button groß genug ist, um mit dem Daumen angeklickt zu werden.
  • Kontrast: Achte darauf, dass sich die Farbe des Buttons deutlich vom Hintergrund abhebt, um die Klickrate (CTR) zu erhöhen.
  • Dringlichkeit: Teste Wörter wie „Nur für kurze Zeit“ oder „Alles sehen“, um die Neugier der Kunden zu wecken.

Du hast Probleme mit einem speziellen Theme? Schreib kurz, welches Theme du nutzt (z.B. Dawn, Prestige, Empire), und ich gebe dir den exakten CSS-Selektor!

0