Magento-Landingpages mit "Shop the Look"

Verkaufshilfe bieten: Wie Sie mit dem Magento-Modul "Shop the Look" von TUDOCK Produkte bequem im Kontext präsentieren, um Onlinekäufer zu inspirieren.

Die Ansprüche von Kunden an Online-Shops steigen parallel zur technischen Weiterentwicklung. Für die Produktpräsentation im Online-Shop bedeutet das: Die einfache Darstellung in filterbaren Produktlisten oder gepaart mit sachlichen Produktinformationen auf einer Artikeldetailseite ist längst nicht mehr genug.

Produkte fast jeglicher Art lassen sich am schönsten im Kontext betrachten und bieten Kunden so die gewünschte Inspiration für den Verwendungszweck: Ob ein Kleidungsstück in Kombination mit passenden Accessoires oder ein Kissen inmitten eines ansprechenden Wohnzimmers – der Fantasie sind hier keine Grenzen gesetzt. So können Händler Cross- und Up-Sell-Artikel nicht nur als Zusatz oder Alternative einsetzen, sondern vielmehr als Verkaufsargument.

Um diese Möglichkeiten mit Magento nutzbar zu machen, haben wir für pinkmilk.de ein umfangreiches und individuell erweiterbares "Shop the Look"-Landingpage-Modul entwickelt. pinkmilk.de ist ein Online-Shop für ausgesuchtes Geschirr, Dekoration und Wohnaccessoires im skandinavischen Design, den TUDOCK als Magento-Dienstleister betreut.

Das TUDOCK-Modul "Shop the Look" ermöglicht eine nahezu freie Gestaltung von Landingpages auf Kategorie-Ebene, um die zugehörigen Produkte mit Kontext-Elementen noch gezielter in Szene setzen zu können. Hierfür werden die bestehenden Magento-Kategorien im Backend um einen neuen Reiter erweitert, wo Shop-Manager beliebig viele Bilder und Texte für die Konfiguration der Landingpage hinzufügen können. Die Reihenfolge der Darstellung im Frontend entspricht dabei der des Backends und ist frei einstellbar.

Wir konzipierten das Modul minimal invasiv, damit in der Kategorie nur ausgewählt werden muss, dass ein statischer Block sowie die Produkte angezeigt werden sollen. Dieser statische Block rendert einen eigenen Block mit einem eigenen Template, so dass an der eigentlichen Kategorie-Seite keinerlei Änderungen erforderlich sind. Ebenso verzichtet das verwendete JavaScript auf Bibliotheken, um eine höchstmögliche Kompatibilität zu gewährleisten.

Visual Merchandising mit Magento-Landingpages: Produkte inszenieren

Für hochgeladene Bilder stehen zwei besondere Funktionen zur Verfügung:

Verlinkung von Bildpunkten und Artikeln

Auf hochgeladenen Bildern können Shop-Manager beliebig viele Spots setzen und per drag-and-drop platzieren. Jedem Spot kann ein Artikel der Kategorie zugeordnet werden (Bild 1).

BE-Ansicht Produktverlinkung in einem Bild mit Shop the Look
Bild 1: Konfiguration eines Spots mit Artikelverlinkung im Backend

Im Frontend sind diese Spots auf den entsprechenden Bildern sichtbar. Fährt ein Kunde mit der Maus über einen Spot, öffnet sich eine Quick-View mit Details zum verlinkten Artikel und einem Button zum sofortigen Hinzufügen des Artikels zum Warenkorb (Bild 2).

