Einen Ecwid-Shop über den Website Editor einrichten
In diesem Artikel zeigen wir dir, wie du einen Ecwid Shop erstellen und in deine Website integrieren kannst.
Einführung
Sitejet bietet dir eine integrierte Shop-Lösung, welche dir eine simple und schnell Möglichkeit bietet, einen Webshop in deiner Website zu integrieren und diesen über das leistungsstarke Backend von Ecwid ganze einfach zu verwalten. Es dauert nur wenige Minuten bist du einen Shop erstellt und individualisiert in deine Seite eingebunden hast. Der Shop kann kostenlos für bis zu fünf Produkte auf einmal genutzt werden. Solltest du mehr Produkte managen wollen, ist ein Upgrade auf ein bezahltes Paket notwendig. In unserem Beispiel gehen wir davon aus, dass ein Modeladen einen Shop auf seiner Website einbinden möchte.
Einen Shop erstellen
In der linken Sidebar findest du die Kategorie "Shop". Wenn du diese anklickst, siehst du die Möglichkeit, einen neuen Shop mit Ecwid zu erstellen. Dafür musst du eine E-Mail-Adresse hinterlegen und auf "Shop erstellen" klicken. Wir empfehlen hier die E-Mail-Adresse deiner Kunden zu hinterlegen, da sie wahrscheinlich auch den Shop managen werden. Wenn du auf "Shop erstellen" klickst, stimmst du den AGB und der Datenschutzerklärung der Ecwid, Inc. zu.
Den Shop in die Website integrieren
Sobald du einen Shop erstellt hast, findest du unter der Kategorie "Shop" die folgenden vier Shop-Elemente:
Produkte: Damit wird das Hauptlayout der Produkt-Übersicht in die Website eingebettet. Anpassungen zu diesem Layout können bei Ecwid unter Konfiguration > Gestaltung angepasst werden.
Warenkorb: Wenn du den Warenkorb hinzufügst, erscheint ein Taschen-Icon, dass dem User Zugriff auf den Warenkorb gibt. Dieser ist meistens im Produkte-Elemente enthalten.
Suchen: Mit dem Suchfeld kann schnell nach einem bestimmten Produkt gesucht werden.
Kategorien: Hiermit erscheint ein Auswahlfeld, um bestimmte Kategorien auszuwählen. Um dieses Element nutzen zu können, müssen zunächst Kategorien in Ecwid unter Produkte > Kategorien angelegt werden.
Um das Produkte-Element ansprechend in deine Website zu integrieren, füge zunächst einen Container hinzu. Öffne dafür die Kategorie "Elemente" in der linken Sidebar und drag und drop das Container-Element an die gewünschte Stelle. Du kannst die gewohnten Container-Einstellungen wie "Abstand" nutzen, um bspw. etwas Platz zwischen den Produkten und dem Rand der Website zu schaffen. Gehe dann zur "Shop" Kategorie und ziehe dann das Produkte-Element in den Container. Es sollte dann ungefähr so aussehen, wie im oberen Bild.
Als Erstes wird eine Beispiel-Ansicht mit Beispiel-Produkten geladen. Diese kannst du in deinem Ecwid Control Panel löschen. Um auf Ecwid zuzugreifen, klicke auf den Button "Shop Control Panel öffnen" im linken Settings Panel des Produkte-Elements. Klicke dann auf Produkte, um neue Produkte hinzuzufügen und alle Beispiel-Produkte über einen Button zu löschen.
Produkte hinzufügen
Unter Shop-Verwaltung > Produkte kannst du deine Produkte managen. Wenn du ein Produkt löschen möchtest, klicke auf den Pfeil neben "Produkt bearbeiten". Wenn du mehrere Produkte auf einmal löschen möchtest kannst du die Checkboxen nutzen und über die "Massenaktualisierung" die gewünschten Änderungen vornehmen.
Um ein neues Produkt hinzuzufügen, klicke auf "+ Neues Produkt".
Das öffnet eine Eingabemaske, die es dir erlaubt, alle wichtige Informationen über das Produkt zu ergänzen, bspw. Bilder hochladen, einen Namen und eine Beschreibung zu hinterlegen, einen Preis und eine Artikelnummer festsetzen und das Gewicht zu ergänzen (wichtig, wenn der Artikel versendet wird). Wenn du alle notwendigen Informationen hinterlegt hast, klicke Speichern. Wenn du mehrere ähnliche Produkte hast, kannst du auch die "Duplizieren"-Funktion nutzen, um schneller neue Produkte hinzuzufügen.
Shop-Regionen
Als Nächstes möchtest du wahrscheinlich regionale Einstellungen vornehmen, wie die Währung, Gewicht- und Größeneinheiten, Uhrzeit- und Datumsformate und die Shopsprache. Klicke dafür auf Einstellungen > Allgemein > Formate & Maßeinheiten unter dem Punkt Konfiguration.
Die Shopsprache wird standardmäßig in der lokalen Sprache des Shopbesuchers ausgegeben auf Grundlage der Browser-Informationen. Abgesehen von deinen individuellen Produkttexten wird alles in die erkannten Sprache übersetzt. Du kannst auswählen, welche Sprache die Standardsprache ist. Wenn du weitere Sprache auswählen möchtest, ist ein Upgrade zu einem bezahlten Paket notwendig.
Zahlungsmethoden hinzufügen
Unter Konfiguration > Zahlung kannst du auswählen, welche Zahlungsmethoden den Shop-Besuchern angeboten werden.
Versandoptionen auswählen
Unter "Versand & Abholung" kann hinterlegt werden, auf welche Arten die Produkte zu den Shop-Kunden geliefert werden. Bspw. kann es sein, dass nur lokal geliefert wird und/oder Abholung ausgeschlossen ist. Bei Versand wird sehr wahrscheinlich der Endpreis beeinflusst.
Die Einstellungen können jederzeit geändert werden. Wenn die Shopbesucher während Anpassungen keinen Zugriff auf den Shop haben sollen, kann er auf einen Wartungszustand gesetzt werden. Gehe dafür einfach auf Einstellungen > Allgemein und scrolle bei Shopprofil runter bis du "Shop geöffnet" siehst und klcike dann auf den Button um den "Shop für Wartungsarbeiten schließen".
Suchfeld hinzufügen
Wenn du einen Shop mit mehreren Produkte und Kategorien einbindest, kann es nützlich sein, dem Website-Besucher ein Suchfeld anzubieten, um nach bestimmten Produkten zu suchen. Dafür findest du das Element "Suchen" unter der Kategorie "Shop" in der linken Sidebar. Dieses kannst du ganz einfach per Drag und Drop über oder unter deinem Shop platzieren. Das Suchfeld ist standardmäßig linksbündig, kann aber ganz einfach über die Zuordnung der Klasse "center" im Einstellungspanel unter Style > ID & Klassen zentriert werden.
Style deinen Shop
Unter Design > Shop kannst du unterschiedliche Eigenschaften des Shops weiter individualisieren und an den Style der Website anpassen. Hier kannst du Farben, Schrifteinstellungen, Links, Rahmen und vieles mehr für alle Elemente deines Shops anpassen.
Ecwid Shop whitelisten
Wenn du Sitejet's Cookie Consent Bar nutze, welche alle JavaScripte von Drittanbieter automatisch blockt, bis der Website-Besucher seine Einwilligung zum Setzen von Cookies und Tracking gibt, kannst du den Ecwid Shop mit dem folgenden Code -Snippet whitelisten:
<script>(function(w,a,i){w[a]=w[a]||[];w[a].push(i)})(window,'YETT_WHITELIST',/ecwid|storefront|ecomm|new-frontend/)</script>
Weitere Hilfe
Jetzt weißt du, wie du einen einfachen Shop mit der Ecwid-Integration erstellen kannst. Weitere Informationen und detaillierte Hilfestellungen zu den unterschiedlichen Funktionen von Ecwid findest du in Ecwids Hilfecenter.
Werde ein Teil unserer Community!
Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.