Shopify externe Bilder einbinden: Schritt-für-Schritt Anleitung mit Metafields

Willkommen zu unserem Leitfaden "Externe Bilder in Shopify einbinden"! 📸 Wenn du einen Shopify-Shop betreibst, weißt du, wie wichtig ansprechende Bilder sind. Sie ziehen nicht nur die Aufmerksamkeit deiner Kunden auf sich, sondern können auch den Unterschied zwischen einem Klick und einem Kauf ausmachen. In diesem Artikel zeigen wir dir Schritt für Schritt, wie du externe Bilder in deinen Shopify-Shop integrierst. Außerdem gehen wir auf wichtige Themen ein wie den Umgang mit Bildern mit eingeschränkten Lizenzen und warum Bilder unter bestimmten Umständen nicht lokal gespeichert werden dürfen. So bist du bestens gerüstet, um deinen Shop visuell aufzuwerten und gleichzeitig rechtlich auf der sicheren Seite zu sein. 🚀

1. Warum externe Bilder in Shopify verwenden ohne diese lokal zu speichern? 🤔

Rechtliche Aspekte: Bilder mit eingeschränkten Lizenzen 📜

Wenn du Bilder verwendest, musst du immer die Lizenzbedingungen beachten. Viele Bilder im Internet haben eingeschränkte Lizenzen, was bedeutet, dass du sie nicht einfach so nutzen darfst. Durch die Verwendung externer Bildquellen kannst du sicherstellen, dass du die richtigen Lizenzen hast und keine Urheberrechtsverletzungen begehst. So schützt du dich vor teuren Abmahnungen und rechtlichen Problemen.

Sicherheitsgründe: Bilder dürfen nicht lokal gespeichert werden 🚫💾

In manchen Fällen ist es einfach nicht erlaubt, Bilder lokal auf deinem Server zu speichern. Das kann aus Datenschutzgründen oder aufgrund von speziellen Sicherheitsanforderungen sein. Externe Bildspeicherlösungen bieten eine sichere Alternative, da die Bilder auf geschützten Servern gespeichert werden und du dich nicht um die lokale Speicherung kümmern musst.

Unterschiede und relevante Anwendungsfälle 🔄

Unterschiede:

• Speicherung: Lokale Bilder werden auf deinem eigenen Server gespeichert, während externe Bilder auf einem anderen Server liegen.
• Verwaltung: Lokale Bilder erfordern mehr Verwaltungsaufwand, externe Bilder sind oft leichter zu handhaben, da sie zentral gespeichert und von überall aus zugänglich sind.
• Sicherheit: Externe Bilder bieten oft bessere Sicherheitsstandards und sind rechtlich abgesichert.

Relevante Anwendungsfälle:

• Rechtliche Anforderungen: Wenn du Bilder nicht lokal speichern darfst, sind externe Quellen die beste Lösung.
• Große Bildbibliotheken: Wenn du viele Bilder verwalten musst, erleichtern externe Quellen die Arbeit.
• Schnelle Aktualisierungen: Für Shops, die häufig neue Bilder hinzufügen oder bestehende ändern, bieten externe Quellen die nötige Flexibilität, da du die Bilder zentral aktualisieren kannst, ohne sie jedes Mal manuell hochladen zu müssen.

Externe Bilder in Shopify einzubinden, ist also nicht nur eine Frage der Bequemlichkeit, sondern oft auch eine rechtliche und sicherheitstechnische Notwendigkeit. Mit den Shopify Metafields kannst du diese Vorteile optimal nutzen, ohne auf zusätzliche Apps angewiesen zu sein.

2. Externe Bilder aus einer URL mit Metafields in Shopify einbinden 🛠️

Jetzt, wo wir wissen, warum externe Bilder so wichtig sind, schauen wir uns an, wie du sie mit Metafields in Shopify einbindest. Keine Sorge, es ist einfacher, als es klingt!

Was sind Metafields? 🤔

Metafields sind im Grunde Extra-Felder in Shopify, die dir erlauben, zusätzliche Informationen zu deinen Produkten, Kollektionen oder anderen Bereichen hinzuzufügen. Sie sind wie kleine Notizzettel, die du an deinen Produkten befestigen kannst, um extra Infos zu speichern – in diesem Fall die URLs deiner externen Bilder.

Schritt-für-Schritt Anleitung 🚀

