Einloggen
Kostenlosen Test starten

Bilder werden hochgeladen

Du kannst verschiedene Arten von Bildern verwenden, z. B. dein Unternehmenslogo, Produktbilder, Slideshows, Banner und Blog-Beitrag-Bilder. Du kannst auch deine Bilder anpassen, indem du sie zuschneidest und die Größe änderst. Du kannst deine Medieneinstellungen im Theme anpassen, um den Rand oder den Schatten bei allen Medien zu ändern, die in deinem Shop angezeigt werden.

Um Bilder in deinem Onlineshop genau so anzuzeigen, wie du sie anzeigen möchtest, musst du das richtige Bildseitenverhältnis verwenden. Bilder werden mit dem Shopify-CDN automatisch für deine Storefront optimiert.

Auf dieser Seite

Ein Bild im Theme-Editor hochladen

Du kannst Bilder im Theme-Editor zu deinem Theme hinzufügen. Im Abschnitt Inhalt > Dateien deines Shopify-Adminbereichs kannst du auch Bilder hochladen. Mehr Informationen dazu findest du unter Dateien hochladen und verwalten.

Schritte:

Desktop
  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
  2. Klicke auf Anpassen bei dem Theme, für das du ein Bild hochladen möchtest.
  3. Optional: Wenn du ein Bild zu einer anderen Seite in deinem Shop als der Startseite hinzufügen möchtest, klicke auf das Dropdown-Menü der Startseite und wähle dann die Vorlage aus, die du bearbeiten möchtest.
  4. Klicke in der Theme-Editor-Seitenleiste auf den Abschnitt oder Block, dem du ein Bild hinzufügen möchtest.
  5. Führe im Feld Bild einen der folgenden Schritte aus:
    • Um ein Bild von deinem Computer hochzuladen, führe die folgenden Schritte aus:
      1. Klicke auf Bild auswählen > Bilder hinzufügen.
      2. Suche und öffne das Bild auf deinem Computer.
      3. Klicke auf Fertig.

- Um ein kostenloses Stock-Foto von Burst zu verwenden, führen die folgenden Schritte aus: 1. Klicke auf Kostenlose Bilder entdecken. 2. Suche ein Bild, das du verwenden möchtest. 3. Klicke auf Auswählen.

  1. Klicke auf Speichern.
iPhone

  1. Tippe in der Shopify-App auf die Schaltfläche ....

  2. Klicke im Bereich Vertriebskanäle auf Onlineshop.

  3. Tippe auf Alle Themes verwalten.

  4. Tippe auf Anpassen bei dem Theme, für das du ein Bild hochladen möchtest.

  5. Optional: Wenn du ein Bild zu einer anderen Seite in deinem Shop als der Startseite hinzufügen möchtest, tippe auf das Dropdown-Menü der Startseite und wähle dann die Vorlage aus, die du bearbeiten möchtest.

  6. Tippe auf Abschnitte und dann auf den Abschnitt oder den Block, dem du ein Bild hinzufügen möchtest.

  7. Führe im Feld Bild einen der folgenden Schritte aus:

    • Um ein Bild von deinem Gerät hochzuladen, führe die folgenden Schritte aus:
      1. Tippe auf Bild auswählen > Bilder hinzufügen.
      2. Suche und öffne das Bild auf deinem Gerät.
      3. Tippe auf Fertig.

- Um ein kostenloses Stock-Foto von Burst zu verwenden, führen die folgenden Schritte aus: 1. Tippe auf Kostenlose Bilder entdecken. 2. Suche ein Bild, das du verwenden möchtest. 3. Tippe auf Fertig.

  1. Tippe auf Speichern.
