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首次亮相. 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 übersichtlichesChangelog(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 übernpm(engl.) installieren, indem du folgenden Befehl ausführst:
npm安装jquery-zoomAlternativ kannst du das jQuery Zoom-Pluginherunterladen.
Weitere Tools findest du in unserer Liste der beliebtenSublime 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 zumverantwortungsvollen Umgang mit jQuery(engl.) durchlesen. So kannst du Konflikte mit Themes vermeiden, die diese Anwendung bereits enthalten.
Du kannst in deinem Themenachsehen(engl.), ob jQuery bereits geladen wird, indem du entweder nach dem Skript suchst oder in deinen Inspektor auf den TabConsolegehst undjQuery.fn.jqueryausführst. Dies wird die Version von jQuery zurückgeben, die auf der Website ausgeführt wird.
Alternativ kannst du auch die Dateitheme.liquidprüfen, um festzustellen, ob es gerade geladen wird oder bereits in einervendor.js-Datei im Verzeichnisscripts/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:
{% endif %}Alternativ kannst du den verkleinerten Code auch am Ende einervendor.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) Bearbeiteproduct.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 deinerproduct.liquid-Vorlage hinzu. Darin fügen wir auch ein leeres div mit einer Klasseimage-detailsein. Wenn du Abschnitte verwendest, kannst du stattdessen das Attributdata-zoomdem Feature-Bild des Produktabschnitts beifügen. Beachte hierbei, dass dasfeatured_imagefür dein Produkt je nach verwendetem Theme auch anders heißen kann.
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 esdata-zoomgenannt. 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 desimage-zoomansprechen. Dann setzen wir denpaneContainerauf die div.image-detailsdiv, 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 derGitHub-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
EasyZoomist 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
DasZooMovePlugin, 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
MitMagic Zoom Pluskann 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
DerCool Image Magnifierist 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 vonTiffany Tseerschien zuerst im englischen Shopify Blog und wurde übersetzt.
Bring dein Geschäft mit dem Shopify-Partnerprogramm voran
Ganz gleich ob du服务im德国市场,ob欧宝娱乐app下载地址kundenspezifische Anpassungen, Webdesign oder Entwicklung anbietest, das Shopify-Partnerprogramm hilft dir dabei, erfolgreicher zu sein. Melde dich kostenlos an und erhalte Zugriff auf Möglichkeiten zur Umsatzbeteiligung, Tools zum Ausbau deines Unternehmens und eine begeisterte Commerce-Community.
Anmelden