Die wichtigsten Erkenntnisse
- Shopify unterstützt den Upload von GIFs in den Produktmedien, Inhalten von Seiten und den Bildblöcken im Theme-Editor.
- GIFs werden automatisch abgespielt (Autoplay), wo immer sie eingebettet sind.
- Komprimiere GIFs vor dem Upload – unkomprimierte GIFs können sehr groß sein. Nutze dafür z. B. ezgif.com.
- Für Hero-Bereiche und große Anzeigen ist ein MP4-Video aus Leistungsgründen meist die bessere Wahl.
Um ein GIF in Shopify hinzuzufügen, lädst du es wie jedes andere Bild hoch: im Bereich „Medien“ eines Produkts, über den Button „Bild einfügen“ im Seiten-Editor oder in einem Bildblock im Theme-Editor. Halte die Dateigröße unter 2 MB.
Warum du uns vertrauen kannst
Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 Sternen im Shopify App Store.
So fügst du ein GIF zu einer Produktseite hinzu
Schritt 1. Gehe zu „Produkte“ > wähle dein Produkt aus > scrolle zum Bereich Medien.
Schritt 2. Klicke auf Medien hinzufügen und lade deine GIF-Datei hoch.
Schritt 3. Das GIF erscheint in der Produktgalerie neben deinen statischen Bildern. Wenn Kunden darauf klicken, wird es in der großen Lightbox-Ansicht abgespielt.
Schritt 4. Ziehe es bei Bedarf per Drag-and-Drop an eine andere Position. Speichern.
Das GIF startet in der Galerie-Vorschau und in der Großansicht automatisch per Autoplay. Es gibt keine Play- oder Pause-Buttons – es läuft in einer Endlosschleife.
Große GIFs machen Seiten langsamer; für weitere Geschwindigkeitsoptimierungen siehe Ein Shopify-Theme schneller machen.
So fügst du ein GIF zu einer Shopify-Seite oder einem Blogbeitrag hinzu
Schritt 1. Gehe zu Onlineshop > Seiten (oder Blog-Beiträge) und öffne die Seite, die du bearbeiten möchtest.
Schritt 2. Klicke im Rich-Text-Editor auf den Button Bild einfügen (das Foto-Icon in der Toolbar).
Schritt 3. Lade dein GIF hoch oder wähle es aus den Dateien aus.
Schritt 4. Das GIF wird direkt in den Inhalt eingefügt und automatisch abgespielt, wenn die Seite lädt.
So fügst du ein GIF über den Theme Editor hinzu
Im Theme-Editor kannst du überall dort, wo du einen Bild-Block (Image) oder -Bereich siehst, ein GIF genauso hochladen wie ein statisches Bild.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Klicke auf den Bereich oder Block, in dem du das GIF haben möchtest.
Schritt 3. Lade im Bildwähler dein GIF hoch oder wähle es aus deinen Dateien aus.
Schritt 4. Speichern.
Das GIF wird an dieser Stelle in der Storefront automatisch abgespielt.
Für andere Arten von Animationen, siehe Animierte Inhalte in Shopify hinzufügen.
GIF-Dateigröße – warum sie wichtig ist
GIFs sind bekanntermaßen große Dateien. Eine 5-sekündige Animation bei 800px Breite kann unkomprimiert leicht 10MB überschreiten. Große GIFs verursachen:
- Langsame Ladezeiten der Seite
- Schlechte Core Web Vitals
- Hohen mobilen Datenverbrauch für Kunden
Komprimiere GIFs vor dem Hochladen immer. Nutze ezgif.com – es ist kostenlos, erfordert keinen Account und lässt dich Farben reduzieren, die Größe anpassen und Frames herausschneiden, um die Dateigröße drastisch zu verringern. Ziele auf unter 2MB für jedes GIF, das du in einer Produktgalerie oder in Seiteninhalten verwendest, und unter 500KB für kleine, im Text eingebundene GIFs.
GIF vs. MP4 für animierte Inhalte
Für große animierte Bereiche – Hero-Hintergründe, Banner-Animationen in voller Breite, Produktdemos, die länger als 3 Sekunden dauern – ist ein MP4-Video fast immer die bessere Wahl.
Ein 5-sekündiger Video-Loop im MP4-Format ist typischerweise 80-90 % kleiner als das entsprechende GIF, lädt schneller und sieht schärfer aus. MP4 unterstützt zudem Ton und läuft auf Mobilgeräten flüssiger.
Verwende GIFs, wenn:
- du ein kleines, einfaches animiertes Icon oder Badge brauchst
- du eine Animation in einen Rich-Text-Inhaltsbereich einfügst (wo es keine Video-Option gibt)
- die Animation einfach genug ist, sodass die GIF-Komprimierung gut funktioniert (wenige Farben, wenig Bewegung)
Verwende MP4, wenn:
- die Animation länger als 2-3 Sekunden dauert
- du sie in einem Hero-, Banner- oder einem Bereich über die volle Breite brauchst
- Dateigröße oder Ladegeschwindigkeit wichtig sind
Wie du stattdessen ein MP4 in der Produktgalerie verwendest, erfährst du unter Ein Video zu einer Shopify-Produktgalerie hinzufügen.
GIFs extern hosten
Der Dateispeicherplatz von Shopify ist großzügig, aber nicht unbegrenzt. Wenn du viele GIFs verwendest, kannst du sie extern hosten (z. B. auf Giphy, Cloudinary oder deinem eigenen CDN) und sie über ihre URL einbetten.
In den Bildblöcken des Theme-Editors erfordert dies normalerweise Code, um ein URL-basiertes Bild einzubetten, anstatt die Standard-Dateiauswahl zu verwenden. Beschreibe dies dem Store-Editor von Fudge, wenn du es brauchst; die Änderung erhältst du als Entwurf, den du vor der Veröffentlichung als Vorschau ansehen kannst.
FAQ
Was ist die maximale Dateigröße für GIFs in Shopify?
Das generelle Limit für Bilder bei Shopify liegt bei 20 MB pro Datei, und das gilt auch für GIFs. In der Praxis liegt das Limit deutlich niedriger – alles über 5 MB wird die Ladezeit deiner Seite spürbar verschlechtern. Versuche, unter 2 MB für GIFs in der Produktgalerie und unter 500 KB für kleine Inline-GIFs zu bleiben.
Warum animiert sich mein Shopify-GIF nicht?
Das liegt fast immer an einem Dateiformat- oder Theme-Problem: (1) Die Datei wurde als Einzelbild-GIF hochgeladen (sie enthält gar keine echte Animation), (2) der Bildverarbeiter von Shopify hat sie geglättet – lade sie über den Bereich „Dateien“ statt über den Rich-Text-Editor hoch und referenziere die URL, oder (3) das Lazy-Loading deines Themes blockiert das GIF.
Kann ich ein GIF zu einem Shopify-Produktvariantenbild hinzufügen?
Ja. Lade das GIF im Bereich „Medien“ des Produkt-Editors hoch, klicke dann im Bereich „Varianten“ auf eine Variante und weise ihr das GIF als Medium zu. Das GIF wird angezeigt, wenn Kunden diese Variante auswählen.
Schaden GIFs meiner Shopify-SEO?
Indirekt – große, unoptimierte GIFs verschlechtern die Seitengeschwindigkeit und die Core Web Vitals, was sich auf das Ranking auswirkt. Komprimierte, gut bemessene GIFs haben kaum Auswirkungen auf die SEO. Ein 10-MB-GIF in deinem Hero-Bereich zerstört jeden Lighthouse-Score; ein 200-KB-Inline-GIF ist völlig in Ordnung.
Ist ein GIF oder ein Video besser für eine Produktdemo auf Shopify?
Video. Eine 5-sekündige Produktdemo als MP4 ist in der Regel 80-90 % kleiner als der gleiche Inhalt als GIF, sie wird schärfer abgespielt, und Shopify unterstützt sie nativ in Produktgalerien. Reserviere GIFs für kurze, einfache Animationen oder Inhaltsbereiche, in denen du kein Video hinzufügen kannst. Um ein MP4 mit Endlosschleife außerhalb der Produktgalerie zu platzieren (z. B. in einem benutzerdefinierten Feature-Bereich), beschreibe Fudge einfach, was du möchtest, und er erstellt den Bereich mit den Attributen Autoplay + stummgeschaltet + Schleife.
