Tutorials

Wie man eine Produktgalerie mit Thumbnail-Slider in Shopify erstellt [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du im Jahr 2025 eine Produktbild-Galerie mit einem Thumbnail-Slider (Miniaturansichten-Slider) in deinem Shopify-Store einrichtest – ganz ohne oder mit nur wenig Code.

Eine ansprechende Produktpräsentation ist entscheidend für die Conversion-Rate. Im Jahr 2025 erwarten Kunden eine intuitive Galerie, in der sie schnell zwischen Bildern wechseln können. In diesem Guide zeige ich dir die drei besten Wege, dies umzusetzen.

Methode 1: Über den Shopify Theme-Editor (Kostenlos & ohne Code)

Die meisten modernen Shopify-Themes (OS 2.0 wie Dawn, Sense, Craft etc.) haben diese Funktion bereits integriert.

Schritt-für-Schritt:

  1. Logge dich in dein Shopify Admin ein.
  2. Gehe zu Onlineshop > Themes.
  3. Klicke neben deinem aktuellen Theme auf Anpassen (Customize).
  4. Wähle oben im Dropdown-Menü Produkte > Standardprodukt.
  5. Klicke in der linken Seitenleiste auf den Bereich Produktinformationen (oder direkt auf das Produktbild im Vorschaufenster).
  6. Suche in den Einstellungen rechts nach dem Abschnitt Medien oder Desktop-Layout.
  7. Dort findest du Optionen wie:
    • Desktop-Layout: Wähle „Thumbnail-Karussell“ oder „Miniaturansichten“.
    • Bildzoom: Aktiviere „Click and Hover“, um die User Experience zu verbessern.
    • Thumbnail-Position: Wähle zwischen „Links“ oder „Unten“.
  8. Klicke auf Speichern.

Methode 2: Nutzung einer Shopify-App (Für fortgeschrittene Funktionen)

Wenn dein Theme keine Slider-Funktion hat oder du Features wie Video-Support, 3D-Modelle oder spezielle Zoom-Effekte benötigst, ist eine App die beste Wahl.

Empfohlene Apps 2025:

  • Product Image Gallery & Zoom (z. B. von POWR oder Gravity)
  • All-in-one Image Master
  • Magic Zoom Plus

Vorgehensweise:

  1. Gehe in den Shopify App Store.
  2. Suche nach „Product Gallery Slider“.
  3. Installiere die App deiner Wahl (viele haben eine kostenlose Testphase).
  4. Die meisten Apps integrieren sich automatisch. Du musst nur im App-Dashboard das Design an deine Markenfarben anpassen.

Methode 3: Custom Code mit „Slick Slider“ (Für Entwickler)

Falls du volle Kontrolle möchtest und keine monatlichen App-Gebühren zahlen willst, kannst du eine Library wie Slick Slider oder Swiper.js nutzen.

Kurzanleitung:

  1. Library einbinden: Gehe zu theme.liquid und füge die CSS- und JS-Dateien von Swiper.js im <head> ein.
  2. Snippet erstellen: Erstelle ein neues Snippet product-slider.liquid.
  3. Liquid-Code: Nutze eine for-Schleife, um die Produktbilder auszugeben:
    {% for media in product.media %}
  <div class="swiper-slide">
    {{ media | image_url: width: 800 | image_tag }}
  </div>
{% endfor %}
  4. JavaScript initialisieren: Verknüpfe den Haupt-Slider mit dem Thumbnail-Slider über die Swiper-API („thumbs“-Option).

Hinweis: Diese Methode erfordert fortgeschrittene Kenntnisse in HTML/CSS und Liquid.

Bonus-Tipp für 2025: Mobile Optimierung

Achte darauf, dass der Thumbnail-Slider auf Mobilgeräten anders funktioniert:

  • Wischgesten (Touch-Swipe): Stellen sicher, dass Kunden die Bilder einfach mit dem Daumen wischen können.
  • Paginierung: Auf dem Smartphone sind oft kleine Punkte (Dots) besser geeignet als Miniaturbilder, um Platz zu sparen.
  • Ladezeit: Nutze Shopifys image_tag, um Bilder automatisch im WebP-Format und mit „Lazy Loading“ auszuliefern.

Fazit

Für 90% der Shop-Besitzer ist Methode 1 (Theme-Editor) die beste Wahl, da moderne Shopify-Themes (OS 2.0) extrem schnell und flexibel sind. Wenn du spezielle Design-Wünsche hast, greife zu einer bewährten App, um Zeit bei der Programmierung zu sparen.

Hast du Fragen zur Umsetzung in einem speziellen Theme? Schreib es in die Kommentare!

0