Combine o painel do carrinho com a sua loja

Abra o design do carrinho e selecione Estilo. Essa aba controla a aparência geral do painel e como ele é aberto.

Escolha as cores

A linha Cores do tema oferece cores do seu tema publicado. Escolha uma e selecione um Estilo de paleta: Limpa, Suave ou Escura. Você também pode escolher uma cor personalizada ou experimentar uma cor aleatória.

Padrão restaura as cores padrão, mantendo o layout, como a largura do painel e o raio dos cantos.

Altere as cores de um bloco

Em Editar cores, a primeira linha, Painel, contém as cores base: fundo, texto, destaque, texto do destaque, texto suave, economia e bordas. Abaixo dela, cada bloco do painel tem sua própria linha, como o cabeçalho, a barra de anúncio, a barra de recompensas, os upsells, o rodapé e o botão de checkout. A linha de um bloco aparece enquanto esse bloco está ativado.

Deixe vazia a cor de um bloco, e ele seguirá as cores do painel. Escolher uma cor do tema, uma cor personalizada ou aleatória, ou Padrão, limpa todas as cores dos blocos, para que o painel comece com uma aparência limpa.

Defina o layout do painel

O cartão Layout define onde o painel fica e como ele se comporta:

• Posição do painel: escolha a borda esquerda ou direita.
• Layout do painel: Anexado fica junto à borda; Flutuante deixa espaço ao redor do painel e exibe Espaço das bordas, de 0 a 80 px.
• Altura do cabeçalho: Padrão ou Compacto. Compacto reduz pela metade o espaço acima e abaixo do título do carrinho, para que mais conteúdo caiba em telas pequenas.
• Largura do painel: de 280 a 700 px.
• Abrir o carrinho quando um produto é adicionado: consulte a abertura automática abaixo.

A prévia do editor mantém sua própria largura fixa para que os controles continuem utilizáveis. Salve e verifique a vitrine para avaliar a largura real do painel. Uma tela estreita limita o painel ao espaço disponível.

Defina a forma e o texto

O cartão Forma e texto contém os ajustes finais:

• Raio dos cantos: de 0 a 20 px.
• Tamanho do texto: de 90 a 120%. Ele dimensiona todo o texto do painel de uma só vez e mantém a fonte do seu tema.
• Sombras: ative ou desative os efeitos de profundidade.

Ajuste as imagens dos produtos

O formato da imagem pode ser Quadrado ou Retrato (3:4). Ele se aplica às imagens dos itens do carrinho e a todas as imagens de upsell, para que todo o drawer use o mesmo corte.

O card Imagens reúne todos os tamanhos de imagem em um só lugar: Tamanho da imagem do item do carrinho, Tamanho da imagem do upsell em lista (upsells nos layouts Lista vertical e Um por vez), Tamanho da imagem do carrossel e do upsell lateral (o layout Carrossel e todos os cards de upsell lateral) e Tamanho da imagem do adicional.

Borda nas imagens dos itens do carrinho adiciona uma linha fina ao redor de cada foto de produto no carrinho. Ative-a quando suas fotos tiverem fundo branco, para que se destaquem do drawer. Os novos carrinhos começam sem essa borda, e as imagens de upsell e de adicionais nunca recebem uma.

Controlar abertura automática

Abrir o carrinho quando um produto for adicionado fica no card Layout. Desativá-lo impede a abertura automática após uma adição; os clientes ainda podem abrir o drawer pelo ícone do carrinho.

Neste exemplo, uma cor de tema azul com as opções Com tonalidade e Flutuante dá ao drawer um fundo azul-claro e um espaçamento de 16px. Salve e confira a vitrine no desktop e no celular. Para alterações além desses controles, consulte HTML e CSS personalizados. O CSS personalizado fica na parte inferior de Estilo, em Avançado.