Tutorials

Shopify Mobile-Ansicht optimieren: Bilder & Videos richtig skalieren [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du die mobile Ansicht deines Shopify-Shops optimierst, insbesondere das Skalieren von Bildern und Videos.

Im Jahr 2025 kommen über 70 % aller E-Commerce-Zugriffe über das Smartphone. Wenn deine Bilder den Bildschirm sprengen oder Videos abgeschnitten sind, verlierst du bares Geld. In diesem Guide lernst du, wie du diese Fehler ohne tiefgehende Programmierkenntnisse behebst.

Schritt 1: Nutze den Shopify Theme-Editor (Die Basis)

Bevor wir Code anfassen, nutzen wir die eingebauten Funktionen von Shopify (z. B. für Dawn oder andere OS 2.0 Themes).

  1. Gehe zu Onlineshop > Themes > Anpassen.
  2. Klicke oben in der Mitte auf das Desktop-Icon und wechsle zur Mobilen Ansicht.
  3. Klicke auf einen Abschnitt (z. B. "Bild-Banner").
  4. Suche in der Seitenleiste nach Mobile Layout. Viele Themes bieten hier Optionen wie:
    • "Bild auf Mobilgeräten stapeln"
    • "Mobile Bildhöhe anpassen (Klein/Mittel/Groß)"
    • "Text unter dem Bild anzeigen"

Schritt 2: Bilder per CSS für Mobilgeräte skalieren

Manchmal skalieren Bilder in benutzerdefinierten Abschnitten nicht richtig. So fixierst du das mit ein wenig CSS:

  1. Gehe zu Onlineshop > Themes.
  2. Klicke auf die drei Punkte (...) neben "Anpassen" > Code bearbeiten.
  3. Suche die Datei base.css oder theme.css.
  4. Rolle ganz nach unten und füge diesen Code ein:
/* Mobile Optimierung für Bilder */
@media screen and (max-width: 749px) {
  .custom-image-class img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain; /* Verhindert das Abschneiden */
  }
}

Hinweis: Ersetze .custom-image-class durch die CSS-Klasse deines Bildes (findest du über Rechtsklick > "Untersuchen" im Browser).

Schritt 3: Videos responsiv machen (YouTube, Vimeo oder Datei)

Videos sind oft das größte Problem. Sie behalten auf dem Handy oft ihre feste Breite bei.

Methode A: Der CSS-Container-Trick

Wenn dein Video abgeschnitten ist, füge diesen Code in deine base.css ein:

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Format */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe, 
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Methode B: Natives Shopify Video-Element

Wenn du das Shopify-Video-Element nutzt, stelle im Editor sicher, dass du keine feste Breite (z. B. 1200px) eingestellt hast, sondern das Feld leer lässt oder auf "100%" stellst.

Schritt 4: Bildgrößen-Optimierung (Ladezeiten)

Ein Bild, das auf dem Desktop 2000px breit ist, muss auf dem Handy nicht so groß geladen werden.

  1. Dateiformat: Nutze WebP anstatt PNG oder JPEG. Es ist bei gleicher Qualität viel kleiner.
  2. Seitenverhältnis: Versuche, für Banner ein Verhältnis von 4:3 oder 1:1 für Mobilgeräte zu nutzen.
  3. Shopify Funktion: Moderne Themes unterstützen "Responsive Images" automatisch. Achte darauf, dass du in den Theme-Einstellungen unter "Medien" die Bildoptimierung aktiviert hast.

Schritt 5: Die Ansicht testen (Der Profi-Weg)

Verlasse dich nicht nur auf die Vorschau im Shopify-Editor.

  1. Öffne deinen Shop im Chrome-Browser auf dem Desktop.
  2. Drücke F12 (oder Rechtsklick > Untersuchen).
  3. Klicke auf das kleine Smartphone-Icon oben links in den Entwicklertools.
  4. Wähle oben verschiedene Geräte aus (z. B. iPhone 14, Samsung Galaxy).
  5. Prüfe: Ragen Bilder über den Rand? Muss man seitlich scrollen? (Das sollte nie passieren!)

Bonus-Tipp: Mobile-First Apps

Wenn dir das manuelle Anpassen zu kompliziert ist, gibt es Apps wie:

  • Pixc: Image Optimizer (Skaliert und komprimiert automatisch).
  • Vev oder PageFly (Drag-and-Drop Page Builder, die separate Designs für Mobile erlauben).

Zusammenfassung für 2025:

  • Bilder: Nutze object-fit: contain, wenn Köpfe abgeschnitten werden.
  • Videos: Immer in einen Container mit width: 100% setzen.
  • Wichtig: Teste immer den "Add to Cart" Button direkt unter dem skalierten Bild – ist er noch ohne langes Scrollen sichtbar?

Hast du eine spezifische Fehlermeldung oder ein bestimmtes Theme? Schreib es kurz, dann kann ich den Code-Schnipsel anpassen!

0