Hvor du tilføjer den
Ram kun offentlige klasser
cart-external-*-klasser. Editoren autoudfylder disse og advarer dig mod resten:
cart-external-*: det offentlige, understøttede mål. Brug disse. De har ingen styling i sig selv, så de findes udelukkende, for at din CSS kan hægte sig på.cart-internal-*: cartens eget maskineri, hvor al dens indbyggede styling ligger. Editoren markerer selektorer mod dem som fejl. De ændres ikke tilfældigt, da alle eksisterende carts afhænger af dem, men det er cartens ret at ændre dem snarere end en kontrakt med dig. Restyl i stedet gennemcart-external-*-tvillingen.- Andre
cart-*-klasser, editoren ikke genkender, markeres som advarsler.
Du vil se
cart-internal-*-klasser i markuppen, inklusive i hver bloks standard-tilpassede skabelon. Det er forventet: de er det, der giver en blok dens indbyggede udseende. Reglen her handler om selektorer, du skriver i dette panel, ikke klassenavne, carten renderer.Hvis du skriver en tilpasset skabelon, der ændrer en bloks DOM-struktur, se Styling af en tilpasset skabelon for hvilke klassenavne du skal beholde, og hvilke du skal droppe.Shadow DOM: carten er selvstændig
- Dit temas CSS kan ikke sive ind i carten, og cartens CSS kan ikke sive ud, så din tilpassede CSS er automatisk afgrænset til carten og kolliderer ikke med resten af dit site.
- Dine selektorer skal referere til elementer og klasser inde i carten. Selektorer rettet mod sideelementer uden for carten kan ikke nå ind.
document.querySelector kan heller ikke se ind i skuffen. Et script, der vil have fat i et cart-element, skal gå gennem shadowRoot, og det rammer de samme cart-external-*-klasser.
Hvornår du skal bruge designindstillinger i stedet
Hvor du kan gå hen herfra
- Designindstillinger: de indbyggede stylingkontroller, og det første du bør prøve.
- Tilpassede skabeloner: erstat en bloks markup helt, når CSS alene ikke kan nå derhen.
- Cart SDK: til adfærd snarere end udseende.