Aangepaste HTML of CSS aan de winkelwagenlade toevoegen

Gebruik eerst de ingebouwde instellingen voor kleuren, afbeeldingen en tekst. Aangepaste HTML en CSS zijn beschikbaar voor wijzigingen waarvoor je eigen markup of stijl nodig hebt.

Een blok voor aangepaste HTML toevoegen

1. Bewerk je winkelwagen en open Winkelwagen.
2. Gebruik Aangepaste HTML toevoegen in het inhouds- of voettekstgebied.
3. Voer de markup in bij HTML en positioneer het blok vervolgens met de sleepgreep binnen dat gebied. Het veld is een code-editor met regelnummers en gekleurde tags; met Opmaak wordt de inspringing netjes gemaakt.
4. Controleer de lay-out, sla op en bekijk de webshop.

Je kunt maximaal 10 blokken voor aangepaste HTML per gebied toevoegen. De editor accepteert maximaal 10.000 tekens per blok; voor de volledige winkelwagenconfiguratie geldt ook een groottelimiet.

Aangepaste CSS toevoegen

Open Stijl, scrol onderaan naar Geavanceerd en open Aangepaste CSS. Beperk regels tot de lade, bijvoorbeeld met #bxc-drawer, zodat ze niet onbedoeld de rest van je thema opnieuw stylen. Bewaar een kopie van bestaande CSS voordat je deze vervangt. Het veld accepteert maximaal 10.000 tekens.

Het veld is een code-editor: je CSS krijgt kleurcodering, tijdens het typen worden eigenschapsnamen voorgesteld en een regel die niet kan worden gelezen, wordt rood gemarkeerd, zodat een ontbrekende accolade zichtbaar wordt voordat je opslaat. Met Opmaak wordt de inspringing netjes gemaakt.

Een eenvoudige notitie proberen

In dit voorbeeld wordt een merknotitie toegevoegd. Gebruik het HTML-blok voor de inhoud:

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

Voeg vervolgens een beperkte regel toe in Aangepaste CSS om die notitie een linkerrand te geven:

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

Sla op en controleer de notitie, productbediening en checkoutknop op desktop en telefoon.

Preview en gedrag in de webshop verschillen

De preview toont de lay-out van aangepaste HTML, maar verwijdert scripts en interactieve attributen. In de webshop wordt aangepaste markup behandeld als themacode. Gewone ingevoegde <script>-tags worden niet automatisch uitgevoerd, dus dit veld is geen algemene scriptinstallatie.

Plak alleen code die je begrijpt of samen met je ontwikkelaar hebt gecontroleerd. Controleer het gepubliceerde resultaat op desktop en mobiel, inclusief het toevoegen van een item en het openen van de checkout. Als de lade na een wijziging niet goed werkt, verwijder dan die aangepaste code, sla opnieuw op en test opnieuw.