Ein Warenkorb hilft den Kunden zu sehen, wie viele Artikel sie zu ihrer Bestellung hinzugefügt haben, und zur Kasse zu gehen. Wenn Sie Ihren Online-Shop, separate Produkte oder die Schaltflächen „Jetzt kaufen“ in eine Webseite einbetten, wird das Warenkorb-Symbol automatisch auf dieser Seite angezeigt, sobald mindestens ein Produkt in den Warenkorb gelegt wird.

Sie haben auch die Möglichkeit, einen zusätzlichen Warenkorb zu anderen Seiten Ihrer Webseite hinzuzufügen oder ihn in den Header der Webseite zu setzen. Dieses Symbol weist die Besucher der Webseite darauf hin, dass es einen Online-Shop gibt, in dem sie einkaufen können. Sie können auch das Design des Warenkorbs ändern: Wählen Sie das Symbol, die anzuzeigenden Informationen (Anzahl der Artikel, Zwischensumme usw.), legen Sie die Position fest, an der es angezeigt werden sollen, usw.

Hinzufügen eines Warenkorbs zu einer Website

Sie können Ihren Webseiten einen Warenkorb hinzufügen, so dass Kunden von jeder beliebigen Seite Ihrer Webseite zur Warenkorbseite gelangen können. Außerdem erinnert ein Warenkorb-Symbol die Kunden daran, dass sie Produkte in ihren Warenkorb gelegt haben, und fordert sie auf, den Kauf abzuschließen.

Um Webseiten einen Warenkorb hinzuzufügen:

Gehen Sie zu Ihrer Shop-Verwaltung → Webseite.
Scrollen Sie nach unten zum Abschnitt „Fügen Sie Ihren Shop zu einer weiteren Webseite hinzu“ und klicken Sie auf Plattform auswählen → Andere Plattformen und Sitebuilder.
Klicken Sie auf Warenkorb hinzufügen. Der Warenkorb-Code für Ihren Shop wird anschließend in die Zwischenablage kopiert.
Gehen Sie zu Ihrem Webseiteneditor und öffnen Sie die Seite, auf der Sie den Warenkorb hinzufügen möchten.
Fügen Sie den Code in den Quellcode dieser Seite ein. Dies kann ein HTML- oder Quellcode-Tab oder eine separate Schaltfläche zum Hinzufügen von Codes sein. Das variiert je nach dem von Ihnen verwendeten Webseiten-Baukasten.
Speichern und veröffentlichen Sie die Seitenänderungen.

Das zusätzliche Warenkorb-Symbol wird nun auf Ihrer Website erscheinen.

Anpassen des Warenkorb-Designs

Sie können das Design des Warenkorbs anpassen, damit er besser zum Design Ihrer Webseite passt. Um das Standard-Design Ihres Warenkorbs zu ändern, müssen Sie den Standardcode des Warenkorbs ändern und ein neues Stück Code hinzufügen, das die gewünschte Änderung vornimmt. Unten sehen Sie die Codes für verschiedene Design-Änderungen.

So ändern Sie das Design Ihres Warenkorb-Symbols:

Wählen Sie unten die gewünschte Design-Änderung aus.
Kopieren Sie den Code unter der gewünschten Design-Änderung.
Ersetzen Sie VALUE durch einen der vorgeschlagenen Werte und STORE_ID durch die ID Ihres Shops, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.
Gehen Sie zum Editor Ihrer Webseite und öffnen Sie die Seite, auf der Sie den Warenkorb hinzufügen möchten.
Fügen Sie den Code in den Quellcode dieser Seite ein. Dies kann ein HTML- oder Quellcode-Tab oder eine separate Schaltfläche zum Hinzufügen von Codes sein. Das variiert je nach dem von Ihnen verwendeten Webseiten-Baukasten.
Speichern und veröffentlichen Sie die Änderungen.

Hier ist ein Code, um das Layout des Warenkorbs zu ändern:


<div data-layout="VALUE" class="ec-cart-widget"></div>

<div><script data-cfasync="false" type="text/javascript"

src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"charset="utf-8"></script>

<script>Ecwid.init();</script>

</div>

wo:

VALUE der Name des Layouts ist, das Sie auf Ihr Warenkorb-Symbol anwenden möchten. Kopieren Sie den Wert aus der linken Spalte in der obigen Tabelle.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Symbol

Hier ist ein Code, um das Symbol des Warenkorbs zu ändern:


<div data-icon="VALUE" class="ec-cart-widget"></div>

<div><<script data-cfasync="false" type="text/javascript"

src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 

charset="utf-8"></script>

<script>Ecwid.init();</script>

</div>

wo:

VALUE durch BAG, CART oder BASKET ersetzt werden muss, je nachdem, welches Symbol Sie verwenden möchten.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Um ein benutzerdefiniertes Bild als Warenkorb-Symbol hinzuzufügen, verwenden Sie diesen Code:


<div data-custom-icon-url="VALUE" class="ec-cart-widget">

</div><div><script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" charset="utf-8"></script><script>Ecwid.init();</script>

</div>

wo:

