> ## 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). # 🎨 Oferta de pacotes – Design e estilingue > ℹ️ **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 **BYOB**Estes 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 ✨