Wichtige Erkenntnisse
- Shopify unterstützt den GIF-Upload in Produktmedien, Seiteninhalten und Bild-Blöcken im Theme Editor.
- GIFs werden überall dort automatisch abgespielt (Autoplay), wo sie eingebettet sind.
- Komprimieren Sie GIFs vor dem Hochladen – unkomprimierte GIFs können sehr groß sein. Nutzen Sie ezgif.com.
- Für Hero-Sections und große Anzeigen ist ein MP4-Video meist die bessere Wahl für die Performance.
GIFs sind ein schneller Weg, um ein Produkt in Bewegung zu zeigen, ein Feature zu demonstrieren oder Ihrem Store einen dezenten animierten Akzent zu verleihen. Shopify unterstützt sie nativ – hier erfahren Sie, wo und wie Sie sie einsetzen können.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.
So fügen Sie 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 Full-Size Lightbox abgespielt.
Schritt 4. Ziehe es per Drag-and-Drop, um die Reihenfolge bei Bedarf zu ändern. Speichern.
Das GIF wird in der Galerie-Vorschau und in der Vollansicht automatisch abgespielt (Autoplay). Es gibt keine Wiedergabetaste oder Pausenfunktion – es läuft in einer Endlosschleife.
Verwandt: Shopify Theme beschleunigen.
So fügen Sie ein GIF zu einer Shopify-Seite oder einem Blog-Post hinzu
Schritt 1. Gehen Sie zu Online-Shop > Seiten (oder Blog-Beiträge) und öffnen Sie die Seite, die Sie bearbeiten möchten.
Schritt 2. Klicken Sie im Rich-Text-Editor auf die Schaltfläche Bild einfügen (das Fotosymbol in der Toolbar).
Schritt 3. Laden Sie Ihr GIF hoch oder wählen Sie es aus der Dateibibliothek aus.
Schritt 4. Das GIF wird direkt in den Inhalt eingefügt und spielt automatisch ab, wenn die Seite geladen wird.
So fügen Sie ein GIF über den Theme Editor hinzu
Im Theme Editor können Sie überall dort, wo Sie einen Bild-Block oder -Abschnitt sehen, ein GIF hochladen, genau wie ein statisches Bild.
Schritt 1. Gehen Sie zu Online-Shop > Themes > Anpassen.
Schritt 2. Klicken Sie auf den Abschnitt oder Block, in dem Sie das GIF haben möchten.
Schritt 3. Laden Sie im Bildwähler Ihr GIF hoch oder wählen Sie es aus Ihren Dateien aus.
Schritt 4. Speichern.
Das GIF wird an dieser Stelle im Storefront automatisch abgespielt.
Verwandt: Lazy Load Videos in Shopify.
GIF-Dateigröße – warum sie wichtig ist
GIFs sind bekanntlich große Dateien. Eine 5-sekündige Animation mit einer Breite von 800px kann unkomprimiert leicht über 10 MB groß sein. Große GIFs verursachen:
- Langsame Seitenladezeiten
- Schlechte Core Web Vitals-Werte
- Hohen mobilen Datenverbrauch für Kunden
Komprimieren Sie GIFs immer vor dem Hochladen. Nutzen Sie ezgif.com – es ist kostenlos, erfordert keinen Account und ermöglicht es Ihnen, Farben zu reduzieren, die Größe anzupassen und Frames zu entfernen, um die Dateigröße drastisch zu senken. Streben Sie weniger als 2 MB für GIFs in einer Produktgalerie oder auf einer Seite an, und weniger als 500 KB für kleine Inline-GIFs.
GIF vs. MP4 für animierte Inhalte
Für große animierte Bereiche – Hero-Backgrounds, Banner-Animationen über die volle Breite, Produktdemos, die länger als 3 Sekunden dauern – ist MP4-Video fast immer die bessere Wahl.
Ein 5-sekündiger Videoclip im MP4-Format ist in der Regel 80-90 % kleiner als ein entsprechendes 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 benötigst
- Du eine Animation zu einem Rich-Text-Bereich hinzufügst (keine Video-Option)
- Die Animation einfach genug ist, dass die GIF-Komprimierung gut funktioniert (2 Farben, begrenzte Bewegung)
Verwende MP4, wenn:
Verwandt: Produktbeschreibung in Shopify aktualisieren.
Verwandt: Videos in Shopify per Lazy Load laden.
Verwandt: Video zu einer Shopify Produktgalerie hinzufügen.
Verwandt: Animierte Inhalte in Shopify hinzufügen.
- Die Animation länger als 2-3 Sekunden ist
- Du sie in einer Hero-, Banner- oder Full-Width-Section benötigst
- Dateigröße oder Ladegeschwindigkeit ein Faktor sind
GIFs extern hosten
Shopifys Dateispeicher ist großzügig, aber nicht unbegrenzt. Wenn Sie viele GIFs verwenden, können Sie diese extern hosten (z. B. auf Giphy, Cloudinary oder Ihrem eigenen CDN) und sie über ihre URL einbetten.
In den Bild-Blöcken des Theme Editors erfordert dies in der Regel Code, um ein URL-basiertes Bild einzubetten, anstatt den Standard-Dateiwähler zu verwenden. Beschreiben Sie dies Fudge, falls Sie Hilfe benötigen.
