Adicione HTML ou CSS personalizado ao painel lateral do carrinho

Use primeiro as configurações integradas para cores, imagens e texto. O HTML e o CSS personalizados estão disponíveis para alterações que exigem sua própria marcação ou estilo.

Adicione um bloco de HTML personalizado

1. Edite seu carrinho e abra Carrinho.
2. Use Adicionar HTML personalizado na área de conteúdo ou rodapé.
3. Insira a marcação em HTML e posicione o bloco com sua alça de arrastar dentro dessa área. O campo é um editor de código com números de linha e tags coloridas; Formatar ajusta a indentação.
4. Revise o layout, salve e confira a vitrine.

Você pode adicionar até 10 blocos de HTML personalizado por área. O editor aceita até 10.000 caracteres por bloco; a configuração completa do carrinho também tem um limite de tamanho.

Adicione CSS personalizado

Abra Estilo, role até Avançado na parte inferior e abra CSS personalizado. Restrinja as regras ao painel lateral, por exemplo, usando #bxc-drawer, para que elas não alterem o estilo do restante do seu tema sem intenção. Mantenha uma cópia do CSS existente antes de substituí-lo. O campo aceita até 10.000 caracteres.

O campo é um editor de código: ele colore seu CSS, sugere nomes de propriedades enquanto você digita e marca em vermelho uma regra que não consegue ler, para que uma chave ausente seja identificada antes de você salvar. Formatar ajusta a indentação.

Experimente uma observação simples

Este exemplo adiciona uma observação da marca. Use o bloco de HTML para inserir o conteúdo:

<p class="aurelia-cart-note">
  <strong>Aurelia Botanicals</strong><br>
  Everyday skincare essentials.
</p>

Depois, adicione uma regra específica no CSS personalizado para dar uma borda à esquerda a essa observação:

#bxc-drawer .aurelia-cart-note {
  border-left: 3px solid #334fb4;
  padding-left: 12px;
}

Salve e confira a observação, os controles dos produtos e o botão de checkout no computador e no celular.

O comportamento da prévia e da vitrine é diferente

A prévia mostra o layout do HTML personalizado, mas remove scripts e atributos interativos. Na vitrine, a marcação personalizada é tratada como código do tema. As tags <script> inseridas normalmente não são executadas automaticamente, portanto este campo não é um instalador de scripts genérico.

Cole apenas códigos que você entende ou que foram revisados com seu desenvolvedor. Confira o resultado publicado no computador e no celular, incluindo a adição de um item e a abertura do checkout. Se o painel lateral apresentar problemas após uma alteração, remova esse código personalizado, salve novamente e teste outra vez.