ℹ️ 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 Hoppy Bundles oferece olhar e sentir em sua loja. De fontes e cores a bordas, botões, destaques de camadas e cartões de produto — quase todos os aspectos visuais de seus widgets de oferta podem ser personalizados para combinar com sua marca.

Nós fornecemos uma ampla gama de configurações para que você possa:

• Lançar rapidamente usando modelos e temas prontos
• Ou personalizar profundamente cada detalhe para combinar perfeitamente com sua loja

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

• Um seletor de cores (clique na amostra de cores para abri- lo)
• Uma entrada de código Hex (digite sua cor exata da marca diretamente)

Isso torna mais fácil se você prefere a seleção visual ou cores exatas da marca.

⚠️ Antes de começar

Para configurar as configurações do Design:

→ Abra uma oferta existente → Ou crie uma nova oferta primeiro

Então abra o Desenho tab dentro do editor de ofertas.

A guia Design está disponível para todos os tipos de oferta Hoppy Bundles:

• Oferta de Pacotes
• Quebra de Quantidades (Desconto Volume)
• Construa seu próprio pacote (BYOB)
• Compostos de produtos
• Upsell Slider
• Intervalo de Quantidade da Categoria

ℹ️ A guia Design parece ligeiramente diferente dependendo do tipo de oferta – este guia cobre cada seção e aponta as diferenças à medida que avançamos.

👀 Compreender a Página de Desenho

📍 Onde vive

Abra qualquer oferta e você verá abas no topo do editor — para a maioria dos tipos de oferta estes são Geral, Desenho, e & Colocação de Destino. Clique Desenho para abrir as configurações de estilo.

• Pela BYOB ofertas, as páginas são Geral, Seleccionar o Produto Lógica, e Desenho.

🖥️ Visualização ao Vivo

Cada editor de ofertas inclui um painel de antevisão ao vivo ao lado das configurações, mostrando ambos Antevisão do Ecrã e a Visualização Móvel. Como você muda qualquer configuração de design — uma cor, uma fonte, uma borda — as atualizações de visualização instantaneamente, então você sempre sabe exatamente como seu widget irá olhar antes de salvar.

ℹ️ A visualização mostra suas mudanças de estilo com produtos de amostra. Verifique sempre o look final na sua loja ao vivo após a publicação.

🎨 Modelos e Temas (Quantity Break)

Quantity Break ofertas vêm com estilos visuais prontos para que você não tem que projetar do zero.

🖼️ Modelos de Oferta

• O que faz: Quando você cria uma nova oferta de quebra de quantidade, você começa escolhendo um modelo de oferta pronto Selecione sua oferta preferida. Cada modelo vem com seu próprio design pré-estilizado (cor, tamanhos e estilos) que você pode personalizar completamente depois.
• Modelos disponíveis:
• • Agrupar & Gravar – aplica um novo Verde tema colorido.
  • Oferta de Tempo Limitado – aplica um calor laranja tema colorido.
  • Loucura da Venda Flash! – aplica um negrito Rosa tema colorido.
  • Boa! É BOGO! – aplica um vibrante violeta tema colorido.
• Como utilizar: Selecione um modelo e clique Aplicar o modelo seleccionado. O design do modelo carrega no editor, e você pode ajustar tudo a partir daí.

📐 Disposição do Modelo

• O que faz: Controla como os níveis de quantidade são dispostos dentro do widget.
• Opções:
• • Vertical – as camadas estão empilhadas em cima umas das outras.
  • Horizontal – níveis sentar lado a lado.

🎨 Escolher um Tema

• O que faz: Permite- lhe trocar todo o tema de cores do widget com um clique.
• Opções: Azul, _Vermelho_ou Verde.
• Nota: Esta opção só aparece quando o Vertical layout do modelo está selecionado.

⚠️ A escolha de um tema substitui tudo de suas configurações de design atuais (colores, tamanhos, estilos) com os valores predefinidos do tema. Se você personalizou as configurações individuais, aplique seu tema primeiro e ajuste melhor depois.

🔤 Tipografia & Cor

Este é o cartão de design principal, disponível na guia Design de cada tipo de oferta. É desmontável — clique na seta no canto superior direito para expandí-la ou desmontá-la.

🔠 Fonte

• O que faz: Define a família de fontes usada em todo o elemento da oferta.
• Como utilizar: Escolher de 60+ fontes incorporadas — incluindo clássicos como Helvetica, Arial, Geórgia e Impacto, além de fontes populares do Google como Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display, e muitos mais.
• Predefinição: Selecionar Usar o seu tipo de letra de tema para herdar automaticamente a fonte do tema da sua loja — a maneira mais fácil de fazer o widget se misturar com o seu storefront.

ℹ️ As fontes do Google são carregadas automaticamente no storefront quando selecionadas — nenhuma configuração manual necessária.

