Skip to main content
Wenn die integrierten Design-Einstellungen nicht weit genug gehen, füge dein eigenes Custom CSS hinzu, um den Cart zu gestalten.

​
Wo du es hinzufügst

Öffne im Cart-Editor Cart settings → Custom CSS. Dein CSS gilt für den gesamten Cart und wird nach den Basis-Styles des Carts geladen, sodass deine Regeln Vorrang haben.

​
Nur öffentliche Klassen ansprechen

Gestalte den Cart über seine öffentlichen cart-external-*-Klassen. Der Editor vervollständigt diese automatisch und warnt dich vor allen anderen:
  • cart-external-*: das öffentliche, unterstützte Ziel. Verwende diese. Sie tragen selbst kein Styling und existieren also ausschließlich, damit sich dein CSS daran anheften kann.
  • cart-internal-*: die interne Struktur des Carts, in der sein gesamtes integriertes Styling liegt. Der Editor kennzeichnet Selektoren darauf als Fehler. Sie werden nicht leichtfertig geändert, da jeder bestehende Cart von ihnen abhängt, aber sie gehören dem Cart und sind kein Vertrag mit dir. Gestalte stattdessen über das cart-external-*-Pendant um.
  • Andere cart-*-Klassen, die der Editor nicht erkennt, werden als Warnungen gekennzeichnet.
Du wirst cart-internal-*-Klassen im Markup sehen, auch im Standard-Custom Template jedes Blocks. Das ist zu erwarten: Sie verleihen einem Block sein integriertes Aussehen. Die Regel hier betrifft Selektoren, die du in diesem Panel schreibst, nicht Klassennamen, die der Cart rendert.Wenn du ein Custom Template schreibst, das die DOM-Struktur eines Blocks ändert, findest du unter Ein Custom Template gestalten, welche Klassennamen du behalten und welche du weglassen solltest.

​
Shadow DOM: der Cart ist eigenständig

Im Storefront wird der gesamte Cart in seinem eigenen Shadow DOM gerendert. Das bedeutet:
  • Das CSS deines Themes kann nicht in den Cart eindringen, und das CSS des Carts kann nicht nach außen dringen — dein Custom CSS ist also automatisch auf den Cart begrenzt und kollidiert nicht mit dem Rest deiner Website.
  • Deine Selektoren sollten Elemente und Klassen innerhalb des Carts referenzieren. Selektoren, die auf Seitenelemente außerhalb des Carts zielen, greifen nicht hinein.
Dieselbe Grenze gilt für JavaScript: document.querySelector kann ebenfalls nicht in den Drawer hineinsehen. Ein Skript, das auf ein Cart-Element zugreifen will, muss über shadowRoot gehen und spricht dieselben cart-external-*-Klassen an.

​
Wann du stattdessen Design-Einstellungen verwenden solltest

Für Farben, Radien, Abstände und Breite sind die integrierten Design-Einstellungen einfacher und sicherer — greife also nur für das zu Custom CSS, was sie nicht abdecken.

​
Wie es weitergeht

  • Design-Einstellungen: die integrierten Styling-Steuerungen und das Erste, was du ausprobieren solltest.
  • Custom Templates: ersetze das Markup eines Blocks vollständig, wenn CSS allein nicht ausreicht.
  • Cart SDK: für Verhalten statt Aussehen.