> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Upsell & Cross Sell – Design e Styling > ℹ️ **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 ✨