Lägg till anpassad HTML eller CSS i kundvagnens sidopanel

Använd först de inbyggda inställningarna för färger, bilder och text. Anpassad HTML och CSS är tillgängliga för ändringar som kräver egen kod eller styling.

Lägg till ett block för anpassad HTML

1. Redigera kundvagnen och öppna Kundvagn.
2. Använd Lägg till anpassad HTML i innehålls- eller sidfotsområdet.
3. Ange koden i HTML och placera sedan blocket i området med hjälp av dess draghandtag. Fältet är en kodredigerare med radnummer och färgade taggar. Formatera justerar indragningen.
4. Granska layouten, spara och kontrollera butiken.

Du kan lägga till upp till 10 block med anpassad HTML per område. Redigeraren accepterar upp till 10 000 tecken per block. Hela kundvagnskonfigurationen har också en storleksgräns.

Lägg till anpassad CSS

Öppna Stil, bläddra längst ner till Avancerat och öppna Anpassad CSS. Avgränsa regler till sidopanelen, till exempel med #bxc-drawer, så att de inte oavsiktligt ändrar stilen på resten av ditt tema. Spara en kopia av befintlig CSS innan du ersätter den. Fältet accepterar upp till 10 000 tecken.

Fältet är en kodredigerare: den färglägger din CSS, föreslår egenskapsnamn medan du skriver och markerar en regel som den inte kan läsa med rött, så att en saknad klammerparentes visas innan du sparar. Formatera justerar indragningen.

Prova en enkel anteckning

Det här exemplet lägger till en varumärkesanteckning. Använd HTML-blocket för dess innehåll:

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

Lägg sedan till en avgränsad regel i Anpassad CSS för att ge anteckningen en vänsterkant:

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

Spara och kontrollera anteckningen, produktkontrollerna och kassaknappen på dator och telefon.

Förhandsvisningens och butikens beteende skiljer sig

Förhandsvisningen visar layouten för anpassad HTML men tar bort skript och interaktiva attribut. I butiken behandlas anpassad kod som temakod. Vanliga infogade <script>-taggar körs inte automatiskt, så det här fältet är inte en generell skriptinstallerare.

Klistra bara in kod som du förstår eller har granskat tillsammans med din utvecklare. Kontrollera det publicerade resultatet på dator och mobil, inklusive att lägga till en artikel och öppna kassan. Om sidopanelen slutar fungera efter en ändring tar du bort den anpassade koden, sparar igen och testar på nytt.