HTML-Elemente im Shop einbinden

Social-Media-Feeds, Chatboxes, Musikplayer und mehr – mit HTML-Elementen können Sie Ihren ePages-Now-Shop um viele Funktionen erweitern.

Jede Website – auch Ihr Onlineshop – besteht aus HTML-Code. HTML ist eine Auszeichnungssprache, die vor allem dazu genutzt wird, Webseiten zu erstellen. Seit Neuestem ist es für Sie möglich, eigenen HTML-Code auf den Inhalts- und Kategorieseiten Ihres Shops einzufügen. Dies bietet Ihnen zahllose Möglichkeiten, neue Funktionen und Elemente zu integrieren.

Das Prinzip ist ganz einfach: Sie rufen im Administrationsbereich Ihres Shops den Editor auf und wählen die Seite, auf der Sie ein HTML-Element einfügen möchten. Dies erledigen Sie, indem Sie das neue Inhaltselement „Benutzerdefiniertes HTML“ auf die Seite ziehen. Anschließend können Sie Ihren eigenen HTML-Code einfügen.

In den meisten Fällen werden Sie wahrscheinlich keinen eigenen Code schreiben, sondern auf bestehenden Code von Drittanbietern zugreifen.

Wir haben für Sie eine Liste von möglichen Funktionen zusammengestellt, die Sie ab sofort für Ihren Shop nutzen können.

Eingefügter HTML-Code kann negative Auswirkungen auf das Design und die Funktionalität Ihres Shops haben und auch das Responsive Design Ihres Shops beeinträchtigen, was möglicherweise zu Darstellungsfehlern auf Mobilgeräten führen kann. Sie nehmen Änderungen auf eigenes Risiko vor. Für benutzerdefiniertes HTML und die möglichen Auswirkungen auf Ihren Shop stellt der Anbieter Ihres Shops keinen Kundenservice zur Verfügung.Überprüfen Sie Ihren Shop nach allen Änderungen sorgfältig. Bitte beachten Sie auch, dass die automatisch eingespielten Updates Auswirkungen auf den Programmcode Ihres Shops haben. Prüfen Sie deshalb regelmäßig, ob der von Ihnen eingegebene HTML-Code noch seinen Zweck erfüllt und ob er Design oder Funktionalität nach dem Update beeinträchtigt.

Eigener HTML-Code

Mehr Elemente: Sie haben mehr Möglichkeiten, was die Darstellung von Farben, Schriften, Buttons etc. angeht.
Iframes: Mit der Integration von Iframes können Sie beliebige andere Inhalte aus dem Web im Shop anzeigen lassen. Mehr Infos dazu finden Sie hier.
Ankerpunkte: Hiermit können Sie eine Sprungmarke definieren, die Sie dann verlinken können. So ist es möglich, dass ein Nutzer beim Aufrufen des Links zu genau der richtigen Stelle auf der Seite springt. Mehr Infos dazu finden Sie hier.
Bilderdarstellung: Sie haben erweiterte Gestaltungsmöglichkeiten in Bezug auf Bilder. Zum Beispiel lassen sich mehr Bilder nebeneinander anzeigen, als es standardmäßig mit Ihrer Shopsoftware möglich ist.
Social Media: Facebook, Twitter und Co. bieten eigenen Code zur Integration von Profilen und Postings.

Elfsight: Eine Website, zig Widgets

Die Website Elfsight bietet Ihnen Dutzende Apps, die Sie über benutzerdefiniertes HTML in Ihren Shop einbauen können. Bei der kostenlosen Version von Elfsight kann jede App monatlich 200 Mal in Ihrem Shop angezeigt werden und es ist immer das Elfsight-Logo zu sehen. Für nur 5 $ monatlich ist das Logo verschwunden und die Apps werden 10.000 Mal monatlich eingeblendet – für kleinere Shops meist völlig ausreichend.

Für so gut wie jede App gibt es viele Einstellungsmöglichkeiten.