📝 Elemento de texto Styling (Tamanho / Estilo / Cor)

Abaixo do seletor de fontes, cada elemento de texto do widget recebe seu próprio bloco de estilo. Cada bloco tem três configurações:

• Tamanho (px): Controla o tamanho da fonte desse elemento.
• Estilo: Controla o peso e a ênfase do texto. Opções:
• • Luz
  • Regular
  • Itálico
  • Médio
  • Itálico Médio
  • SemiBold
  • Negrito
  • Itálico negrito
• Cor: Muda a cor do texto usando o seletor de cores ou entrada hex.

⚠️ O tamanho não pode ser maior que 20px — se você inserir um valor maior, você verá um erro de validação.

Os elementos disponíveis dependem do tipo de oferta:

📦 Oferta de pacote & Suplementos de produto:

• Título do pacote – o cabeçalho principal do widget do pacote.
• Nome do produto – os títulos do produto dentro do pacote.
• Preço do produto – o preço indicado para cada produto.
• Marca Realçada – o texto emblemático (por exemplo, "Combo") mostrado em produtos destacados.
• Rodapé – o texto do rodapé na parte inferior do widget.
• Preço total – o preço combinado do pacote.
• Botão – o texto do botão "Adicionar ao Carrinho".

🏷️ Quebra de Quantidade:

• Título do Bloco – o cabeçalho principal acima das camadas.
• Título da Oferta – o título de cada nível (por exemplo, "2 Par").
• Rótulo de Desconto – o texto de desconto em cada nível (por exemplo, "Comprar 2 Obter 1").
• Preço – o preço descontado.
• Comparar o Preço – o preço original.
• Marca – o texto emblemático em um nível (por exemplo, "Mais Popular").
• Legenda – o texto de legenda em uma camada.
• Etiqueta do presente / preço do presente / cor da etiqueta do presente – o texto usado para itens do presente gratuito (quando um presente gratuito é configurado).
• Rodapé – o texto do rodapé abaixo das camadas.
• Marca Realçada – o texto emblemático destacado.
• Botão – o texto do botão.
• Preço total – a exposição total do preço.

🧺 Construir o seu próprio pacote (BYOB):

• Título do Bloco – o cabeçalho da página do pacote.
• Designação das mercadorias - o texto descritivo do título.
• Título da Oferta – os nomes do produto no pacote.
• Preço – os preços do produto.
• Texto de Barra Fixo – a mensagem de progresso na barra pegajosa (por exemplo, "precisa de pelo menos 3 deste grupo").
• Botão – o texto principal do botão "Adicionar pacote ao carrinho".
• Botão do produto – o botão "Adicionar" em cada cartão de produto.
• Preço total – o total do pacote em execução.

🛍️ Upsell Slider:

• Título do Bloco – a posição da barra deslizante (por exemplo, "frequentemente comprados juntos").
• Denominação do produto – os nomes do produto na barra deslizante.
• Preço – os preços do produto.
• Botão – o texto do botão "Adicionar ao Carrinho".

🗂️ Intervalo de Quantidade da Categoria:

• Os mesmos elementos de texto como Quantity Break (Block Title, Offer Title, Discount Label, Price, Tag, Subtitle, Footer, Button, Total Price), sem o presente e compare-preço opções de estilo.

🌈 Cores dos elementos (Quebra de quantidade e quebra de quantidade da categoria)

Esta secção controla o fundo e realça as cores das barras de nível. Cada opção é um escolhedor de cor única com uma entrada hex.

• Cor da borda: A cor da borda do nível atualmente selecionado — faz a escolha ativa se destacar.
• Cor de fundo: A cor de fundo da camada seleccionada.
• Barra não selecionada: A cor de fundo de todos os níveis não selecionados.
• Cor do fundo do rótulo: O fundo por trás da etiqueta de desconto em cada nível.
• Cor de fundo da etiqueta: O fundo da etiqueta (por exemplo, "Mais Popular").
• Cor do fundo do presente: O fundo de linhas de presente livres (Quantity Break only).
• Cor de fundo da etiqueta do presente: O fundo do gift tag gratuito (somente Quantity Break).

💡 Dica: Use um contraste sutil entre os fundos de barras selecionados e não selecionados — isso ajuda os compradores a ver instantaneamente qual camada eles escolheram.

📏 Tamanho da variante (quebra de quantidade)

• O que faz: Controla o tamanho do seletor de variantes mostrado em cada camada quando o produto tem variantes.
• Opções: Pequeno, _Médio_ou Grande — basta clicar num crachá para o seleccionar.

📐 Contorno

Disponível na guia Design de cada tipo de oferta.

