In dieser Anleitung finden Sie die HTML-Parameter, um den Warenkorb auf allen Unterseiten Ihrer Homepage zu platzieren. Die Parameter sind Teil des Einbett-Codes Ihres Webshops und sehen folgendermaßen aus:
cartType: 'overlay' cartColor: '#56AAD8' showMobileCart: true flatBackgroundColor: 'transparent' overlayBackgroundColor: '#F3F3F3' mobileBackgroundColor: '#FFFFFF' overlayPosition: 75
Wenn Sie den Warenkorb auf Ihrer Websitebuilder-Seite zeigen möchten, können Sie die Code-Komponente verwenden.
Die Platzierung der Code-Komponente sollte „Normal“ oder „Vor dem schließenden </body>“ sein. Wenn Sie die Code-Komponente in Ihrem Template platzieren, wird sie auf allen Seiten sichtbar sein, die dieses Template verwenden.
Welche Parameter kann ich ändern?
Sie können folgende Parameter ändern:
- Wählen Sie einen Warenkorb-Typ
- Warenkorb-Farbe setzen
- Warenkorb in mobiler Ansicht zeigen
- Hintergrundfarbe des flachen Einkaufswagens
- Hintergrundfarbe des Overlay-Warenkorbs
- Hintergrundfarbe des mobilen Warenkorbs
- Overlay Position auf der Seite
Wir haben aufgelistet, was jeder Parameter tut und wie Sie diesen anpassen können.
Wählen Sie einen Warenkorb-Typ
Sie können aus zwei Einkaufswagen-Varianten auswählen:
- Overlay - bleibt an der Stelle auf Ihrer Seite, die Sie gewählt haben. Es bleibt sichtbar, auch wenn Sie nach oben oder unten scrollen.
- flach - das Icon wird auf der vorgesehenen Stelle auf Ihrer Seite platziert und fixiert. Es ist nicht sichtbar, wenn Sie nach untern scrollen.
Wählen Sie zwischen „Overlay“ oder „Flach“. Wenn Sie nichts wählen, wird auf den Standardwert „Overlay“ zurückgesetzt.
Beispiel:
cartType: 'overlay'
Warenkorb-Farbe setzen
Dies legt die Farbe aller Warenkorb-Typen fest: flach, Overlay und mobil. Der Standardwert ist #56AAD8, Sie können diesen aber durch einen beliebigen HTML-Farbcode ersetzen.
Beispiel:
cartColor: '#56AAD8'
Warenkorb in mobiler Ansicht zeigen
Mit dieser Einstellung können Sie den Warenkorb auf Mobilgeräten ausblenden. Setzen Sie den Wert auf true, um den Warenkorb in der mobilen Ansicht anzeigen zu lassen, oder auf false, um ihn zu verstecken.
Beispiel:
showMobileCart: true
Hintergrundfarbe des flachen Warenkorbs
Diese Option ändert die Hintergrundfarbe des flachen Warenkorbs. Es wird ein kleines Quadrat um das Einkaufswagensymbol gelegt. Die Standardeinstellung ist transparent, Sie können diese aber durch einen beliebigen HTML-Farbcode ersetzen.
Beispiel:
flatBackgroundColor: 'transparent'
Hintergrundfarbe des Overlay-Warenkorbs
Diese Einstellung ändert die Hintergrundfarbe des Overlay-Warenkorbs. Es wird ein kleines Quadrat um das Warenkorb-Symbol gelegt. Die Standardeinstellung ist hellgrau (#F3F3F3), Sie können diese aber durch einen beliebigen HTML Farbcode ersetzen.
Beispiel:
overlayBackgroundColor: '#F3F3F3'
Hintergrundfarbe des mobilen Warenkorbs
Diese Einstellung ändert die Hintergrundfarbe des mobilen Warenkorbs. Es wird ein kleines Quadrat um das Warenkorb-Symbol gelegt. Die Standardeinstellung ist weiß (#FFFFFF), Sie können diese aber durch einen beliebigen HTML-Farbcode ersetzen.
Beispiel:
mobileBackgroundColor: '#FFFFFF'
Overlay-Position auf der Seite
Diese Einstellung legt die vertikale Position des Overlay-Warenkorbs fest. Je höher die Prozentangabe, desto niedriger wird der Warenkorb auf der Seite platziert. Die Prozentangabe wird basierend auf der Bildschirmhöhe berechnet. Geben Sie einen Wert zwischen 1 und 100 an.
Beispiel:
overlayPosition: 75