Android

  1. Tippe in der Shopify-App auf die Schaltfläche ☰.

  2. Klicke im Bereich Vertriebskanäle auf Onlineshop.

  3. Tippe auf Alle Themes verwalten.

  4. Tippe auf Anpassen bei dem Theme, für das du ein Bild hochladen möchtest.

  5. Optional: Wenn du ein Bild zu einer anderen Seite in deinem Shop als der Startseite hinzufügen möchtest, tippe auf das Dropdown-Menü der Startseite und wähle dann die Vorlage aus, die du bearbeiten möchtest.

  6. Tippe auf Abschnitte und dann auf den Abschnitt oder den Block, dem du ein Bild hinzufügen möchtest.

  7. Führe im Feld Bild einen der folgenden Schritte aus:

    • Um ein Bild von deinem Gerät hochzuladen, führe die folgenden Schritte aus:
      1. Tippe auf Bild auswählen > Bilder hinzufügen.
      2. Suche und öffne das Bild auf deinem Gerät.
      3. Tippe auf Fertig.

- Um ein kostenloses Stock-Foto von Burst zu verwenden, führen die folgenden Schritte aus: 1. Tippe auf Kostenlose Bilder entdecken. 2. Suche ein Bild, das du verwenden möchtest. 3. Tippe auf Fertig.

  1. Tippe auf ✓.

Bilder mithilfe von Metafeldern hinzufügen

Wenn du Metafelder für deine Bilder eingerichtet hast, kannst du mithilfe der dynamischen Quellauswahl ein Bild zu deinem Onlineshop hinzufügen. Weitere Informationen zu Metafeldern und unterstützten Bildformaten findest du unter Werte zu Metafeldern hinzufügen.

Einen Fokuspunkt für ein Bild einstellen

Du kannst Fokuspunkte verwenden, um den wichtigsten Teil eines Bildes in deinem Onlineshop zu definieren. Wenn du einen Fokuspunkt auf einem Bild festlegst, machst du ihn zum fokussierten Bereich. Fokuspunkte werden immer im Rahmen angezeigt, auch wenn dein Theme das Bild zuschneidet, um es an das Layout anzupassen. Fokuspunkte geben dir mehr Kontrolle über die Darstellung deines Bildes auf unterschiedlichen Bildschirmgrößen und in Fällen, in denen Themes unterschiedliche Seitenverhältnisse verwenden.

Du kannst nur einen Fokuspunkt pro Bild haben, aber du kannst ihn jederzeit ändern oder entfernen.

Fokuspunkt-Kompatibilität mit kostenlosen Shopify-Themes

Du kannst einen Fokuspunkt für die folgenden Versionen der kostenlosen Themes von Shopify einrichten:

  • Colorblock Version 3.0.0 und höher
  • Craft Version 5.0.0 und höher
  • Crave Version 5.0.0 und höher
  • Dawn Version 7.0.0 und höher
  • Origin Version 1.0.0 und höher
  • Publisher Version 1.0.0 und höher
  • Refresh Version 2.0.0 und höher
  • Ride Version 3.0.0 und höher
  • Rise Version 1.0.0 und höher
  • Sense Version 5.0.0 und höher
  • Spotlight Version 0.0.1 und höher
  • Studio Version 4.0.0 und höher
  • Taste Version 4.0.0 und höher
  • Trade Version 1.0.0 und höher

Wenn du ein Theme eines Drittanbieters verwendest, findest du in der Theme-Dokumentation deines Theme heraus, ob dein Theme die Verwendung von Fokuspunkten unterstützt.

Einen Fokuspunkt zu einem Bild hinzufügen

Wenn du einem Bild einen Fokuspunkt hinzufügst und das Bild dann an mehreren Stellen in deinem Onlineshop verwendest, gilt derselbe Fokuspunkt überall, wo du das Bild verwendest.

Abhängig von der Art und Weise, wie dein Theme Bilder zuschneidet und ihre Größe ändert, ist der Fokuspunkt möglicherweise nicht immer optisch zentriert.

Schritte:

  1. Klicke von einem der folgenden Standorte in deinem Shopify-Adminbereich auf ein Bild:

    • Im Abschnitt Inhalt > Dateien.
    • Im Theme-Editor.
    • Im Abschnitt Medien deiner Produktangebote im Abschnitt Produkte.
    • Im Shopify Email-Editor.
    • Im Abschnitt Metafelder einer beliebigen Ressource, die ein Metafeld Dateireferenz zum Hinzufügen eines Bildes hat.

  2. Um den Teil des Bildes auszuwählen, in dem du einen Fokuspunkt festlegen möchtest, klicke entweder auf das Bild oder ziehe den blauen Punkt.

  3. Klicke auf Speichern.