Produkt-Quick-View mit Schnellkauf-Option bei pinkmilk.de
Bild 2: Darstellung einer Quick-View im Frontend. (Beispiele unter:
https://www.pinkmilk.de/inspiration/pinke-lieblinge)

Sollte sich die Fenstergröße oder die Ausrichtung des zur Anzeige genutzten Gerätes ändern, werden die Overlays der Quick-View per JavaScript neu im Bild positioniert. Das Einblenden der Overlays geschieht hingegen rein über CSS.

Dank dieser Funktion kann ein Kunde sich Informationen zu allen Produkten, die auf einem Bild vorgestellt werden, schnell und ohne großen Aufwand anschauen und im besten Fall das Produkt direkt kaufen.

Verlinkung von Bildbereichen und URLs

Neben den Spots können auch ganze Bereiche eines Bildes verlinkt werden. Dies können Shop-Manager beispielsweise für die Erstellung einer Bilder-Navigation oder die Verlinkung eines Banners nutzen.

Im Magento-Backend lassen sich auf einem Bild beliebig viele Bereiche – auch in Kombination mit Spots – mit der Maus markieren und per drag-and-drop verschieben. Diesen Bereichen ordnet der Shop-Manager sowohl eine Ziel-URL sowie einen Titel zu (Bild 3).

Shop the Look BE-Ansicht Bilder-Navigation erstellen
Bild 3: Konfiguration einer Bilder-Navigation mit Seitenverlinkung im Backend

Im Shop-Frontend sind alle markierten Bereiche separat klickbar und beim Überfahren mit der Maus erscheint der Titel.

Um die Produktlisten für die Darstellung auf mobilen Geräten schlank zu halten, können ab einer definierten Bildschirmbreite anstelle der großen Bilder einfache Teaser oder Slider genutzt werden.

Dank des Modus lassen sich Werbekampagnen, Bilder-Menüs (Bild 4) und Kategorie-Landigpages nun im Backend mit geringem Aufwand und ohne jegliche Programmierkenntnisse umsetzen.

Menü aus Teaser-Bildern bei pinkmilk.de
Bild 4: Darstellung einer Kategorie-Seite mit Bilder-Navigation

Wenn Sie das Modul auch in Ihrem Magento-Shop einsetzen möchten oder Sie Fragen zum Modul haben, nehmen Sie Kontakt mit uns auf – wir helfen Ihnen gerne weiter.

Mehr zu den Projekten von TUDOCK

Autor: Kategorie: Referenzen
Schlagwörter: Magento, TUDOCKNEWS
YTo2OntzOjY6ImZldXNlciI7aTowO3M6MzoicGlkIjtpOjk4O3M6MzoiY2lkIjtpOjEwOTgxMjQyNjY7czo0OiJjb25mIjthOjEwOntzOjEwOiJzdG9yYWdlUGlkIjtpOjEyNDtzOjE0OiJleHRlcm5hbFByZWZpeCI7czoxMToidHhfbmV3c19waTEiO3M6MTM6IlVzZXJJbWFnZVNpemUiO2k6MTg7czo5OiJhZHZhbmNlZC4iO2E6MTp7czoyMToic2hvd0NvdW50Q29tbWVudFZpZXdzIjtpOjA7fXM6ODoic2hhcmluZy4iO2E6MTp7czoxMjoidXNlU2hhcmVJY29uIjtOO31zOjg6InJhdGluZ3MuIjthOjM6e3M6MTY6InJhdGluZ0ltYWdlV2lkdGgiO2k6MTE7czoxNjoicmV2aWV3SW1hZ2VXaWR0aCI7aToxNjtzOjg6Im1vZGVwbHVzIjtzOjQ6ImF1dG8iO31zOjY6InRoZW1lLiI7YTo3OntzOjI2OiJib3htb2RlbFRleHRhcmVhTGluZUhlaWdodCI7aTozMDtzOjI0OiJib3htb2RlbFRleHRhcmVhTmJyTGluZXMiO2k6NDtzOjE1OiJib3htb2RlbFNwYWNpbmciO2k6MTA7czoxODoiYm94bW9kZWxMaW5lSGVpZ2h0IjtpOjIwO3M6MTg6ImJveG1vZGVsTGFiZWxXaWR0aCI7aToxMzQ7czoyNjoiYm94bW9kZWxMYWJlbElucHV0UHJlc2VydmUiO2k6MTtzOjIyOiJib3htb2RlbElucHV0RmllbGRTaXplIjtpOjM1O31zOjE3OiJwcmVmaXhUb1RhYmxlTWFwLiI7YToxMDp7czoxNDoidHhfYWxidW0zeF9waTEiO3M6MTc6InR4X2FsYnVtM3hfaW1hZ2VzIjtzOjE1OiJ0eF9jb21tZXJjZV9waTEiO3M6MjA6InR4X2NvbW1lcmNlX3Byb2R1Y3RzIjtzOjEyOiJ0eF9pcmZhcV9waTEiO3M6MTA6InR4X2lyZmFxX3EiO3M6MTU6InR4X21pbmluZXdzX3BpMSI7czoxNjoidHhfbWluaW5ld3NfbmV3cyI7czo5OiJ0eF90dG5ld3MiO3M6NzoidHRfbmV3cyI7czoxMToidHRfcHJvZHVjdHMiO3M6MTE6InR0X3Byb2R1Y3RzIjtzOjI0OiJ0eF93ZWNzdGFmZmRpcmVjdG9yeV9waTEiO3M6MjU6InR4X3dlY3N0YWZmZGlyZWN0b3J5X2luZm8iO3M6MTI6InR4X2NvbW11bml0eSI7czo4OiJmZV91c2VycyI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czo4OiJmZV91c2VycyI7czoxMToidHhfbmV3c19waTEiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO31zOjExOiJzaG93VWlkTWFwLiI7YTo1OntzOjk6InR4X3R0bmV3cyI7czo3OiJ0dF9uZXdzIjtzOjExOiJ0dF9wcm9kdWN0cyI7czo3OiJwcm9kdWN0IjtzOjEyOiJ0eF9jb21tdW5pdHkiO3M6NDoidXNlciI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czoyNToiYWN0aW9uPWdldHZpZXdwcm9maWxlJnVpZCI7czoxMToidHhfbmV3c19waTEiO3M6NDoibmV3cyI7fXM6MTI6IlJlcXVpcmVkTWFyayI7czoxOiIqIjt9czo0OiJsYW5nIjtzOjI6ImRlIjtzOjM6InJlZiI7czoyOToidHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18yNjYiO30%3DYTo0OntzOjQ6ImNvbmYiO2E6MzU6e3M6MTc6InVzZVdlYnBhZ2VQcmV2aWV3IjtzOjE6IjEiO3M6MjI6InVzZVdlYnBhZ2VWaWRlb1ByZXZpZXciO3M6MToiMSI7czoyMDoid2VicGFnZVByZXZpZXdIZWlnaHQiO3M6MjoiNzAiO3M6MjA6Im1heENoYXJzUHJldmlld1RpdGxlIjtzOjI6IjcwIjtzOjMxOiJ3ZWJwYWdlUHJldmlld0Rlc2NyaXB0aW9uTGVuZ3RoIjtzOjM6IjE2MCI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvbk1pbmltYWxMZW5ndGgiO3M6MjoiNjAiO3M6Mjc6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lUGFnZSI7czozOiIxODAiO3M6MzM6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lVGVtcEltYWdlcyI7czoyOiI2MCI7czozMDoid2VicGFnZVByZXZpZXdDYWNoZUNsZWFyTWFudWFsIjtzOjE6IjAiO3M6Mjg6IndlYnBhZ2VQcmV2aWV3TnVtYmVyT2ZJbWFnZXMiO3M6MjoiMTAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbmltYWxJbWFnZUZpbGVTaXplIjtzOjQ6IjE1MDAiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbkltYWdlU2l6ZSI7czoyOiI0MCI7czozMDoid2VicGFnZVByZXZpZXdTY2FuTWF4SW1hZ2VTaXplIjtzOjM6IjQ1MCI7czoyOToid2VicGFnZVByZXZpZXdTY2FuTWluTG9nb1NpemUiO3M6MjoiMzAiO3M6MzE6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnMiO3M6MjoiNDAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnNGb3JMb2dvIjtzOjI6IjU1IjtzOjQwOiJ3ZWJwYWdlUHJldmlld1NjYW5NYXhIb3J6aXpvbnRhbFJlbGF0aW9uIjtzOjI6IjU7IjtzOjM3OiJ3ZWJwYWdlUHJldmlld1NjYW5tYXh2ZXJ0aWNhbHJlbGF0aW9uIjtzOjE6IjMiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2NhbkxvZ29QYXR0ZXJucyI7czoxMDoibG9nbyxjcmdodCI7czozODoid2VicGFnZVByZXZpZXdTY2FuRXhjbHVkZUltYWdlUGF0dGVybnMiO3M6NTc6InBpeGVsdHJhbnMsc3BhY2VyLHlvdXR1YmUscmNsb2dvcyx3aGl0ZSx0cmFuc3BhLGJnX3RlYXNlciI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvblBvcnRpb25MZW5ndGgiO3M6MjoiNDAiO3M6MjU6IndlYnBhZ2VQcmV2aWV3Q3VybFRpbWVvdXQiO3M6NDoiNzAwMCI7czoxMjoidXNlUGljVXBsb2FkIjtzOjE6IjAiO3M6MTI6InVzZVBkZlVwbG9hZCI7czoxOiIwIjtzOjEzOiJwaWNVcGxvYWREaW1zIjtzOjM6IjEwMCI7czoxNjoicGljVXBsb2FkTWF4RGltWCI7czozOiI4MDAiO3M6MTY6InBpY1VwbG9hZE1heERpbVkiO3M6MzoiOTAwIjtzOjIyOiJwaWNVcGxvYWRNYXhEaW1XZWJwYWdlIjtzOjM6IjQ3MCI7czoyMzoicGljVXBsb2FkTWF4RGltWVdlYnBhZ2UiO3M6MzoiMzAwIjtzOjIwOiJwaWNVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIyNTAwIjtzOjIwOiJwZGZVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIzMDAwIjtzOjE4OiJzb3VuZGNsb3VkQ2xpZW50SUQiO3M6MDoiIjtzOjIyOiJzb3VuZGNsb3VkQ2xpZW50U2VjcmV0IjtzOjA6IiI7czoyMDoidXNlVG9wV2VicGFnZVByZXZpZXciO3M6MDoiIjtzOjI0OiJ0b3BXZWJwYWdlUHJldmlld1BpY3R1cmUiO2k6MDt9czoxMToiYXdhaXRnb29nbGUiO3M6Mjg6IldhcnRlIGF1ZiBBbnR3b3J0IHZvbiBHb29nbGUiO3M6ODoidHh0aW1hZ2UiO3M6MTM6IkJpbGQgZ2VmdW5kZW4iO3M6OToidHh0aW1hZ2VzIjtzOjE1OiJCaWxkZXIgZ2VmdW5kZW4iO30%3DYTowOnt9YTowOnt9YTo3OntzOjE2OiJjb21tZW50TGlzdEluZGV4IjthOjE6e3M6MzI6ImNpZHR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMjY2IjthOjE6e3M6MTA6InN0YXJ0SW5kZXgiO2k6MTU7fX1zOjE0OiJjb21tZW50c1BhZ2VJZCI7aTo5ODtzOjE2OiJjb21tZW50TGlzdENvdW50IjtpOjEwOTgxMjQyNjY7czoxMjoiYWN0aXZlbGFuZ2lkIjtpOjA7czoxNzoiY29tbWVudExpc3RSZWNvcmQiO3M6Mjk6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMjY2IjtzOjEyOiJmaW5kYW5jaG9yb2siO3M6MToiMCI7czoxMjoibmV3Y29tbWVudGlkIjtOO30%3D YTo1OntzOjExOiJleHRlcm5hbFVpZCI7aToyNjY7czoxMjoic2hvd1VpZFBhcmFtIjtzOjQ6Im5ld3MiO3M6MTY6ImZvcmVpZ25UYWJsZU5hbWUiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO3M6NToid2hlcmUiO3M6MTcwOiJhcHByb3ZlZD0xIEFORCBleHRlcm5hbF9yZWY9J3R4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMjY2JyBBTkQgcGlkPTEyNCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmRlbGV0ZWQ9MCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmhpZGRlbj0wIEFORCBwYXJlbnR1aWQ9MCI7czoxMDoid2hlcmVfZHBjayI7czoxMzk6ImV4dGVybmFsX3JlZj0ndHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18yNjYnIEFORCBwaWQ9MTI0IEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuZGVsZXRlZD0wIEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuaGlkZGVuPTAiO30%3D YToyOntpOjA7czoxNDk6IjxpbWcgc3JjPSIvdHlwbzNjb25mL2V4dC90b2N0b2NfY29tbWVudHMvcmVzL2Nzcy90aGVtZXMvdHVkb2NrL2ltZy9wcm9maWxlLnBuZyIgY2xhc3M9InR4LXRjLXVzZXJwaWMgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjtpOjk5OTk5O3M6MTUxOiI8aW1nIHNyYz0iL3R5cG8zY29uZi9leHQvdG9jdG9jX2NvbW1lbnRzL3Jlcy9jc3MvdGhlbWVzL3R1ZG9jay9pbWcvcHJvZmlsZWYucG5nIiBjbGFzcz0idHgtdGMtdXNlcnBpY2YgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjt9
Bitte bestätigen Sie
Nein
Ja
Information
Ok
Vorschau wird geladen ...
* Pflichtfeld
Ihr Kommentar ist eine Antwort auf den folgenden Kommentar

Wir behalten uns vor, Kommentare zu löschen, beispielsweise wenn sich diese nicht auf den Beitrag beziehen, zur Eigenwerbung missbraucht werden, persönliche Daten anderer enthalten, diskriminieren, beleidigen oder Rechte verletzen.

Datenschutzhinweis: Wenn Sie einen Kommentar oder sonstigen Beitrag in unserem Blog hinterlassen, speichern wir neben Ihren Angaben Ihre IP-Adresse. Darüber hinaus können Sie die Beiträge und Kommentare unseres Blogs abonnieren. Das Kommentarabonnement können Sie jederzeit abbestellen. Weitere Informationen finden Sie in unserer Datenschutzerklärung.

E-Commerce & Webentwicklung: Wir realisieren und optimieren Internetprojekte. Unser Fachgebiet sind Onlineshops, Rich Internet Applications und anspruchsvolle Onlineauftritte. Über unsere Arbeit schreiben wir. Hier im Blog von TUDOCK.