Skip to main content
O módulo Design permite personalizar a aparência do seu carrinho, incluindo layout, cores da marca e estilos de botão.

​
Geral

​
Herdar fontes do tema

Esta configuração permite que o Upcart use as fontes definidas nas configurações do seu tema da Shopify. Para ver suas escolhas de fonte atuais, abra o Editor de temas da Shopify e navegue até a seção Tipografia.

​
🚧 Prévia do carrinho 🚧

As fontes herdadas do seu tema não aparecerão na janela de prévia do Upcart, mas serão exibidas corretamente na sua loja ao vivo.

​
Mostrar preços riscados

Ative esta configuração para mostrar um preço riscado (também conhecido como Compare At Price) ao lado de cada item do carrinho. Isso reflete os preços com desconto, de forma semelhante às suas páginas de produto. Item do carrinho mostrando o preço original riscado ao lado do preço com desconto e da economia

​
Ativar linha de subtotal

Adiciona uma linha de subtotal ao carrinho. Ativar isso também revela um campo Subtotal text color em Colors, para que o subtotal possa ser estilizado separadamente do restante do texto do carrinho. Com a configuração desativada, esse campo de cor fica oculto.

​
Largura do carrinho

Controla a largura do drawer, definida separadamente para cada viewport:
  • Desktop - Default ou Wide
  • Mobile - Full (de borda a borda) ou Nearly full (um pequeno espaço na borda)

​
Cores

​
Cor de fundo

Define a cor de fundo principal do carrinho, excluindo o rodapé e os cards de upsell.

​
Cor de destaque do carrinho

Controla a cor de fundo do rodapé do carrinho e dos cards de itens de upsell. Configurações de Colors do Upcart com a cor de destaque do carrinho aplicada a cards de upsell rosa

​
Cor do texto do carrinho

Define a cor de todos os textos do carrinho, exceto o texto dos botões e o texto de economia, que são controlados separadamente.

​
Cor do texto de economia

Define a cor do texto de economia mostrado abaixo do preço do produto. Item do carrinho com o texto do valor de economia destacado em magenta

​
Cor do texto do subtotal

Define a cor da linha de subtotal. Este campo só aparece quando Enable subtotal line está ativado em General.

​
🚧 Prévia do carrinho 🚧

O editor de prévia pode não refletir a estilização final com precisão. O tema da sua loja pode incluir CSS personalizado que afeta o tamanho ou a cor do texto. Sempre verifique as alterações na sua loja ao vivo.

​
Configurações de botões

O Upcart oferece opções avançadas de estilização de botões, incluindo personalização específica para o botão de checkout. Isso inclui métodos para ajustes de CSS e integração com as ferramentas de branding da Shopify.

​
Raio dos cantos

Ajusta o arredondamento dos cantos dos botões, de 0 px a 40 px. 0 gera cantos retos e quadrados; 40 é o máximo de arredondamento do controle deslizante. O valor se aplica em conjunto ao botão de checkout, ao botão de upsell, ao botão de desconto e ao botão de upgrade.
O controle deslizante para em 40 px. Para um botão totalmente em formato de pílula, você precisa de CSS personalizado — veja Personalização avançada de CSS abaixo.
Controle deslizante de raio dos cantos definido em 16 pixels arredondando o botão de checkout

​
Cor do botão

Define a cor de fundo de todos os botões do carrinho, incluindo:
  • Botão de checkout
  • Botão “Add to Cart” de upsell
  • Botão “Apply” de desconto
  • Botão de upgrade de assinatura Você pode personalizar a cor desses botões pelo Cart Editor. Para personalizações mais avançadas, como modificações de CSS, consulte a seção de personalização avançada.

​
Cor do texto do botão

Especifica a cor do texto usada em todos os botões do carrinho.

​
Cor do texto do botão ao passar o mouse

Controla a cor do texto do botão quando um cliente passa o mouse sobre ele. Por exemplo, se definida como verde, o texto ficará verde ao passar o mouse.

​
Mostrar botão de continuar comprando

Adiciona um botão Continue shopping ao carrinho, permitindo que os clientes fechem o drawer e voltem a navegar sem usar o ícone de fechar.

​
Personalização avançada de CSS para botões de checkout

Para mudanças de design significativas, você pode usar código Custom CSS para modificar o botão de checkout:
  1. No Cart Editor, abra Settings e selecione a aba Custom CSS.
  2. Utilize o seletor CSS relevante, como .checkout. Exemplos de snippets CSS: Para criar um botão em formato de pílula:
    Para adicionar uma borda preta:
    Substitua .checkout pela classe CSS real do seu botão. Estilizações adicionais incluem efeitos de hover, padding, cores de texto ou fontes.

​
Integrando o branding da Shopify para personalização de botões

Se você usa a Shopify, pode atualizar o design do seu botão de checkout pelo admin da Shopify:
  1. Faça login no seu Shopify Admin.
  2. Navegue até Settings > Checkout > Customize.
  3. Utilize as opções de branding para modificar a fonte, o arredondamento ou a cor para um design harmonioso.
Prévia do cart drawer do Upcart com um botão Add de upsell e o botão de checkout