Technologische Neuigkeiten, Bewertungen und Tipps!

So fügen Sie Ihrer Website einen Einkaufswagen hinzu (Anleitung für Anfänger)

So fügen Sie Ihrer Website einen Einkaufswagen hinzu (Anleitung für Anfänger)

So fügen Sie Ihrer Website einen Einkaufswagen hinzu (Anleitung für Anfänger)

Möchten Sie erfahren, wie Sie Ihrer Website einen Einkaufswagen hinzufügen? Wir helfen Ihnen dabei.

In diesem Beitrag teilen wir eine Schritt-für-Schritt-Anleitung, mit der Sie Ihrer Site mit Sellfy einen Einkaufswagen hinzufügen können.

Und keine Sorge, es ist ganz einfach. Sie müssen kein erfahrener Webentwickler sein, um diesem Tutorial zu folgen, und der gesamte Vorgang sollte weniger als 10 Minuten dauern.

Warum Sellfy zum Hinzufügen eines Einkaufswagens verwenden?

Es gibt verschiedene Möglichkeiten, wie Sie könnte Implementieren Sie einen Einkaufswagen auf Ihrer Site.

Sie könnten zum Beispiel Ihren eigenen Einkaufswagen von Grund auf neu programmieren oder eine lizenzierte Einkaufswagen-Software auf Ihrem Webserver installieren, aber das wäre mit viel Arbeit verbunden – Sie bräuchten ein ganzes Entwicklerteam hinter sich.

Eine andere Möglichkeit wäre, Ihren Onlineshop auf einer All-in-One-E-Commerce-Plattform neu aufzubauen, die bereits über einen integrierten Einkaufswagen verfügt. Wenn Sie jedoch bereits eine Website haben, die auf einer Plattform wie WordPress basiert, möchten Sie wahrscheinlich nicht auf einer ganz neuen Plattform von vorne beginnen.

Aus diesem Grund werden wir in diesem Tutorial eine viel einfachere und schnellere Methode zum Hinzufügen eines Einkaufswagens verfolgen.

Wir werden mit Sellfy eine vorgefertigte, gehostete Warenkorbsoftware in unsere bestehende Website einbetten.

Es erfordert viel weniger Aufwand als andere Methoden: Sie fügen einfach Ihre Produkte hinzu und kopieren dann ein paar Codezeilen. Sellfy übernimmt die ganze schwere Arbeit für Sie.

So fügen Sie Ihrer Website einen Einkaufswagen hinzu: Schritt-für-Schritt

Also gut, legen wir los. Hier erfahren Sie in sechs einfachen Schritten, wie Sie einen Einkaufswagen auf Ihrer Website integrieren.

Schritt 1: Melden Sie sich bei Sellfy an

Zunächst müssen Sie sich bei Sellfy anmelden.

Sellfy ist eine E-Commerce-Plattform, die das Backend Ihres Einkaufswagens steuert. Sie hostet Ihre Produkte, wickelt Zahlungen ab und verwaltet den Checkout-Prozess.

Und als Bonus bietet es noch eine Reihe weiterer nützlicher Funktionen, wie Marketing-Tools, Print-on-Demand-Auftragsabwicklung und mehr.

Sie können mit einer 14-tägigen kostenlosen Testversion beginnen, die Kunden können Ihren Einkaufswagen jedoch erst dann tatsächlich abschließen, wenn Sie ein kostenpflichtiges Monatsabonnement abschließen.

Es stehen verschiedene Pläne zur Verfügung. Der Hauptunterschied besteht darin, wie viel Sie pro Jahr verkaufen können.

Mit dem Starter-Plan können Sie nur Umsätze von bis zu 10.000 USD erzielen. Business-Benutzer können bis zu 50.000 USD und Premium-Benutzer bis zu 200.000 USD umsetzen. Höherpreisige Pläne bieten außerdem weitere Funktionen und Vorteile.

Wählen Sie die Option aus, die Ihren Anforderungen am besten entspricht, und fahren Sie dann mit dem nächsten Schritt fort.

Schritt 2: Fügen Sie Ihre Produkte hinzu

