Ab Tarif "Business" verfügbar.

Verkaufe direkt auf deiner Website oder deinem Blog.

  • Lege ein Produkt an.
  • Öffne die Widget-Einstellungen.
  • Passe die Kaufbox an: Größe, Farben, Schriften ...
  • Kopiere den HTML-Code und setze ihn auf deiner Website ein ...


... und schon können deine Besucher das Produkt direkt auf deiner Website kaufen.

Sie werden in den rechtssicheren Checkout von VersaCommerce geleitet und du bearbeitest die Bestellung ganz normal in deiner Shop-Administration.

Was ist ein Widget?

Der Begriff "Widget" wird häufig für Mini-Anwendungen verwendet. Auch die Kaufbox ist eine solche kleine Anwendung, denn sie aktualisiert sich fortlaufend automatisch, wenn du Veränderungen am Produkt vornimmst, oder der Bestand aufgrund des Verkaufs sinkt. Außerdem können deine Besucher in der Box Einstellungen vornehmen, etwa eine Produkt-Variante auswählen, oder die gewünschte Stückzahl eingeben.


Shop-Widgets

Beispiel: Kaufbox in der Seitenspalte eines Blogs.
Beispiel: Kaufbox in der Seitenspalte eines Blogs.

Shop-Widgets

Shop-Widgets aktivieren

Shop-Widgets stehen dir in der Testphase und später in jedem Tarif zur Verfügung. So wird der Kanal aktiviert:

  1. Wähle im Menü "Shop-Widgets".
  2. Klicke auf "Aktivieren".

Sind die Shop-Widgets aktiviert, erscheint die Ergebnis-Übersicht mit der Umsatzanzeige für diesen Kanal.

Shop-Widgets

Shop-Widgets
Shop-Widgets

Shop-Widgets

Ein Shop-Widget erstellen

  1. Öffne ein Produkt.
    Es sollte komplett gepflegt sein, also auch mindestens ein Bild enthalten. Varianten, Warenbestand und Streichpreis werden ebenfalls im Widget verwendet, sollten also (sofern vorhanden) auch gepflegt sein.
  2. Aktiviere die Shop-Widget-Funktion: Setze das Häkchen in der Kanal-Box.
  3. Klicke auf "Widget erstellen".

Die Wiget-Ansicht wird geöffnet. Hier kannst du die Kaufbox anpassen und am Ende den Code für die andere Website kopieren.

Die Menü-Elemente werden im Folgenden erklärt.

Shop-Widgets

Shop-Widgets
Shop-Widgets

Die Elemente der Widget-Ansicht

Die Elemente der Widget-Ansicht
Die Elemente der Widget-Ansicht

Shop-Widgets

Links siehst du ein Menü, das zur Anpassung des Widgets dient. Mit den drei Schaltflächen oben legst du fest, wohin deine Kunden beim Klick auf den Kauf-Button geleitet werden:

  • direkt in den Checkout,
  • in den Warenkorb, oder
  • auf die Produktseite.

Rechts siehst du die Vorschau auf das Widget. Wenn du links Änderungen durchführst, werden sie sofort in die Vorschau übernommen.

Unter der Vorschau kannst du den Hintergrund farblich verändern, so dass du einen besseren Eindruck von der Wirkung des Widgets in seiner späteren Umgebung gewinnen kannst. Diese Einstellung hat keinen Einfluss auf die Gestaltung des Widgets.

Die einzelnen Menüpunkte werden im Folgenden von oben nach unten erläutert.

Erscheinungsbild

Erscheinungsbild
Erscheinungsbild

Shop-Widgets

Schriftart

Wähle eine Schriftart, die der auf deiner Website nahe kommt.

Schriftgröße

Stelle die Schriftgröße mit dem Schieberegler ein.

Textumfluss

Lege fest, wie der Text die Kaufbox umfließen soll. Eventuell muss das CCS Stylesheet der Zielseite angepasst werden, damit der Effekt wirksam wird.

Abgerundete Ecken

Stelle mit dem Schieberegler ein, wie rund die Ecken der Box sein sollen.

Maximale Breite

Wähle eine der in Pixel angegebenen Breiten für die Kaufbox.

Auswahl für Anzahl aktivieren

Wenn du ein Limit pro Verkauf setzen möchtest, dann setze das Häkchen und lege das Limit fest.

Farben

Lege die Farben für alle Elemente fest.
Lege die Farben für alle Elemente fest.

Shop-Widgets

Hintergrundfarbe

Wähle die Farbe für den Hintergrund der Kaufbox.

Umrandung aktivieren

Wenn du einen Rand um die Kaufbox anzeigen möchtest, setze das Häkchen und bestimme die Farbe dieses Rahmens.

Primärfarbe

Hier legst du die Farbe der Haupt-Texte fest.

Sekundärfarbe

Die Farbe für die kleineren Texte.

Selektionsfarbe

Die Farbe der Rahmen, wenn diese Felder vom Benutzer angeklickt (selektiert) werden.

Preis- und Streichpreis-Farbe

In dieser Farbe wird der Preis, bzw. wenn vorhanden, der Streichpreis angezeigt.

Buttonfarben

Lege fest, in welche Farbe der Kauf-Button dargestellt wenn er aktiv und inaktiv ist (wenn das Produkt ausverkauft ist). Auch die Farbe der Button-Beschriftung stellst du hier ein.

Beschriftungen

Beschriftungen
Beschriftungen

Shop-Widgets

Trage die gewünschten Texte ein für den Kauf-Button, sowie die Angaben zur Verfügbarkeit.

Formatierung

Formatierung
Formatierung

Shop-Widgets

Falls abweichend vom Standard, trage hier die gewünschten Formate für Preise und Steuersätze ein.

Erweitert

Erweitert
Erweitert

Shop-Widgets

Tracking Code

Trage hier einen Tracking-Code ein, der beim Klick auf den Kauf-Button an deinen Shop übermittelt und an der Bestellung vermerkt wird. So kannst du nachvollziehen, von welcher Box / Website der Kauf kam.

Dies kannst du auch einsetzen, um zum Beispiel Affiliate-Provisionen auszuzahlen.

CSS Klasse

Falls auf der Ziel-Wesbite CSS-Klassen verwendet werden, kannst du hier eine CSS-Klasse eintragen, die dann dem Widget hinzugefügt wird.

Benutzerdefinierter CSS Code

Trage hier CSS Code ein, der dem Widget hinzugefügt werden soll. Diese Option sollte nur von Web-Designer und Web-Entwicklern verwendet werden.

Und am Schluss: HTML-Code generieren

Und am Schluss: HTML-Code generieren
Und am Schluss: HTML-Code generieren

Shop-Widgets

Wenn du alles am Widget eingestellt hast und es optimal zu deiner Ziel-Webseite passt, dann klicke links unten auf den grünen Button "HTML Code generieren".

Kopiere den Code und setze ihn auf deiner Webseite ein.

Die Kaufbox wird nun auf deiner Website dargestellt. Beim Klick auf den Kauf-Button wird der Kunde direkt in den Checkout deines Shops geleitet und kann seine Bestellung ganz normal abschließen.

Der Warenbestand, sowie sonstige Änderungen, die du am Produkt vornimmst, werden automatisch in das Widget übernommen, auch wenn es sich auf der anderen Website befindet.