Aggiungi HTML o CSS personalizzato al pannello laterale del carrello

Utilizza prima le impostazioni integrate per colori, immagini e testo. L'HTML e il CSS personalizzati sono disponibili per le modifiche che richiedono un markup o uno stile personalizzato.

Aggiungi un blocco HTML personalizzato

1. Modifica il carrello e apri Carrello.
2. Utilizza Aggiungi HTML personalizzato nell'area dei contenuti o del piè di pagina.
3. Inserisci il markup in HTML, quindi posiziona il blocco con la relativa maniglia di trascinamento all'interno di quell'area. Il campo è un editor di codice con numeri di riga e tag colorati; Formatta sistema l'indentazione.
4. Controlla il layout, salva e verifica il negozio.

Puoi aggiungere fino a 10 blocchi HTML personalizzati per area. L'editor accetta fino a 10.000 caratteri per blocco; anche la configurazione completa del carrello ha un limite di dimensioni.

Aggiungi CSS personalizzato

Apri Stile, scorri fino a Avanzate in fondo e apri CSS personalizzato. Applica le regole al pannello laterale, ad esempio con #bxc-drawer, in modo che non modifichino involontariamente lo stile del resto del tema. Conserva una copia del CSS esistente prima di sostituirlo. Il campo accetta fino a 10.000 caratteri.

Il campo è un editor di codice: colora il CSS, suggerisce i nomi delle proprietà mentre digiti e contrassegna in rosso una regola che non riesce a leggere, così una parentesi graffa mancante viene mostrata prima del salvataggio. Formatta riordina l'indentazione.

Prova una nota semplice

Questo esempio aggiunge una nota del brand. Utilizza il blocco HTML per il relativo contenuto:

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

Poi aggiungi una regola con ambito limitato in CSS personalizzato per dare alla nota un bordo sinistro:

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

Salva e controlla la nota, i controlli dei prodotti e il pulsante di checkout su desktop e telefono.

Il comportamento dell'anteprima e quello del negozio differiscono

L'anteprima mostra il layout dell'HTML personalizzato, ma rimuove script e attributi interattivi. Nel negozio, il markup personalizzato viene trattato come codice del tema. I tag <script> inseriti normalmente non vengono eseguiti automaticamente, quindi questo campo non è uno strumento generico per installare script.

Incolla solo codice che conosci o che hai fatto controllare dal tuo sviluppatore. Controlla il risultato pubblicato su desktop e dispositivi mobili, inclusi l'aggiunta di un articolo e l'apertura del checkout. Se il pannello laterale si danneggia dopo una modifica, rimuovi quel codice personalizzato, salva di nuovo e ripeti il test.