Sobald Sie sich bei Sellfy registriert und angemeldet haben, werden Sie zu Ihrem Dashboard weitergeleitet.

Der nächste Schritt besteht darin, die Produkte, die Sie über Ihre Website verkaufen möchten, zu Sellfy hinzuzufügen.

Klicken Sie dazu auf Produkte in der Seitenleiste, dann Neues Produkt hinzufügenund wählen Sie einen Produkttyp aus.

Sie können digitale Produkte, Abonnements, physische Produkte, Print-on-Demand-Produkte und mehr verkaufen.

Geben Sie Ihrem Produkt auf der nächsten Seite einen Namen, fügen Sie eine Produktbeschreibung hinzu und laden Sie alle Vorschaubilder hoch, die Sie anzeigen möchten. Wählen Sie dann den Preis, zu dem Sie es verkaufen möchten, legen Sie Ihren Lagerbestand fest, fügen Sie bei Bedarf Produktvarianten hinzu und klicken Sie auf Produkt speichern.

Wiederholen Sie diesen Vorgang, bis Sie alle Produkte hinzugefügt haben, die Sie verkaufen möchten. In Ihrem Dashboard sollte dann eine Liste davon angezeigt werden.

Schritt 3: Holen Sie sich den Einbettungscode für den Einkaufswagen

An diesem Punkt sollten Sie einen Sellfy-Shop mit Produkten haben. Aber wir möchten unsere Produkte nicht über Sellfy verkaufen, sondern über unsere bestehende Website.

Als nächstes öffnen wir Einbettungsoptionen unter Shop-Einstellungen in der Seitenleiste. Klicken Sie dann auf Schaltfläche „Jetzt kaufen“und wählen Sie ein Produkt aus.

Darunter sollten Sie zwei Felder mit Codeausschnitten sehen: Code abrufen Und Schaltfläche „Einkaufswagen hinzufügen“ (optional).

Kopieren Sie den Code unter In den Warenkorb in Ihre Zwischenablage und öffnen Sie dann Ihre Website.

Schritt 4: Fügen Sie es zum HTML Ihrer Website hinzu

Damit der Einkaufswagen von Sellfy auf Ihrer Website angezeigt wird, müssen Sie den HTML-Einkaufswagencode, den Sie gerade kopiert haben, in Ihre Website einfügen. Die genaue Vorgehensweise hängt vom CMS/der Plattform ab, auf der Sie Ihre Website erstellt haben.

Wenn Ihre Website auf WordPress basiert, können Sie zunächst eine Seite öffnen, auf der der Einkaufswagen im WordPress-Editor angezeigt werden soll. Klicken Sie dann auf die drei Punkte in der oberen rechten Ecke und wechseln Sie zu Code-Editor:

Fügen Sie den Codeausschnitt, den Sie in die Zwischenablage kopiert haben, in den HTML-Code im Editor ein und klicken Sie auf Speichernund zeigen Sie die Seite dann in Ihrem Browser an. Wenn Sie alles richtig gemacht haben, sollten Sie jetzt ein Wagen Schaltfläche, die in der oberen rechten Ecke der Seite schwebt.

Kunden können auf das Einkaufswagensymbol klicken, um die hinzugefügten Produkte anzuzeigen und mit der Kaufabwicklung fortzufahren.

Schritt 5: Betten Sie Ihre Produkte ein

Okay, wir haben jetzt also einen Einkaufswagen auf unserer Website. Es gibt nur ein Problem: Derzeit gibt es für Kunden keine Möglichkeit, Produkte in den Einkaufswagen zu legen.

Als nächstes werden wir einige einbetten.

Gehen Sie dazu zurück zum Einbettungsoptionen Seite auf Sellfy und klicken Sie auf eine der Registerkarten oben, um auszuwählen, wie Sie Ihre Produkte auf Ihrer Site anzeigen möchten.

