Skip to main content
O design do Aftersell Cart funciona em dois níveis: configurações globais que estilizam o carrinho inteiro e substituições por bloco que refinam um bloco individual.

​
Configurações de design globais

Abra Cart settings na barra lateral do editor para acessar o design global do carrinho. As configurações estão agrupadas em Design, Buttons e Layout.

​
Design

​
Buttons

​
Layout

​
Substituições de design por bloco

Todo bloco, exceto Custom code, tem suas próprias substituições de design por bloco no final do seu painel de configurações — sob o título Design em todos os blocos, exceto Express payments, cujas substituições ficam em seções sem rótulo de Style e Spacing. (Custom code não tem painel de configurações — o bloco é o código, então ele mostra apenas uma aba Code.) Elas controlam coisas como estilo, espaçamento e outras configurações de design específicas do bloco. Essas configurações de design por bloco, quando em branco, recorrem à configuração global daquela propriedade. Muitos blocos também incluem uma seção Text dentro do seu painel de Design, onde você pode definir a tipografia de elementos de texto específicos daquele bloco — família da fonte, tamanho, altura da linha e espaçamento entre caracteres. Blocos com vários elementos de texto (como Notes e Empty cart) exibem um seletor Text element para você estilizar cada um independentemente.
Pré-visualização animada do painel de configurações de Design por bloco no Cart Editor

​
Fontes e posição do drawer

  • Fontes: por padrão, o carrinho herda a fonte do seu tema. Você pode definir uma família de fonte personalizada para elementos de texto selecionados (como o título do produto e o cabeçalho de upsells) na seção Text das configurações de Design de cada bloco — veja Bloco Cart items e Bloco Upsells para mais detalhes.
  • Posição do drawer: a largura do drawer é ajustável (Desktop width, acima); não há configuração de posição esquerda/direita.

​
Configurações de comportamento

Além da estilização, Cart settings também contém opções de comportamento — abrir o drawer ao adicionar ao carrinho e os seletores de tema que mantêm sua loja sincronizada. Veja Configurações do carrinho.

​
Quando usar CSS personalizado em vez disso

As configurações nativas cobrem os casos comuns. Para qualquer coisa além delas — mirar um elemento específico, espaçamento personalizado, ajustes responsivos — use CSS personalizado.