Einen Fokuspunkt aus einem Bild entfernen

Schritte:

  1. Klicke von einem der folgenden Standorte in deinem Shopify-Adminbereich auf ein Bild:

    • Im Abschnitt Inhalt > Dateien.
    • Im Theme-Editor.
    • Im Abschnitt Medien deiner Produktangebote im Abschnitt Produkte.
    • Im Shopify Email-Editor.
    • Im Abschnitt Metafelder einer beliebigen Ressource, die ein Metafeld Dateireferenz zum Hinzufügen eines Bildes hat.

  2. Klicke auf Entfernen.

  3. Klicke auf Als neu speichern.

Bildformate

Die folgenden Bildformate werden unterstützt:

  • JPEG
  • Progressives JPEG
  • PNG
  • GIF
  • HEIC
  • WebP
  • AVIF

JPEG-Bilder verwenden

JPEG-Bilder sind ideal für Fotografie und andere Standbilder mit komplexen Farben. Das JPEG-Format verfügt über eine Palette mit Millionen von Farben. Zudem zeichnet sich JPEG durch eine verlustbehaftete Komprimierung aus, die dazu beitragen kann, Seitenladezeiten ohne eine merkliche Abnahme der Bildqualität schnell zu halten. Verwende das JPEG-Format für die folgenden Bildtypen:

  • Produkte
  • Banner oder Slideshows
  • Seiten und Blog-Beiträge

PNG-Bilder verwenden

PNG-Bilder sind ideal für Grafiken und Symbole mit kontrastarmen Farben und ohne Farbverlauf. Das PNG-Format unterstützt zudem Transparenz bei Bildern. Verwende das PNG-Format für die folgenden Arten von Bildern:

  • Logos
  • Symbole
  • Rahmen und Ränder

Automatische Bildkomprimierung und Formatauswahl

Damit Seitenladezeiten schnell bleiben, komprimiert Shopify automatisch Bilder, wenn sie in deinem Onlineshop angezeigt werden. Bei der Komprimierung eines Bildes wird die Dateigröße reduziert, um ein schnelleres Laden der Seite zu ermöglichen.

Darüber hinaus ermittelt Shopify automatisch das optimale Dateiformat, das du für die Bereitstellung deiner Bilder verwenden solltest. Wenn beispielsweise festgestellt wird, dass der Webbrowser eines Käufers moderne Bildformate wie WebP und AVIF (AV1 Image File Format) unterstützt, werden deine Bilder in diesem Format bereitgestellt.

Um die Leistung durch eine Reduzierung der Dateigröße zu verbessern, werden GIFs automatisch in das animierte WebP-Format umgewandelt.

Beschränkungen für das Hochladen von Bildern

Bild-Uploads bei Shopify sind in Bezug auf Megapixel und die Dateigröße, die in Megabyte gemessen wird, begrenzt. Megapixel geben an, aus wie vielen Millionen Pixeln ein Bild besteht. Megabyte werden verwendet, um anzuzeigen, wie viele Millionen Byte Speicherplatz ein Bild belegt.

Bilder, die in Shopify hochgeladen werden, können eine der folgenden Einschränkungen nicht überschreiten:

  • 20 Megapixel
  • 20 Megabyte

Um den Megapixel-Wert deines Bildes zu finden, kannst du die folgende Gleichung verwenden:

(pixel width x pixel height)/1,000,000

Ein Bild mit einer Auflösung von 4900x6930 hat beispielsweise 33,9 Megapixel basierend auf der Gleichung: (4900x6930)/1,000,000 = 33.9 MP.

Bildfarbprofile

Wenn du ein Bild in deinem Onlineshop ansiehst, kann es sein, dass die Farben des Bildes anders aussehen als die des Originalbildes, das du in Shopify hochgeladen hast. Das kann vorkommen, wenn ein Bild ein Farbprofil aufweist. Dabei handelt es sich um einen Datensatz, der in einer Datei mit der Erweiterung .ICC oder .ICM gespeichert ist.