Es gibt drei Möglichkeiten:

  • Schaltflächen „Jetzt kaufen“. Dadurch wird auf Ihrer Website eine einzelne Schaltfläche eingebettet, auf die Kunden klicken können, um direkt zur Kasse zu gelangen (und den Warenkorb vollständig zu überspringen). Wenn sie den Kaufvorgang jedoch nicht abschließen, wird das angeklickte Produkt in ihrem Warenkorb gespeichert. Sie müssen für jedes Produkt, das Sie verkaufen möchten, eine separate Schaltfläche „Jetzt kaufen“ hinzufügen.
  • Einzelnes Produkt. Dadurch wird ein einzelner Produktwagen mit Miniaturansicht und Beschreibung eingebettet. Kunden können darauf klicken, um das Produkt in ihren Wagen zu legen. Auch hier müssen Sie für jedes Produkt, das Sie verkaufen möchten, eine separate Karte hinzufügen.
  • Alle Produkte. Dadurch wird eine vollständige Liste aller Produkte angezeigt, die Sie Ihrer Sellfy-Site hinzugefügt haben, in einem Widget auf derselben Seite.

Sobald Sie einen ausgewählt haben, müssen Sie den Codeausschnitt unter Code abrufen (dieser unterscheidet sich vom Warenkorbcode, den wir im letzten Schritt eingebettet haben):

Fügen Sie ihn dann in das HTML Ihrer Site auf der Seite ein, auf der die Produkte erscheinen sollen, genau wie Sie es mit dem eingebetteten Code für den Einkaufswagen getan haben.

Rufen Sie Ihre Seite jetzt noch einmal auf. Sie sollten nun die Schaltflächen „Produkte“ und „Jetzt kaufen“ sehen. Sie werden in der Zeile angezeigt, in die Sie den Code eingefügt haben.

Besucher sollten nun in der Lage sein, auf diese Schaltflächen zu klicken, um das Produkt in ihren Warenkorb zu legen. Dabei wird der Warenkorb oben rechts aktualisiert und zeigt alle hinzugefügten Artikel an:

Wenn sie mit dem Hinzufügen von Produkten fertig sind, können Käufer auf Kasseund auf Ihrer Site wird ein modales Popup-Fenster wie dieses geöffnet:

Käufer müssen dann nur noch ihre Daten im Popup-Fenster eingeben, um ihren Einkauf abzuschließen. Dies ist jedoch erst möglich, wenn Sie ein Zahlungsgateway angeschlossen haben, und damit kommen wir zum letzten Schritt …

Schritt 6: Ein Zahlungsgateway verbinden

Als Letztes müssen wir den Kunden eine Möglichkeit bieten, für die Artikel in ihrem Einkaufswagen zu bezahlen.

Gehen Sie also zurück zu Ihrem Sellfy-Dashboard und gehen Sie zu Shop-Einstellungen > Zahlungseinstellungen.

Wählen Sie dann aus, ob Sie Zahlungen über Stripe oder PayPal abwickeln möchten, und folgen Sie den Anweisungen auf dem Bildschirm, um Ihre Konten zu verbinden. Dies sollte nur ein paar Minuten dauern.

Sobald Sie Ihr Stripe/PayPal-Konto verbunden haben, stellen Sie sicher, dass der Schalter neben dieser Option auf Anund du bist fertig!

Kunden sollten nun in der Lage sein, den gesamten Einkauf über Ihren Warenkorb auf Ihrer Website abzuschließen. Sie können die Bestellungen Ihrer Kunden über Ihr Sellfy-Dashboard anzeigen und verwalten.

So passen Sie Ihren Einkaufswagen an

An diesem Punkt sollte auf Ihrer Site ein voll funktionsfähiger Einkaufswagen vorhanden sein, der aber möglicherweise noch nicht ganz Ihren Wünschen entspricht.

Glücklicherweise können Sie Ihren Einkaufswagen anpassen, um sein Aussehen und seine Position auf der Seite zu ändern. So gehts.

Ändern Sie Ihren Warenkorbtext

Ändern wir zunächst den Text. Im Moment lautet unser Einkaufswagen Wagenaber stellen wir uns vor, wir möchten das ändern, sodass es beschriftet ist Korb stattdessen.

Dazu müssen einige Codeänderungen vorgenommen werden, aber keine Sorge, das ist kein Hexenwerk.

Wir müssen lediglich den Teil des Codes ändern, der zwischen den Anführungszeichen steht, die auf das Datentext= Tag. Ich habe den Teil, den Sie ändern müssen, unten fett hervorgehoben, um die Arbeit zu vereinfachen:

 

