Skip to main content
Quando le impostazioni di design integrate non bastano, aggiungi il tuo CSS personalizzato per stilizzare il carrello.

​
Dove aggiungerlo

Nel cart editor, apri Cart settings → Custom CSS. Il tuo CSS si applica all’intero carrello e viene caricato dopo gli stili di base del carrello, quindi le tue regole hanno la precedenza.

​
Punta solo alle classi pubbliche

Stilizza il carrello usando le sue classi pubbliche cart-external-*. L’editor le suggerisce in autocompletamento e ti mette in guardia dalle altre:
  • cart-external-*: il target pubblico e supportato. Usa queste. Non portano alcuno stile proprio, quindi esistono solo perché il tuo CSS possa agganciarvisi.
  • cart-internal-*: la struttura interna del carrello, dove risiede tutto il suo stile integrato. L’editor segnala come errori i selettori che le usano. Non vengono cambiate alla leggera, dato che ogni carrello esistente dipende da esse, ma sono di proprietà del carrello, non un contratto con te. Ristilizza invece attraverso la gemella cart-external-*.
  • Altre classi cart-* che l’editor non riconosce vengono segnalate come avvisi.
Vedrai classi cart-internal-* nel markup, incluso il template personalizzato predefinito di ogni blocco. È normale: sono ciò che dà a un blocco il suo aspetto integrato. La regola qui riguarda i selettori che scrivi in questo pannello, non i nomi di classe che il carrello renderizza.Se stai scrivendo un template personalizzato che cambia la struttura DOM di un blocco, consulta Stilizzare un template personalizzato per sapere quali nomi di classe mantenere e quali eliminare.

​
Shadow DOM: il carrello è autonomo

Sul negozio, l’intero carrello viene renderizzato dentro il proprio shadow DOM. Questo significa che:
  • Il CSS del tuo tema non può penetrare nel carrello, e il CSS del carrello non può uscirne, quindi il tuo CSS personalizzato è automaticamente limitato al carrello e non entrerà in conflitto con il resto del tuo sito.
  • I tuoi selettori devono fare riferimento a elementi e classi dentro il carrello. I selettori mirati a elementi della pagina fuori dal carrello non possono raggiungerlo.
Lo stesso confine vale per JavaScript: nemmeno document.querySelector può vedere dentro il drawer. Uno script che vuole raggiungere un elemento del carrello deve passare da shadowRoot, e punta a queste stesse classi cart-external-*.

​
Quando usare invece le impostazioni di design

Per colori, raggi, spaziature e larghezza, le impostazioni di design integrate sono più semplici e sicure, quindi ricorri al CSS personalizzato solo per ciò che non coprono.

​
Dove andare dopo