Unter Umständen werden manche der Elfsight-Apps nicht allen Shopbesuchern angezeigt. Dies kann beispielsweise passieren, wenn ein Besucher festgelegt hat, dass auf seinem Gerät nur die für den Betrieb des Shops notwendigen Cookies gesetzt werden. Nutzen Sie Elfsight also immer so, dass es den Betrieb des Shops nicht beeinträchtigt, falls Elemente nicht geladen werden sollten. Für die Bestellung relevante Elemente sollten Sie also stets mit den Inhaltselementen im Editor einfügen.

Social Media

Instagram: Lassen Sie Postings von Instagram anzeigen, indem Sie Usernamen oder Hashtags angeben.
Facebook: Von Facebook lassen sich Posts, Videos oder Fotos darstellen.
Twitter: Neben dem Anzeigen eines Twitter-Profils können Sie auch einzelne Tweets anzeigen lassen.
Pinterest: Mit Elfsight lassen sich Profile, Boards oder Pins anzeigen.
YouTube: Im Editor Ihres Shops können Sie standardmäßig einzelne YouTube-Videos einbinden. Elfsight bietet eine YouTube-Galerie, die mehrere Videos eines YouTube-Accounts darstellt.

Gestaltungselemente

Preistabellen: Mit dieser App erstellen Sie eine Tabelle, mit der sich zum Beispiel Produkte vergleichen lassen. Listen Sie die Features ähnlicher Produkte auf und ermöglichen Sie Ihren Kunden so, schnell die Unterschiede zwischen ihnen zu erfassen.
Testimonials: Zeigen Sie Kundenstimmen an.
Team: Mit dieser App ist es möglich, Ihr Team ansprechend darzustellen.

Sonstige Inhalte

Kontakt-Box: In Ihrem Shop wird eine kleine Box integriert, über die Ihre Kunden zum Beispiel telefonisch, über Facebook oder WhatsApp mit Ihnen Kontakt aufnehmen können.
Audiodateien: Über einen Audioplayer können sich Ihre Besucher Audiodateien wie etwa Musik oder Podcasts anhören.
Wetter: Über die Wetter-App zeigen Sie Ihren Kunden das Wetter an einem zuvor definierten Ort an.
Dateien: Sie möchten Ihren Kunden Dateien zur Verfügung stellen? Binden Sie sie einfach über die entsprechende App ein.
Bewertungen: Zeigen Sie Nutzerbewertungen an, zum Beispiel von Ihrer Facebook-Seite.
PDF: PDF-Dateien können direkt auf einer Seite des Shops angezeigt werden.
Veranstaltungskalender: Events werden übersichtlich dargestellt.
Speisekarten: Falls Sie zum Beispiel ein Restaurant oder Café betreiben, können Sie eine attraktive Speisekarte im Shop einbinden.

So fügen Sie eigenen HTML-Code ein

1. Wählen Sie im Administrationsbereich Ihres Shops im Hauptmenü Editor.

2. In der Seitenleiste wird Ihnen unter Seiten nun eine Liste der Seiten Ihres Shops angezeigt. Wählen Sie die Seite, die Sie bearbeiten möchten.

3. Wählen Sie Inhaltselemente.

4. Wählen Sie in der linken Spalte das Inhaltselement Benutzerdefiniertes HTML und ziehen Sie das Element mit gedrückter linker Maustaste an die gewünschte Stelle in Ihrem Shop rechts. Die blauen Bereiche zeigen Ihnen dabei an, an welchen Stellen Sie das Element einfügen können.

5. Wählen Sie HTML hinzufügen.

6. Geben Sie den HTML-Code ein, den Sie zur Seite hinzufügen möchten.

7. Wählen Sie Speichern.

8. Wählen Sie Ihren Shop anzeigen und überprüfen Sie, ob die Änderungen korrekt angezeigt werden oder ob es Probleme mit der Darstellung Ihres Shops gibt.