Nachdem Sie dies im HTML Ihrer Website geändert haben, speichern Sie Ihre Änderungen. Die Live-Seite sollte dann aktualisiert werden und die aktualisierte Warenkorb-Schaltfläche mit der neuen Bezeichnung anzeigen.

Ändern Sie die Position Ihres Einkaufswagens

Standardmäßig wird die Schaltfläche „Einkaufswagen“ in der oberen rechten Ecke Ihrer Website-Seite angezeigt.

Wenn Sie möchten, dass es an einem anderen Ort angezeigt wird, müssen Sie zunächst die Datentyp= Funktion im Code von schwebend Zu im Einklangwie unten fett dargestellt:

 

Stellen Sie dann sicher, dass Sie den Code in die HTML-Codezeile eingefügt haben, in der er auf der Seite erscheinen soll. Speichern Sie Ihre Änderungen, und die Seite sollte aktualisiert werden, um die neue Position widerzuspiegeln.

Ändern Sie die Farbe und Form Ihres Einkaufswagens

Wir haben alle möglichen Änderungen am HTML-Code vorgenommen. Für weitere kosmetische Änderungen müssen Sie den Sellfy-Shop öffnen. Individualisierer.

Gehen Sie zunächst zu Ihrem Sellfy-Dashboard und klicken Sie dann auf Shop-Einstellungen > Shop anpassen.

Klicken Sie anschließend auf Stil speichernund Sie sollten sehen Schaltflächenstile in der Seitenleiste.

Von hier aus können Sie die Hintergrund- und Textfarbe Ihrer Einkaufswagen-/Jetzt kaufen-Schaltflächen sowie die Schriftgröße, Eckform und Umrisse ändern.

Die Schaltflächen, die Sie auf Ihrer Website eingebettet haben, werden automatisch aktualisiert, um die Änderungen widerzuspiegeln, die Sie hier in Sellfy vornehmen. Denken Sie einfach daran, auf Veröffentlichen um die Änderungen zu speichern, wenn Sie fertig sind.

Ändern Sie den Checkout-Prozess

Eines der coolsten Dinge an Sellfy ist, dass Sie den Checkout-Prozess durch Hinzufügen von Upselling und Cross-Selling individuell anpassen können.

Wenn Sie ein Upselling hinzufügen, wird Kunden die Möglichkeit geboten, ein zusätzliches Produkt zu einem Sonderpreis zu kaufen, nachdem sie einen Artikel in ihren Warenkorb gelegt haben. Das Angebot wird im modalen Popup-Fenster auf Ihrer Website angezeigt.

Sie können das Angebot ablehnen oder es in den Warenkorb legen. Dies ist eine großartige Möglichkeit, den durchschnittlichen Bestellwert Ihres Shops zu erhöhen.

Um es einzurichten, öffnen Sie Sellfy und klicken Sie auf Upselling unter dem Rabatte in der Seitenleiste. Klicken Sie dann auf Neues Upselling hinzufügen.

Geben Sie Ihrem Upsell-Angebot einen Namen und wählen Sie dann aus, welches Produkt Sie als Upsell anbieten möchten und für welche Produkte Sie die Upsells anbieten möchten.

Sie können die Upsell-Popup-Nachricht anpassen und auswählen, welchen Rabatt Sie anwenden möchten. Und wenn Sie fertig sind, klicken Sie auf Rabatt erstellen.

Wenn Kunden jetzt auf Ihrer Site ein Produkt in den Einkaufswagen legen, sollte ihnen ein Angebot wie das folgende angezeigt werden:

FAQ (Häufig gestellte Fragen)

Abschließende Gedanken

Wie Sie sehen, ist es mit Sellfy ganz einfach, Ihrer Website einen Einkaufswagen hinzuzufügen. Der schwierige Teil ist, Verkäufe zu tätigen.

Um mehr darüber zu erfahren, was zum Betreiben einer erfolgreichen E-Commerce-Site erforderlich ist, verpassen Sie nicht unsere Zusammenfassung der wichtigsten Fakten und Statistiken zum E-Commerce.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.