Ein Beitrag von Tiffany Tse
Wenn es um den Online-Verkauf geht, ist eines der am häufigsten nachgefragten Produktfeatures der Bildzoom. Das Zoomen findet häufig bei Produktbildern Gebrauch, um sie für eine bessere Darstellung für potenzielle Kunden zu vergrößern.
Es gibt eine Menge verschiedener Zoom-Bibliotheken, die online kostenlos verfügbar sind. In diesem Tutorial werde ich zwei Methoden vorstellen, mit denen du der Website deines Kunden eine Zoom-Funktion hinzuzufügen kannst:
Entscheide dich für die Verwendung nur einer dieser Methoden. Es handelt sich nämlich um zwei völlig unterschiedliche Tutorials, die nichts miteinander zu tun haben. Wähle also das für dich am besten geeignete aus. Am Ende dieses Artikels werde ich auf einige weitere Optionen eingehen, die du mit Shopify-Themes hast.
Lass uns direkt einsteigen.
Kennst du schon unsere Ressourcen Sammlung für Partner?
1. Zoomen via jQuery
Ich habe mich für einen Oldie entschieden, der aber nach wie vor überzeugt: jQuery Zoom von Jack Moore (engl). Wir verwenden dieses Plugin derzeit zum Zoomen von Produktbildern im kostenlosen Shopify-Theme Debut. Dieses Zoom-Plugin hat wenig bis gar kein Styling (sodass du es selbst anpassen kannst) und ist spielend einfach zu implementieren. Was mir an diesem Plugin am meisten gefällt, ist, dass es ein übersichtliches Changelog (engl.) hat und von vielen Leuten online benutzt wird.
Demo-Shop anschauen (engl.) jQuery Zoom herunterladen
Dieses Plugin ist mit jQuery 1.7+ in Chrome, Firefox, Safari, Opera und Internet Explorer 7+ kompatibel.
Wenn du derzeit einen Node für das Theming eingerichtet hast, kannst du dieses Plugin über npm (engl.) installieren, indem du folgenden Befehl ausführst:
npm install jquery-zoom
Alternativ kannst du das jQuery Zoom-Plugin herunterladen.
Weitere Tools findest du in unserer Liste der beliebten Sublime Text-Plugins (engl.).
1) Füge jQuery hinzu, falls es noch nicht vorhanden ist
Die meisten Themes verfügen bereits über eine Version von jQuery. Damit dieses Plugin funktioniert, benötigst du mindestens die Version 1.7+. Das bedeutet, dass du bei den meisten Shopify-Themes jQuery wahrscheinlich nicht hinzufügen musst – es sei denn, du baust das Theme von Grund auf neu auf. Wenn du eine App erstellst und jQuery verwendest, solltest du unbedingt die Dokumentation zum verantwortungsvollen Umgang mit jQuery (engl.) durchlesen. So kannst du Konflikte mit Themes vermeiden, die diese Anwendung bereits enthalten.
Du kannst in deinem Theme nachsehen (engl.), ob jQuery bereits geladen wird, indem du entweder nach dem Skript suchst oder in deinen Inspektor auf den Tab Console gehst und jQuery.fn.jquery ausführst. Dies wird die Version von jQuery zurückgeben, die auf der Website ausgeführt wird.
Alternativ kannst du auch die Datei theme.liquid prüfen, um festzustellen, ob es gerade geladen wird oder bereits in einer vendor.js-Datei im Verzeichnis scripts/ geladen wurde. Lade nie mehr als eine Version von jQuery auf einer Website zur gleichen Zeit, da dies die Ladezeit der Seiten erhöht und eine Reihe anderer JavaScript-Probleme auf der Website deines Kunden verursacht.
Wenn du jQuery zu deinem Theme hinzufügen musst, ergänze einfach die folgende Zeile in den Kopf deiner HTML-Datei:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer=”defer”></script>
2) Füge die Datei zoom.min.js Plugin deinem Theme bei
Setze aus dem heruntergeladenen Plugin-Ordner das verkleinerte jQuery Zoom-Plugin (jquery.zoom.min.js) in deinem Assets-Ordner ein. Verknüpfe dann in deiner theme.liquid file-Datei nach dem Laden von jQuery die Plugin-Datei unter Verwendung des folgenden Liquid-Codes mit deinem Theme. Prüfe, ob das Plugin nur auf Produktseiten vorhanden ist und nicht auf allen Seiten (insbesondere, wenn es nur auf Produktseiten verwendet wird):
{% if template contains 'product' %}
<script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}" defer=”defer”>
{% endif %}
Alternativ kannst du den verkleinerten Code auch am Ende in einer vendor.js-Datei einbinden (sofern du bereits ein Theme hast, das eines verwendet), um die zusätzliche Anfrage zu vermeiden.
3) Bearbeite product.liquid, um das gezoomte Bild anzuvisieren
Damit das Zoom-Plugin funktioniert, ist dem HTML innerhalb des Elements beigefügt, dem es zugeordnet ist. Daher muss das Element, dem es zugewiesen wird, HTML akzeptieren. Das <img>-Tag kann keine anderen HTML-Elemente enthalten, daher braucht es einen Container oder ein Wrapper-Element.
Eine der einfachsten Möglichkeiten, dies zu tun, ist das Hinzufügen eines Wrappers um dein Hauptproduktbild mit JavaScript. Füge in deiner product.liquid-Vorlage oder bei der Verwendung von Abschnitten die Klassen image-zoom und data-zoom zum Hauptbild für deinen Produktabschnitt hinzu. Beachte hierbei, dass das featured_image für dein Produkt je nach verwendetem Theme auch anders heißen kann.
Du solltest Liquid auch verwenden, um die URL deines Großbildes (das wird dein gezoomtes Bild sein) als Datenattribut zu generieren. In diesem Fall habe ich es data-zoom genannt. Wir werden das später bei der Initialisierung nutzen, sodass du die URL als URL-Eigenschaft an die .zoom()-Methode übergeben kannst. Dadurch wird eine größere Version des Bildes angegeben (anstatt eine große Version zu laden und sie zu verkleinern).
Lesetipp: Wie du innerhalb einer Woche eine Shopify App erstellst
4) Initialisiere das Zoom-Plugin dynamisch
Da es viele verschiedene Themes mit einer Vielzahl von CSS gibt, die auf Elemente angewendet werden könnten, wird der unten stehende Code durch die hinzugefügte image-zoom-Klasse auf dem Hauptproduktbild ausgelöst. Es wird ein <span>-Wrapper mit jQuery hinzugefügt, an den das Zoom-Plugin dann zusätzliches HTML anhängt, wodurch der Zoom-Effekt erzeugt wird. Dadurch werden Probleme vermieden, die durch CSS-Layouts oder andere Styles verursacht werden, die sich auf einen manuell erstellten Container auswirken könnten.
jQuery Zoom Plugin bei Produkten von Slate in Aktion
Es gibt viele Alternativen dieses Plugin zu implementieren (engl.). Je nachdem, welche anderen JS-Ereignisse du für Produktbilder auslösen lässt, könnte es sinnvoll sein, eine benutzerdefinierte Funktion wie productImageZoom() zu erstellen und auch den .trigger('zoom.destroy'); zu verwenden, bevor .zoom(); ausgelöst wird.
Dies wäre der beste Ansatz, wenn du JavaScript verwendest, um Variantenbilder zu manipulieren und ein anderes Feature-Bild zu laden, je nachdem, auf welche Variante geklickt wird. Ein Beispiel hierfür findest du in der Implementierung dieses Zoom-Plugins im Debut-Theme.
5) Passe deine Einstellungen an und füge bei Bedarf Styles hinzu
Das jQuery Zoom Plugin kommt mit einer Reihe von anderen Eigenschaften, die du an die .zoom()-Methode übergeben kannst. Diese sind in der Dokumentation für das Plugin zu finden und enthalten on, duration, target, touch und vieles mehr.
Du kannst deinen gezoomten Bildern auch ein Styling hinzufügen, das anzeigt, dass das Bild bei mouseover herangezoomed wird. Wenn du einen der anderen on-Werte wie grab, click oder toggle verwendest, könntest du den Standard-Cursor für das Zoomen mit ein wenig CSS ändern.
Wenn du zum Beispiel etwas Ähnliches wie das Styling der Plugin-Demo einfügen möchtest, könntest du die folgenden Styles und die Datei icon.png in deinen Asset-Ordner einfügen:
Du könntest auch ein Styling hinzufügen, das den Cursor so verändert, dass er eine „Grab-Zoom“-Option anzeigt:
Hinweis: Einige dieser CSS-Werte funktionieren nur in Webkit-fähigen Browsern. Du kannst aber auch ein Bild für einen benutzerdefinierten Cursor bereitstellen, wenn sie in nicht Webkit-fähigen Browsern einheitlich sein sollen.
Wenn du Bonuspunkte erhalten möchtest, könntest du die von uns bereits geschaffene Funktionalität durch Theme-Optionen erweitern und deinem Kunden die Möglichkeit geben, das Zoomen nach Belieben ein- und auszuschalten.
Lesetipp: 30 Entwicklerressourcen zur Erweiterung deiner Fähigkeiten.
2. Zoomen über Vanilla JavaScript
Für die Vanilla Javascript-Option können wir die Drift-Bibliothek von imgix (engl.) verwenden, die leichtgewichtig ist und keine Abhängigkeiten hat.
Demo-Shop anschauen Drift herunterladen
Diese Bibliothek unterstützt die neueste Version von Chrome, aktuelle und frühere Versionen von Firefox, Internet Explorer und Safari auf fortlaufender Basis sowie die aktuellste Nebenversion der aktuellen und früheren Hauptversion für den Standardbrowser unter iOS und Android. Ich habe mich für diese Bibliothek entschieden, weil sie gut gepflegt und leicht zu implementieren ist.
Wenn du derzeit einen Node für das Theming eingerichtet hast, kannst du dieses Plugin über npm (engl.) installieren, indem du folgenden Befehl ausführst:
npm install drift-zoom
Alternativ kannst du die Drift-Bibliothek auch manuell herunterladen.
1) Die Drift-Bibliothek zu deinem Theme hinzufügen
Abhängig von deiner Einrichtung kannst du die Drift-dist manuell in dein Theme aufnehmen. Beachte, dass dies auf allen Seiten angezeigt wird, wenn es über deine Datei theme.liquid hinzugefügt wird. Dies kann unter Umständen weniger leistungsfähig sein, da es auf allen Seiten deiner Website enthalten ist. Prüfe, dass sie nur auf Produktseiten und nicht auf allen Seiten hinzugefügt worden ist (insbesondere, wenn sie nur auf Produktseiten verwendet wird):
{% if template contains 'product' %}
<script type="text/javascript" src="{{ 'Drift.min.js' | asset_url }}" defer="defer"></script>
{% endif %}
Alternativ kannst du den verkleinerten Code auch am Ende einer vendor.js-Datei hinzufügen (sofern du bereits ein Theme hast, das eines verwendet), um die zusätzliche Anfrage zu vermeiden.
Wenn du ES6 verwendest, kannst du Folgendes tun, um Drift in dein Projekt einzubeziehen:
2) Bearbeite product.liquid, um das gezoomte Bild anzuvisieren
Damit das Drift-Zoomen funktioniert, fügt es HTML innerhalb eines Elements mit CSS-Positionierung an. Wenn kein Element angegeben wird, das das gezoomte Bild enthält, dann wird es standardmäßig oben überlagert und an dem am nächsten positionierten übergeordneten Element ausgerichtet.
Zuerst fügen wir einen Wrapper um dein Hauptproduktbild deiner product.liquid-Vorlage hinzu. Darin fügen wir auch ein leeres div mit einer Klasse image-details ein. Wenn du Abschnitte verwendest, kannst du stattdessen das Attribut data-zoom dem Feature-Bild des Produktabschnitts beifügen. Beachte hierbei, dass das featured_image für dein Produkt je nach verwendetem Theme auch anders heißen kann.
<div class=”image-container”>
<img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
<div class="image-details"></div>
</div>
Du solltest Liquid auch nutzen, um die URL deines Großbildes (das wird dein gezoomtes Bild sein) als Datenattribut zu generieren. In diesem Fall habe ich es data-zoom genannt. Wir können dies später in der Initialisierung verwenden, um eine größere Version des Bildes festzulegen.
3) Drift initialisieren und Optionen festlegen
Der nächste Schritt ist die grundlegende Einrichtung, was wirklich unkompliziert ist.
Hier initialisieren wir Drift auf dem Bild, indem wir die Klasse des image-zoom ansprechen. Dann setzen wir den paneContainer auf die div .image-details div, um die Ausgabe des gezoomten Inhalts festzulegen, der in diesen Container gerendert wird.
Du kannst auch andere, spezifischere Optionen für Drift einrichten, wie zum Beispiel Offsets, Zoom-Stärke, Touchscreen und vieles mehr. Diese Optionen findest du auf der GitHub-Seite für Drift.
4) Passe deine Einstellungen und Styles an
Der letzte Schritt in diesem Prozess wäre das Einrichten eines zusätzlichen Stylings, das du für das Zoomen des Bildes mit Drift verwenden möchtest. Statt deines Zoombereichs, der die gesamte Seite abdeckt, kannst du ein Styling hinzufügen, das seitlich abgesetzt ist oder andere Inhalte auf der Seite überlagert.
Ich habe einige einfache Styles für zwei Spalten mit CSS-Raster hinzugefügt, die du in der Demo oben sehen kannst:
Alternative Plugins und Shopify Apps
Wenn du keine der beiden Optionen aus dem obigen Tutorial anwenden möchtest, findest du hier einige Alternativen, die du dir ansehen kannst. Ich habe auch einige Shopify-Apps speziell für den Produktzoom hinzugefügt.
Plugin: EasyZoom
EasyZoom ist ein elegantes, hochoptimiertes jQuery-Plugin zum Zoomen und Schwenken von Bildern. Es unterstützt touchfähige Geräte und ist per CSS einfach anpassbar.
Plugin: ZooMove
Das ZooMove Plugin, das mit jQuery entwickelt wurde, ermöglicht es dir, Bilder mit der Maus dynamisch zu zoomen und Details per Mausbewegung anzeigen zu lassen. Kompatibel mit: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+ und Internet Explorer 9+.
Zusätzlich zu diesen kostenlosen Plugins gibt es auch kostenpflichtige Shopify-Apps, die du für deine Kunden installieren kannst.
App: Magic Zoom Plus
Mit Magic Zoom Plus kann der Benutzer die Maus bewegen, um ein Bild zu zoomen und klicken, um ein Bild zu vergrößern. Es ist eine der am besten bewerteten Bildzoom-Apps im Shopify App Store und funktioniert mit mobilen Endgeräten. Es gibt eine kostenlose 30-tägige Testversion, danach kostet die App einmalig 69,00 USD.
App: Cool Image Magnifier
Der Cool Image Magnifier ist eine weitere Bildzoom-App im Shopify App Store, die einen Kasten oder eine Linse um deinen Zoombereich herum verwendet. So entsteht der Eindruck einer Lupe, die ein Produkt inspiziert. Der Preis liegt bei 2,99 USD pro Monat; es gibt eine dreißigtägige kostenlose Testversion.
Lesetipp: Mehr als Drag-and-drop: Wie du den Code von Shopify Themes anpasst.
Auf die Plätze, fertig, zoomen!
Die Verwendung eines Produkt-Zoom-Plugins kann ein mächtiges Werkzeug für Konvertierungen sein. Sie können es potenziellen Käufern ermöglichen, die von deinem Kunden verkauften Produkte hautnah und persönlich zu erleben.
Durch das Upselling eines Kunden und das Hinzufügen einer weiteren Funktionalität beim Erstellen benutzerdefinierter Themes kannst du dein Projekt durch einige zusätzliche abrechenbare Stunden aufwerten. Hoffentlich wird mithilfe dieses Artikels das Einbinden dieser zusätzlichen Funktionen etwas schneller gehen.🚀
Dieser Beitrag von Tiffany Tse erschien zuerst im englischen Shopify Blog und wurde übersetzt.