Farbprofile werden häufig in Bilder eingebettet, um die Darstellung der Farben auf unterschiedlichen Geräten zu standardisieren. Wenn Bilder im Onlineshop angezeigt werden, wird ihr Farbprofil entfernt.

Farbprofile werden aus folgenden Gründen entfernt:

  • Nicht alle Geräte können die Farbprofile .ICC oder .ICM lesen. Wenn sie also bestehen bleiben, kann dies zu einer uneinheitlichen Farbgebung auf verschiedenen Geräten führen.
  • Wenn ein hochgeladenes Bild kein Farbprofil enthält, wird sRGB (das am häufigsten verwendete Farbprofil für die Anzeige von Bildern im Internet) vom Webbrowser übernommen. Dadurch wird sichergestellt, dass Ihre Bilder auf allen gängigen Webbrowsern und Geräten gleich angezeigt werden.
  • Farbprofile können viel Speicherplatz belegen, was zu längeren Seitenladezeiten führen kann.

Das Farbprofil aus einem Bild entfernen

Du kannst das Farbprofil aus deinem Bild entfernen, indem du es ohne das Farbprofil speicherst, bevor du es in Shopify hochlädst. Die Vorgehensweise hängt von deinem Bildbearbeitungsprogramm ab.

Lies die Adobe-Dokumentation zum Zuweisen oder Entfernen eines Farbprofils (Illustrator, Photoshop) und Zuweisen oder Entfernen eines Farbprofils (InDesign).

Best Practices für Slideshows, Bildbanner und Bilder in voller Breite

Viele Shopify-Themes enthalten große Bilder oder Slideshows, die sich an die Höhe deines Browsers oder deine Bildschirmgröße anpassen.

Wenn du eines dieser Themes verwendest oder eine große Slideshow oder ein Hintergrundbild hast, musst du wissen, welche Arten von Bildern am besten angezeigt werden.

Da große Bilder nicht auf alle Geräte passen, zeigt Shopify abhängig vom verwendeten Gerät manchmal nur einen Teil des Bildes an. Wenn deine Slideshow viele große Bilder enthält, wirst du möglicherweise feststellen, dass Teile der Bilder nicht sichtbar sind.

Hinweise zur Verwendung von Bildern für Slideshows oder Bildbanner

Um sicherzustellen, dass deine Bilder gut zu deinem Theme passen, bedenke bitte die folgenden Punkte:

  • Bilder, die du für Slideshows oder Hintergründe verwendest, sollten keinen Text enthalten. Wenn der Text Teil des Bildes selbst ist, wird er möglicherweise basierend auf deinem Theme verschoben, zugeschnitten oder angepasst. Verwende den Theme-Editor, um deinen Slideshows und Hintergründen Text und Links hinzuzufügen.

  • Wähle für Slideshows oder den Hintergrund einfache Bilder aus, damit überlagernder Text einfach zu lesen ist.

Breite Bilder auf hohen Bildschirmen

Breite Bilder können links und rechts abgeschnitten werden, wenn das für die Anzeige verwendete Gerät einen hohen Bildschirm hat, wie z. B. ein Handy oder Tablet im Hochformat. Wenn im folgenden Beispiel die Personen der wichtigste Teil des Bildes sind, kannst du einen Fokuspunkt auf der rechten Seite des Bildes platzieren.

Breite Bilder auf hohen Bildschirmen

Hohe Bilder auf breiten Bildschirmen

Hohe Bilder werden möglicherweise oben und unten abgeschnitten, wenn das für die Anzeige verwendete Gerät einen breiten Bildschirm hat, wie z.  B. ein Laptop oder ein PC. Wenn im folgenden Beispiel die Personen der wichtigste Teil des Bildes sind, kannst du einen Fokuspunkt auf der rechten Seite des Bildes platzieren.

Hohe Bilder auf breiten Bildschirmen

Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.