Skip to main content
Quando as configurações de design nativas não vão longe o suficiente, adicione seu próprio CSS personalizado para estilizar o carrinho.

​
Onde adicionar

No Cart Editor, abra Cart settings → Custom CSS. Seu CSS se aplica ao carrinho inteiro e é carregado depois dos estilos base do carrinho, então suas regras têm precedência.

​
Mire apenas as classes públicas

Estilize o carrinho usando suas classes públicas cart-external-*. O editor faz autocompletar delas e desaconselha as demais:
  • cart-external-*: o alvo público e suportado. Use estas. Elas não carregam estilização própria, então existem puramente para o seu CSS se ancorar.
  • cart-internal-*: a estrutura interna do carrinho, onde vive toda a estilização nativa dele. O editor marca seletores contra elas como erros. Elas não são alteradas por acaso, já que todo carrinho existente depende delas, mas pertencem ao carrinho e não são um contrato com você. Reestilize pela classe gêmea cart-external-* em vez disso.
  • Outras classes cart-* que o editor não reconhece são marcadas como avisos.
Você verá classes cart-internal-* na marcação, inclusive no template personalizado padrão de cada bloco. Isso é esperado: elas são o que dá a um bloco sua aparência nativa. A regra aqui é sobre os seletores que você escreve neste painel, não sobre os nomes de classe que o carrinho renderiza.Se você estiver escrevendo um template personalizado que altera a estrutura DOM de um bloco, veja Estilizando um template personalizado para saber quais nomes de classe manter e quais descartar.

​
Shadow DOM: o carrinho é autocontido

Na loja, o carrinho inteiro é renderizado dentro do seu próprio shadow DOM. Isso significa que:
  • O CSS do seu tema não pode vazar para dentro do carrinho, e o CSS do carrinho não pode vazar para fora, então seu CSS personalizado fica automaticamente restrito ao carrinho e não vai conflitar com o resto do seu site.
  • Seus seletores devem referenciar elementos e classes dentro do carrinho. Seletores voltados a elementos da página fora do carrinho não alcançam o interior.
O mesmo limite se aplica ao JavaScript: document.querySelector também não consegue enxergar dentro do drawer. Um script que precisa de um elemento do carrinho tem que passar por shadowRoot, e ele mira essas mesmas classes cart-external-*.

​
Quando usar as configurações de design em vez disso

Para cores, raios, espaçamento e largura, as configurações de design nativas são mais simples e seguras, então recorra ao CSS personalizado apenas para o que elas não cobrem.

​
Por onde continuar