ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

A aba Design lhe dá controle total sobre como seu Upsell & Cross Sell widget olha e sente em sua loja. Desde cores de fundo e espaçamento até tipografia e estilo de botão — cada parte visual do widget pode ser personalizada para combinar com sua marca.

Cada configuração upsell (página do produto, página do carrinho, gaveta do carrinho, ou posição personalizada) tem a sua próprias configurações de design independentes, assim você pode estilo um widget de gaveta de carrinho diferente de um widget de página de produto ✨

A maioria das configurações relacionadas com as cores incluem:

• Um visual Selector de Cores
• A Código Hex entrada

Isso torna mais fácil se você prefere escolher cores visualmente ou colar as cores exatas da sua marca.

⚠️ Antes de começar

Para configurar as configurações do Design:

→ Abrir um existente Upsell & Cross Sell configuração → Ou criar uma nova configuração primeiro

Então abra o Desenho aba no topo da página de configuração.

ℹ️ As configurações de design só mudam como o widget looks. O que o widget diz (títulos, texto de botão) está configurado na aba Conteúdo, e pode ser traduzido em Tradução.

👀 Visualização ao Vivo

Enquanto você trabalha dentro da guia Design, Visualização ao vivo é mostrado ao lado das configurações. Cada mudança que você faz é refletida na pré-visualização imediatamente — não é necessário salvar para ver como as coisas parecem.

• Antevisão do Ecrã – Mostra como o widget aparece em telas de desktop.
• Visualização Móvel – Mostra o widget dentro de um quadro de tamanho móvel, para que você possa verificar a legibilidade em dispositivos menores.

💡 A pré-visualização usa seus produtos de upsell real, título e texto de botão, então o que você vê está muito perto do que os clientes verão em sua loja.

🖼️ Contexto

• O que faz: Controla a aparência de fundo da seção de widget upsell.
• Opções disponíveis:
• • Cor única – Aplicar uma cor de fundo sólida.
  • Gradiente – Misturar duas cores suavemente.

🎨 Cor única

• Escolha uma cor usando o Selector de Cores ou insira manualmente uma Código Hex.

🌈 Gradiente

• Grau de ângulo de gradiente: Controla a direção do gradiente (0–360°).
• Recolhedores de cores iniciais e finais: Selecione as duas cores usadas no gradiente.

💡 Um gradiente sutil pode ajudar a seção upsell se destacar do resto da página sem entrar em conflito com o seu tema.

📏 Espaço

Esta seção controla o espaçamento dentro e fora do widget upsell.

• Inside top / bottom: Adiciona espaçamento interno entre o conteúdo do widget e as bordas da seção.
• Exterior superior / inferior: Adiciona espaçamento fora da seção para separá-la dos elementos da página circundante.

Todos os valores são definidos em pixels (px).

💡 Utilização Fora espaçamento para criar espaço para respirar entre o widget e elementos como o botão Adicionar ao Carrinho, e Dentro espaçamento para evitar que o conteúdo toque nas bordas da secção.

🔤 Tipografia

Esta seção controla como todos os elementos de texto aparecem dentro do widget upsell.

🏷️ Upsell Title

• Upsell Tamanho do título: Controla o tamanho da secção upsell (p. ex. “Frequentemente comprados juntos”).
• Upsell Cor do título: Muda a cor do cabeçalho da secção.

ℹ️ O próprio texto do título do upsell é editado no Conteúdo tab, aqui não.

📦 Denominação do produto

• Tamanho do título do produto: Controla o tamanho de cada nome de produto dentro do widget.
• Cor do título do produto: Muda a cor do título do produto.

💰 Preço

• Tamanho do preço: Controla o tamanho do texto do preço do produto.
• Cor do preço: Muda a cor do preço do produto.

➡️ Seta

• Tamanho da seta: Controla o tamanho das setas de navegação da barra deslizante.
• Cor da seta: Muda a cor da seta.

