Skip to main content
Wanneer de ingebouwde designinstellingen niet ver genoeg gaan, voeg je je eigen aangepaste CSS toe om de cart te stylen.

​
Waar je het toevoegt

Open in de cart-editor Cart settings → Custom CSS. Je CSS geldt voor de hele cart en wordt na de basisstijlen van de cart geladen, dus jouw regels krijgen voorrang.

​
Richt je alleen op publieke classes

Style de cart met de publieke cart-external-*-classes. De editor vult deze automatisch aan en waarschuwt je voor de rest:
  • cart-external-*: het publieke, ondersteunde doel. Gebruik deze. Ze dragen zelf geen styling, dus ze bestaan puur om je CSS aan vast te haken.
  • cart-internal-*: het interne raderwerk van de cart, waar alle ingebouwde styling zit. De editor markeert selectors hiertegen als fouten. Ze worden niet zomaar gewijzigd, omdat elke bestaande cart ervan afhankelijk is, maar ze zijn van de cart om te wijzigen en geen contract met jou. Style in plaats daarvan via de cart-external-*-tegenhanger.
  • Andere cart-*-classes die de editor niet herkent, worden als waarschuwingen gemarkeerd.
Je ziet cart-internal-*-classes in de markup, ook in de standaard aangepaste template van elk blok. Dat is normaal: zij geven een blok zijn ingebouwde uiterlijk. De regel hier gaat over selectors die jij schrijft in dit paneel, niet over classnames die de cart rendert.Schrijf je een aangepaste template die de DOM-structuur van een blok verandert, zie dan Een aangepaste template stylen voor welke classnames je moet behouden en welke je kunt laten vallen.

​
Shadow DOM: de cart is zelfstandig

Op de storefront rendert de hele cart binnen zijn eigen shadow DOM. Dit betekent:
  • De CSS van je thema kan niet in de cart lekken, en de CSS van de cart kan niet naar buiten lekken, dus je aangepaste CSS is automatisch beperkt tot de cart en botst niet met de rest van je site.
  • Je selectors moeten verwijzen naar elementen en classes binnen de cart. Selectors gericht op pagina-elementen buiten de cart komen er niet in.
Dezelfde grens geldt voor JavaScript: document.querySelector kan ook niet in de drawer kijken. Een script dat een cart-element wil bereiken, moet via shadowRoot gaan en target dezelfde cart-external-*-classes.

​
Wanneer je beter designinstellingen gebruikt

Voor kleuren, afrondingen, spacing en breedte zijn de ingebouwde designinstellingen eenvoudiger en veiliger, dus grijp alleen naar aangepaste CSS voor wat zij niet dekken.

​
Volgende stappen