VALUE entweder eine URL zu der benutzerdefinierten Symboldatei oder ein SVG-Markup ist. Um eine URL zu Ihrem Symbol zu erhalten, laden Sie Ihr Bild bei einem beliebigen Anbieter zum Hochladen von Bildern hoch. Dort erhalten Sie einen direkten Link zu Ihrem Bild.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Form des Randes

Um die Form des Randes um das Warenkorb-Symbol zu ändern, verwenden Sie diesen Code:


<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>

<div><script data-cfasync="false" type="text/javascript"

src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 

charset="utf-8"></script><script>Ecwid.init();</script>

</div>

wo:

VALUE durch NONE für keine Umrandung, RECT für eine rechteckige Umrandung oder PILL für eine abgerundete rechteckige Umrandung ersetzt werden muss.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Position

Hier ist ein Code, um die Position des Warenkorbs zu ändern:


<div data-fixed="VALUE" 

data-fixed-position="VALUE"

data-fixed-shape="VALUE" 

data-horizontal-indent="VALUE" 

data-vertical-indent="VALUE" class="ec-cart-widget"></div>

<div>

<script data-cfasync="false" type="text/javascript" 

src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 

charset="utf-8"></script><script>Ecwid.init();</script></div>

wo:

VALUE durch einen der Werte aus der obigen Tabelle ersetzt werden muss, je nachdem, an welcher Position sich Ihr Warenkorb befinden soll.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Animation

Sie können den Animationseffekt ein- oder ausschalten, wenn ein Artikel in den Warenkorb gelegt wird, indem Sie den folgenden Code verwenden:


<div data-show-buy-animation="VALUE" 

class="ec-cart-widget"></div>

<div><script data-cfasync="false" 

type="text/javascript" 

src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 

charset="utf-8"></script><script>Ecwid.init();</script>

</div>

wo:

VALUE durch TRUE ersetzt werden muss, um die Animation zu zeigen, oder durch FALSE, um sie zu deaktivieren.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Verwendung desselben Warenkorb-Designs auf allen Geräten

Das Warenkorb-Symbol passt sich der Bildschirmbreite an und kann auf Geräten mit unterschiedlicher Bildschirmbreite anders aussehen. Um zu erzwingen, dass der Warenkorb auf allen Geräten das gleiche Design verwendet, verwenden Sie diesen Code:


<div data-responsive="VALUE" 

class="ec-cart-widget"></div>

<div><script data-cfasync="false" 

type="text/javascript" 

src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" 

charset="utf-8"></script><script>Ecwid.init();</script>

</div>

wo:

VALUE durch TRUE ersetzt werden muss, damit sich der Warenkorb automatisch an unterschiedliche Bildschirmgrößen anpasst, oder durch FALSE, damit der Warenkorb das gleiche Design auf unterschiedlichen Bildschirmgrößen hat.

STORE_ID die ID Ihres Shops ist, die Sie in der linken unteren Ecke Ihrer Shop-Verwaltung kopieren können.

Hinzufügen eines Warenkorbs zu WordPress-Seiten

Mit dem Online-Shop-Plugin können Sie Ihren Online-Shop zu einer WordPress-Webseite hinzufügen. Dieses Plugin erlaubt es Ihnen auch, ein Warenkorb-Symbol hinzuzufügen und dessen Layout und Design zu ändern.

So fügen Sie einen Warenkorb zu einer WordPress-Webseite hinzu:

Gehen Sie zu Ihrem WordPress-Dashboard → Design → Anpassen.
Klicken Sie in der Seitenleiste auf Online-Shop.
Klicken Sie auf Warenkorb-Widget.
Wählen Sie aus, wo Sie den Warenkorb anzeigen möchten und legen Sie auf dieser Seite das Layout, das Symbol sowie einige andere Einstellungen fest.
Wählen Sie die entsprechende Option zum Anzeigen eines leeren Warenkorbs, wenn Sie das Warenkorb-Symbol auch dann anzeigen möchten, wenn sich keine Produkte im Warenkorb befinden.

Anpassen des Erscheinungsbilds des Warenkorbs in WordPress

So ändern Sie das Erscheinungsbild des Warenkorb-Symbols, das einer WordPress-Seite hinzugefügt wurde:

Gehen Sie zu Ihrem WordPress-Dashboard → Design → Anpassen.
Klicken Sie in der Seitenleiste auf Online-Shop → Warenkorb-Widget.
Passen Sie die Einstellungen des Warenkorb-Widgets nach Ihren Vorstellungen an. Das Erscheinungsbild des Warenkorb-Widgets ändert sich in der Vorschau, sobald Sie neue Einstellungen vornehmen.
Sobald Sie Ihre bevorzugte Ansicht gefunden haben, klicken Sie auf Veröffentlichen.

Tip: Um das standardmäßig hinzugefügte Warenkorb-Widget auszublenden, wählen Sie „Nicht anzeigen“ in der ersten Design-Option. Wenn Sie Ihren Shop für Besucher Ihrer Webseite hervorheben möchten, wählen Sie „Auf allen Seiten anzeigen“. Das Warenkorb-Symbol zeigt an, dass die Webseite einen Shop besitzt.