ℹ️ Setas de navegação só aparecem quando o elemento contém mais de um produto Deslizar.

🔘 Botão

Esta seção personaliza o botão upsell call-to-action (e.g. “Adicionar ao Carrinho”) indicado para cada produto.

🎨 Cor do Botão

• Muda a cor de fundo do botão. A borda do botão usa automaticamente a mesma cor.

🔤 Tamanho e cor do texto do botão

• Controla o tamanho e a cor do texto dentro do botão.

⭕ Canto Radio & Botão Estilo

• Raio do canto: Define como os cantos arredondados do botão aparecem, em pixels.
• Estilo do botão: Mudar rapidamente entre Quadrado, Arredondado, e Totalmente arredondado.

ℹ️ Estas duas configurações permanecem em sincronia automaticamente:

• Escolher um Estilo do botão aplica um raio de canto correspondente.
• Dactilografar a Raio do canto valor atualiza o estilo — valores baixos tornam-se Quadrado, valores médios tornam-se Arredondado, e altos valores se tornam Totalmente arredondado.

💪 Peso da Fonte

• Controla quão negrito ou claro o texto do botão aparece.
• Selecionar Herdeira para seguir o peso de fonte existente do seu tema, ou escolher um peso específico de 100 (pequeno) a 900 (atrevido).

✍️ Estilo da Fonte

• Alternar entre:
• • Normal
  • Itálico
  • Sublinhado

💾 Salvar e publicar seu projeto

As mudanças de design não são ao vivo até serem salvas.

1. Faça suas alterações no Desenho tab — as actualizações de antevisão ao vivo instantaneamente.
2. Clique Gravar na barra de salvamento no topo da página.
3. Certifique-se que o upsell é Publicado então o design atualizado aparece em sua loja.

⚠️ Atenção: Os valores de cor inseridos como códigos hex são validados ao salvar. Se um código hex é inválido (por exemplo, faltando o # ou contendo caracteres inválidos), salvar será bloqueado e uma mensagem de erro irá destacar o campo que precisa ser corrigido.

ℹ️ Se o seu design for salvo e publicado, mas o widget em si não estiver visível na frente da loja, a causa geralmente está relacionada com incorporação de aplicativos, colocação ou direcionamento — veja Upsell & Cross Sell não está a mostrar na minha loja.

🛍️ Como as mudanças de design refletem na frente da loja

Quando você salva uma configuração publicada, o aplicativo atualiza sua loja automaticamente. O widget storefront lê suas configurações de Design e as aplica em todos os lugares que o widget renderiza:

• Contexto → Preenche a seção de widget com sua única cor ou gradiente.
• Espaço → Aplica seu enchimento interno e margens externas em torno do widget.
• Tipografia → Estilos o título upsell, títulos de produto, preços e setas de navegação.
• Botão → Estilos botão Adicionar ao Carrinho de cada produto, incluindo o raio de canto, peso da fonte e estilo de fonte.

Porque cada tipo de configuração (página do produto, página do carrinho, gaveta do carrinho, posição personalizada) armazena seu próprio projeto, mudando uma configuração nunca afeta a aparência dos outros.

🚀 Resultado Final

Uma vez configurado com sucesso, o Desenho & Styling configurações ajudam os comerciantes a criar uma experiência de compras mais visualmente envolvente, profissional e focada na conversão.

Com personalização de estilo adequado no lugar:

✅ O widget upsell se sente alinhado com sua marca de loja
✅ Recomendações de produtos tornam-se mais perceptíveis e envolventes
✅ Preços e títulos de produtos permanecem legíveis tanto no desktop quanto no celular
✅ Os botões CTA tornam-se mais atraentes visualmente
✅ Cada colocação pode ter seu próprio olhar e sensação
✅ Os clientes experimentam uma interface mais polida e confiável

Usando estas opções de design e estilo de forma eficaz pode melhorar muito o engajamento do cliente, apresentação storefront e potencial de conversão global ✨

Actualizado em: 15/09/2026