1. Erstellen und Konfigurieren von Metafields für externe Bilder
   • Gehe zu deinem Shopify-Adminbereich:Melde dich bei deinem Shopify-Konto an und navigiere zu deinem Admin-Dashboard.
   • Klicke unten auf Einstellungen:Hier wählst du “Benutzerdefiniert Daten” aus.

Benutzerdefinierte Daten

1. • Klicke auf “Produkte” und anschließend auf “Definition hinzufügen”, wenn du ein Metafield für Produkte anlegen möchtest.
2. 
   Definition hinzufügen
3. 
   
   • Konfiguriere dein Metafield:
     • Namespace und Schlüssel: Gib einen Namen ein, z.B. externes_bild.
     • Art des Inhalts: Wähle “URL” als Typ, da du die Bild-URL einfügen wirst.

Produkt-Metafeld konfigurieren

1. Einbinden von Bildern über URLs in Metafields
   • Finde die Bild-URL:Kopiere die direkte URL zum Bild.
   • Füge die URL in das Metafield ein:Gehe zu deinem Produkt und scrolle nach unten zu “Produkt-Metafelder”. Füge die kopierte URL in das entsprechende Metafield ein und speichere deine Änderungen.

Url in Produkt Metafeld einfügen

1. Anzeigen der Bilder im Shop 🖼️Jetzt, wo die Bild-URL im Metafield gespeichert ist, müssen wir das Bild im Shop anzeigen lassen. Dafür gibt es zwei Möglichkeiten: über den Theme-Editor mit einem benutzerdefinierten Liquid-Block oder durch direktes Anpassen des Theme-Codes. Hier zeige ich dir beide Methoden:

   Option 1: Bild über den Theme-Editor mit benutzerdefiniertem Liquid einfügen

   1. Gehe zum Theme-Editor:Navigiere zu “Online-Shop” > “Themes” > “Anpassen”.
   2. Füge einen “benutzerdefiniertes Liquid”-Abschnitt hinzu:Wähle den Bereich aus, wo das Bild angezeigt werden soll (z.B. Produktseite). Klicke auf “Abschnitt hinzufügen” und wähle “Benutzerdefiniertes HTML” oder einen ähnlichen Block.

Benutzerdefiniertes Liquid hinzufügen

1. 1. Füge den folgenden HTML-Code ein:

{% endif %}


Code einfügen

Erklärung:

• • product.metafields.custom.externes_bild: Dies zieht die URL aus dem Metafield und setzt sie als Quelle (src) des Bildes.
  • alt="{{ product.title }}": Das alt-Attribut verbessert die SEO und Zugänglichkeit, indem es den Produktnamen verwendet.
  • style="width: 100%; height: auto;": Setzt die Breite des Bildes auf 100% des Containers und die Höhe automatisch, um das Seitenverhältnis beizubehalten. So bleibt das Bild responsiv und passt sich verschiedenen Bildschirmgrößen an.

Speichere deine Änderungen:Überprüfe, ob das Bild korrekt angezeigt wird, indem du eine Produktseite aufrufst.

Option 2: Bild durch direktes Anpassen des Theme-Codes einbinden 🔧

1. 1. 1. Gehe zum Theme-Code-Editor:Navigiere zu “Online-Shop” > “Themes” > “Aktionen” > “Code bearbeiten”.
      2. Finde die richtige Datei:Suche die Datei, die für die Anzeige der Produktbilder verantwortlich ist. Dies könnte product-template.liquid, product.liquid oder eine andere Datei sein, abhängig von deinem Theme.
      3. Füge den HTML-Code ein:
         {% if product.metafields.custom.externes_bild %}
         {% endif %}
         1. Erklärung:
            • product.metafields.custom.externes_bild: Dies zieht die URL aus dem Metafield und setzt sie als Quelle (src) des Bildes.
            • alt="{{ product.title }}": Das alt-Attribut verbessert die SEO und Zugänglichkeit, indem es den Produktnamen verwendet.
            • style="width: 100%; height: auto;": Setzt die Breite des Bildes auf 100% des Containers und die Höhe automatisch, um das Seitenverhältnis beizubehalten. So bleibt das Bild responsiv und passt sich verschiedenen Bildschirmgrößen an.
         2. Speichere die Änderungen:Speichere die Datei und überprüfe, ob das Bild richtig angezeigt wird.
         Hinweis: Da jedes Theme anders aufgebaut ist, kann dieser Schritt technisches Know-how erfordern. Wenn du unsicher bist, hole dir Unterstützung von einem Entwickler, um Fehler im Code zu vermeiden.