Eigenes HTML oder CSS zum Warenkorb-Drawer hinzufügen

Verwende zuerst die integrierten Einstellungen für Farben, Bilder und Text. Eigenes HTML und CSS stehen für Änderungen zur Verfügung, die dein eigenes Markup oder deine eigene Gestaltung erfordern.

Benutzerdefinierten HTML-Block hinzufügen

1. Bearbeite deinen Warenkorb und öffne Warenkorb.
2. Verwende Benutzerdefiniertes HTML hinzufügen im Inhalts- oder Fußzeilenbereich.
3. Gib das Markup unter HTML ein und positioniere den Block anschließend mithilfe seines Ziehgriffs innerhalb dieses Bereichs. Das Feld ist ein Code-Editor mit Zeilennummern und farbigen Tags; Formatieren korrigiert die Einrückung.
4. Überprüfe das Layout, speichere und kontrolliere den Shop.

Du kannst pro Bereich bis zu 10 benutzerdefinierte HTML-Blöcke hinzufügen. Der Editor akzeptiert bis zu 10.000 Zeichen pro Block. Für die vollständige Warenkorbkonfiguration gilt ebenfalls eine Größenbegrenzung.

Benutzerdefiniertes CSS hinzufügen

Öffne Stil, scrolle nach unten zu Erweitert und öffne Benutzerdefiniertes CSS. Begrenze Regeln auf den Drawer, zum Beispiel mit #bxc-drawer, damit sie nicht unbeabsichtigt den Rest deines Themes neu gestalten. Bewahre eine Kopie des vorhandenen CSS auf, bevor du es ersetzt. Das Feld akzeptiert bis zu 10.000 Zeichen.

Das Feld ist ein Code-Editor: Er hebt dein CSS farblich hervor, schlägt während der Eingabe Eigenschaftsnamen vor und markiert eine Regel, die er nicht lesen kann, rot. So wird beispielsweise eine fehlende geschweifte Klammer vor dem Speichern angezeigt. Formatieren korrigiert die Einrückung.

Eine einfache Notiz ausprobieren

Dieses Beispiel fügt eine Markennotiz hinzu. Verwende für deren Inhalt den HTML-Block:

<p class="aurelia-cart-note">
  <strong>Aurelia Botanicals</strong><br>
  Everyday skincare essentials.
</p>

Füge anschließend unter „Benutzerdefiniertes CSS“ eine begrenzte Regel hinzu, um dieser Notiz einen linken Rand zu geben:

#bxc-drawer .aurelia-cart-note {
  border-left: 3px solid #334fb4;
  padding-left: 12px;
}

Speichere und prüfe die Notiz, die Produktsteuerungen und den Checkout-Button auf Desktop und Smartphone.

Vorschau und Verhalten im Onlineshop unterscheiden sich

Die Vorschau zeigt das Layout des benutzerdefinierten HTML, entfernt jedoch Skripte und interaktive Attribute. Im Onlineshop wird benutzerdefiniertes Markup wie Theme-Code behandelt. Gewöhnliche eingefügte <script>-Tags werden nicht automatisch ausgeführt, daher ist dieses Feld kein allgemeiner Installer für Skripte.

Füge nur Code ein, den du verstehst oder mit deinem Entwickler geprüft hast. Prüfe das veröffentlichte Ergebnis auf Desktop- und Mobilgeräten, einschließlich des Hinzufügens eines Artikels und des Öffnens des Checkouts. Wenn der Drawer nach einer Änderung nicht mehr funktioniert, entferne den benutzerdefinierten Code, speichere erneut und teste noch einmal.