• Largura da borda (0–10px): Ajusta a espessura da borda ao redor do widget (e barras de camada para quebra de quantidade). Defina-o como 0 para uma aparência sem fronteiras, plana.
• Raio de fronteira (0–50px): Controla o quão arredondados os cantos aparecem. Valores mais baixos dão uma aparência afiada e moderna; valores mais altos dão uma aparência suave e arredondada.

🖌️ Cores de fundo e borda (cartões, rodapé, etiquetas e botões)

Disponível para Oferta de Pacotes, Compostos de produtos, Upsell Slider, e BYOBEstes blocos permitem-lhe definir ambos um Cor do Contorno e a Cor de Fundo para os blocos visuais chave do widget.

📦 Oferta de pacote & Suplementos de produto:

• Produto – os cartões de produto dentro do pacote.
• Rodapé – a área de rodapé na parte inferior do widget.
• Marca Realçada – o crachá destacado.
• Botão – o botão "Adicionar ao Carrinho".

🛍️ Upsell Slider:

• Produto – os cartões de produto na barra deslizante.
• Botão – o botão "Adicionar ao Carrinho".

🧺 BYOB:

• Botão – o botão principal "Adicionar pacote ao carrinho".
• Botão do produto – o botão "Adicionar" em cada cartão de produto.

💡 Dica: Para botões, defina a cor de fundo para a cor primária da sua marca e combine a cor de borda com ela para um botão limpo e sólido.

⚙️ Comuta a Aparência (Quebra de Quantidade – Página Geral)

Algumas opções visuais para Quantity Break ao vivo no Geral aba abaixo Configurações → Aparência e aparência em vez da guia Design:

• Mostrar o preço unitário: Mostra o preço por unidade dentro de cada nível, para que os clientes possam ver exatamente o que cada item custa.
• Mostrar o preço total: Mostra o preço total para cada nível.
• Esconder as linhas de cabeçalho e rodapé: Remove as linhas de divisor na parte superior e inferior do widget para uma aparência mais limpa e mínima.

ℹ️ As ofertas BYOB também têm um Modelo opção na página Geral (Pick da prateleira ou Dividir Selecionar) que altera o layout geral da página do pacote.

📌 Notas Importantes

• ⚠️ Temas sobrescrever estilo personalizado. A aplicação de um modelo ou temas de comutação (Quantity Break) redefiniu suas configurações de design para as predefinições do tema. Sempre aplique os temas primeiro, depois personalize.
• ⚠️ Limite de tamanho de texto. Elementos de texto individuais não podem exceder 20px — valores maiores desencadeiam um erro de validação.
• ℹ️ A fonte aplica- se a todo o widget. A configuração Fonte afeta todo o texto no widget; use a configuração Estilo por elemento (Bold, Itálico, etc.) para enfatizar elementos específicos.
• ℹ️ Fonte de tema é a escolha mais segura. "Use sua fonte tema" garante que o widget corresponde à sua tipografia storefront com zero esforço.
• ℹ️ As configurações de design são por oferta. Cada oferta tem seu próprio design independente — estilo uma oferta nunca afeta suas outras ofertas.
• ℹ️ Visualização vs. storefront. A visualização ao vivo usa dados de amostra. Após salvar e publicar, verifique a oferta em uma página de produto real para confirmar o espaçamento e fontes olhar dentro do seu tema.

💡 Exemplos de Casos de Utilização

• Combina exactamente com a sua marca: Insira os códigos de hex da sua marca no botão, título do bloco e cores de realce e, em seguida, defina a fonte para a correspondência mais próxima à fonte do tema.
• Fazer o melhor nível pop (Quantity Break): Dê à sua camada "Mais Popular" um estilo de Tag em negrito, uma cor de fundo de Tag contrastante, e uma cor de borda forte para que os olhos dos compradores vão direto para ele.
• Limpar a aparência mínima: Definir Largura de Borda como 0, ocultar as linhas do cabeçalho/footer, e usar "Use o seu tema fonte" para um widget que parece nativo do seu tema.
• Botões de alto contraste: Fundo do botão escuro + texto do botão branco + cor da borda correspondente = um botão que é clicado.
• Vibe suave e amigável: Bump Border Radius up (20–50px) e escolher uma cor de fundo pastel para a camada selecionada.

🚀 Resultado Final

Uma vez configurado com sucesso, o Desenho & Styling configurações ajudá-lo a criar ofertas que parecem uma parte natural da sua loja - não um widget aparafusado.

Com estilo adequado no lugar:

✅ Oferecer widgets sentir totalmente alinhado com a sua marca de loja ✅ Níveis de desconto e economia de pacotes tornam-se mais fáceis de digitalizar e entender ✅ Os melhores botões de nível e CTA se destacam visualmente ✅ Presentes gratuitos e etiquetas destacadas chamar a atenção do comprador ✅ Oferece olhar polido e consistente em desktop e móvel ✅ Os clientes desfrutam de uma experiência de compras mais suave 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: 10/09/2026