> ## 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). # 🚀 Como configurar a quebra de quantidade > ℹ️ **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. Quer recompensar os clientes por comprarem mais do mesmo produto? 🛍️ Isso é exatamente o que o **Quebra de Quantidades** oferta em Hoppy Bundles foi concebido para o efeito. Com este tipo de oferta, você pode criar níveis de desconto baseados em quantidade, tais como: * 🛒 Comprar 1 → Preço Padrão * 💸 Comprar 2 → 10% OFF * 💰 Comprar 3 → 20% OFF —e exibi-los como um widget puro e clicável diretamente em sua página do produto. Os clientes simplesmente escolher o nível de quantidade que eles gostam, eo desconto é aplicado automaticamente no checkout ✨ --- # **📍 Onde aparece o elemento de quebra de quantidade** O elemento de quebra de quantidade aparece no seu **Página do produto**, logo abaixo do botão Adicionar ao Carrinho (posição padrão). Você também pode colocá-lo em qualquer outro lugar na página do produto usando o **Colocação personalizada** opção (coberto mais tarde neste guia). ℹ️ A mesma tela de configuração também é usada para **BOGO (Compre um Obter um)** e **Comprar X Obter Y** ofertas – essas são simplesmente ofertas Quantity Break pré-cheias com níveis estilo BOGO. --- # **🛠️ Configuração de Exemplo Usada nesta Documentação** Nesta documentação, vamos configurar a seguinte estrutura de níveis: * 🛒 1 par → Preço padrão (sem desconto) * 💸 2 Par → 10% OFF * 💰 3 Pare → 20% OFF A oferta será aplicada a **Produtos específicos** e exibido na **Disposição vertical**. Este guia explica cada configuração que você vai tocar durante a configuração, então você sabe exatamente como cada opção se comporta ⚙️ --- # **✅ Antes de começar — habilite o aplicativo para incorporar** Para que o widget Quantity Break apareça na frente da sua loja, a incorporação do aplicativo deve ser ativada dentro de sua Shopify tema. Ir para: **Shopify Admin → Canais de Vendas → Loja online → Temas → Personalizar → App Inbeds** Depois: * Procurar **Pacotes App Incorporar** * Activar * Clique em Salvar ⚠️ **Importante**: Sem o aplicativo incorporado habilitado, sua oferta publicada não será visível na frente do store — mesmo que tudo dentro do aplicativo esteja configurado corretamente. --- # **🎯 Passo 1 — Crie uma nova oferta de quebra de quantidade** Abrir o **Hoppy Bundles** app a partir da sua Shopify Admin. Depois: → Clique **Criar uma Nova Oferta** para abrir a página de seleção do tipo de oferta. → Selecionar **Quantity Break (Um produto)** e clique **Criar uma quebra de quantidade**. ℹ️ A **BOGO** e **Comprar X Obter Y** cartões nesta página também abrir a configuração Quantity Break — eles apenas pré-preencha seus níveis com ofertas estilo BOGO (por exemplo, “Compre 2 Obter 1”), assim você pode começar a partir daqueles se esse é o negócio que você quer executar. --- # **🧩 Passo 2 — Nomeie sua oferta e escolha onde se aplica** A primeira tela pede o básico antes de qualquer outra coisa. --- ## **🏷️ Nome da Oferta** Este campo é utilizado apenas para fins internos. Os clientes nunca verão este nome. Você pode usar qualquer nome reconhecível como: * Venda de tênis de verão * Promoção do volume da camiseta * Black Friday Tiers 💡 Usar nomes internos adequados torna mais fácil identificar configurações mais tarde, especialmente se sua loja executar várias ofertas. --- ## **📦 Aplicar a Oferta** Esta configuração controla quais os produtos que o widget de quebra de quantidade e descontos se aplicam. Existem 3 opções disponíveis: * **Todos os Produtos** → a oferta se aplica a todos os produtos da sua loja * **Produto** → a oferta se aplica apenas aos produtos que você seleciona * **Colecção** → a oferta se aplica a cada produto dentro das coleções que você selecionar Se você escolher **Produto** ou **Colecção**, a **Selecionar produto** / **Selecionar coleção** O botão aparece. Clique nele para abrir seu Shopify Recolhedor de recursos e escolha um ou mais itens. ⚠️ **Importante**: * Alternando entre **Todos os Produtos**, **Produto**, e **Colecção** limpa sua seleção atual — escolha o modo certo primeiro e selecione seus itens. * Apenas **uma oferta publicada é permitida por produto ou coleção**Se outra oferta publicada já cobre o mesmo produto, você não será capaz de publicar este até que a oferta existente seja convertida de volta para um rascunho. --- # **🎨 Passo 3 — Escolha um modelo** Rolar para baixo para o **Selecione sua oferta preferida** secção. Aqui você vai encontrar modelos prontos que você pode passar através: * **Construir um do zero** → começar com um layout limpo, mínimo * **Agrupar & Gravar** → o olhar verde clássico multi-camada * **Oferta de Tempo Limitado** → laranja, tema de urgência * **Loucura da Venda Flash!** → rosa, tema de venda * **Yay! É BOGO** → violeta, pré-cheia com Comprar X Obter níveis de estilo Y Clique em um modelo para selecioná-lo e, em seguida, pressione **Aplicar o modelo seleccionado**. ℹ️ A **Aplicar o modelo seleccionado** botão permanece desativado até que você tenha selecionado pelo menos um produto ou coleção (ao usar o **Produto** ou **Colecção** modo). Uma vez aplicado, o editor de configuração completo abre - com uma visualização ao vivo do seu widget no lado direito da tela 👀 --- # **⚙️ Passo 4 — Configure Suas Ofertas (Abas Gerais)** O editor está organizado em 3 abas: * **Geral** → oferecer conteúdo, descontos e comportamento * **Desenho** → fontes, cores e bordas * **& Colocação de Destino** → quem vê a oferta e onde aparece Este guia foca nas configurações que você precisa para obter a oferta ao vivo. Vamos passar pelo **Geral** secção por secção. --- ## **✏️ Nome da Oferta & Oferta Seleccionada** No topo da página Geral você pode ver o seu **Nome da Oferta** e o **Oferta Seleccionada** (o modelo que você escolheu). Clique na **ícone lápis** ao lado do nome da oferta para renomeá-lo a qualquer momento. 💡 Este nome só é visível para você — para sua própria referência interna. --- ## **📐 Disposição do Modelo** Escolha como seus níveis de quantidade são organizados dentro do widget: * **Vertical** → níveis empilhados em cima uns dos outros (melhor para a maioria das páginas de produto) * **Horizontal** → níveis lado a lado ℹ️ Quando **Vertical** é selecionado, um extra **Escolha um tema** aparece a opção, permitindo- lhe alternar rapidamente **Azul**, **Vermelho**, e **Verde** temas de cores. 💡 Escolher o **Vermelho** tema também desbloqueia um extra **Subtítulo da Oferta** campo dentro de cada nível de oferta (mais em que abaixo). --- ## **🎁 Editar oferta — seus níveis de desconto** Este é o coração da configuração ❤️ Cada nível de quantidade vive em sua própria aba (**Oferta 1**, **Oferta 2**, **Oferta 3**...). Clique em uma aba para editar essa camada. Para nossa configuração de exemplo: * **Oferta 1** → Quantidade `1`, Tipo de desconto `No Discount` * **Oferta 2** → Quantidade `2`, Tipo de desconto `% Discount`, Desconto `10` * **Oferta 3** → Quantidade `3`, Tipo de desconto `% Discount`, Desconto `20` --- ### **💸 Tipo de Desconto** Este dropdown controla que tipo de negócio o nível oferece: Tipo de Desconto O que ele faz Sem desconto Preço-padrão — útil como uma linha de base “Compra 1” % de desconto (por exemplo, 25% de desconto) Percentagem do total do nível Desconto plano (por exemplo, $29.00 de desconto) Montante fixo do total do nível Em cada unidade de desconto plano Montante fixo desligado **cada unidade** no nível Preço específico (por exemplo, $29.00) Os clientes pagam exatamente este preço pela camada BOGO (Compre um Obter um) Comprar X itens, obter Y itens do mesmo produto grátis Comprar X Obter Y Grátis Comprar X itens, obter um **produto diferente** desconto/livre Dependendo do tipo de desconto, campos extras aparecem automaticamente: * **% / Plano / Por unidade / Preço Específico** → a **Desconto** campo de entrada para o valor * **BOGO** → **Comprar** e **Vai-te embora.** campos (A compra está bloqueada para a quantidade do nível) * **Comprar X Obter Y Grátis** → **Comprar** e **Vai-te embora.** campos, mais a **Selecionar produto Y** botão para escolher qual produto o cliente recebe ⚠️ **Por favor note**: Para **Comprar X Obter Y Grátis**, certifique-se de que você realmente selecionar um produto “Y” – sem um, a camada não tem nada para dar. --- ### **🔢 Quantidade** O número de itens que o cliente deve comprar para desbloquear esta camada. ⚠️ Quantidade deve ser maior que 0 — você verá um erro inline se não for. ℹ️ Pela **BOGO** e **Comprar X Obter Y** níveis, o **Comprar** A condição segue automaticamente esta quantidade. --- ### **🏷️ Título da Oferta** O texto principal mostrado no nível, por exemplo: * 1 Par * 2 Par * 3 Par --- ### **🏷️ Rótulo e etiqueta de desconto** Cada camada tem duas decorações de texto opcionais: * **Rótulo de Desconto** → o texto do negócio mostrado na camada, por exemplo “10% OFF” * **Marca** → um pequeno crachá, por exemplo “Mais Popular” Ambos os campos têm **ícone do olho** 👁️ do lado direito — clique nele para mostrar ou esconder esse elemento na frente da loja. 💡 Adicionar uma tag “Mais Popular” ao seu nível médio é uma maneira simples de empurrar os clientes para ele. --- ### **🎁 Presente grátis** Assinalar a **Presente grátis** caixa de seleção se você quiser que os clientes escolham esta camada para também receber um produto presente. Uma vez activada, a **Selecionar produtos** botão aparece para que você possa escolher o produto(s) presente(s) de sua loja. ℹ️ Desmarcar **Presente grátis** limpa os produtos de presente selecionados para esse nível. --- ### **📝 Subtítulo da Oferta (Somente Tema Vermelho)** ℹ️ Este campo só aparece quando o **Vermelho** o tema está selecionado em **Disposição do Modelo → Escolha um tema**. Ele adiciona uma pequena linha de legendas dentro de cada nível, e também tem um ícone de olho para alternar visibilidade. --- ### **➕ Adicionar / 🗑️ Apagar os Níveis** Abaixo das abas da oferta você encontrará: * **Adicionar Oferta** → adiciona uma nova aba de nível (máximo **6 níveis**) * **Apagar** → remove o nível atualmente selecionado (mínimo **2 níveis** requerido) Se atingires um destes limites, uma pequena mensagem de brinde vai avisar-te. --- ## **📰 Texto de & Rodapé do Título do Bloco** Estes controlam o texto acima e abaixo do widget: * **Título do Bloco** → por exemplo, “Bundle & Save” ou “Limited Time Offer” * **Texto do Rodapé** → Por exemplo, “Envio Livre” Ambos os campos vêm com um **ícone do olho** para escondê-los completamente, se preferir um olhar mais limpo. --- # **🛠️ Passo 5 — Configurar as Configurações** Rolar para baixo para o **Configuração** Cartão. Essas caixas de seleção controlam como o widget se comporta e o que os clientes veem. --- ## **👀 Aparência e aparência** * **Mostrar o preço unitário** → os clientes podem ver o preço por unidade dentro da oferta * **Mostrar o preço total** → os clientes podem ver o preço total de cada camada * **Ocultar linhas de cabeçalho e rodapé** → esconde as linhas divisor na parte superior e inferior do widget para uma aparência mais limpa * **Usar texto personalizado para Fora de stock** → mostra sua própria mensagem quando o produto selecionado está fora de estoque ℹ️ Habilitando **Usar texto personalizado para Fora de stock** revela um campo de texto onde você pode digitar sua mensagem (padrão: “Itens destacados estão fora de estoque”). --- ## **⚙️ Funcionalidade** * **Deixe os clientes escolher diferentes variantes para cada item** → se o produto tem variantes (tamanho, cores...), os clientes podem escolher uma variante diferente para cada unidade na camada * **Mostrar o elemento abaixo adicionar ao botão do carrinho** → renderiza o widget diretamente abaixo do botão Adicionar ao Carrinho * **Saltar o carrinho diretamente para checkout** → clientes são redirecionados diretamente para checkout após adicionar uma camada, pulando a página do carrinho * **Volume desconto (Extender Max desconto para todas as quantidades)** → permite aos clientes comprar **adicional** Elementos para além do nível mais elevado à taxa máxima de desconto * **Mostrar comparar ao preço** → exibe o preço de comparação (atropelamento) dentro da oferta ℹ️ Habilitando **Mostrar comparar ao preço** revela dois campos adicionais: * **Preço de comparação personalizado** → sobreponha o preço de comparação manualmente (deixar em branco ou `0` para usar o preço de sua Shopify lista de produtos) * **Shopify preço de comparação do produto** → somente leitura, mostra o preço de comparação vindo de sua lista de produtos --- ## **🔄 Habilitar combinação de descontos** Estas opções permitem que o desconto Quantity Break combine com outros tipos de desconto no checkout: * **Descontos de encomendas** * **Descontos de envio** ℹ️ A combinação de desconto de produto está sempre ligada. Também note que devido a Shopify restrições, esta configuração aplica-se globalmente a todas as novas ofertas Quantity Break. --- ## **🌍 Mercados Múltiplos & Tradução** Abaixo Configurações que você também vai encontrar: * **Mercados múltiplos** → definir preços específicos do mercado para a oferta * **Tradução** → traduzir textos widget para idiomas adicionais da sua loja ℹ️ Estes são opcionais e não são necessários para obter sua oferta ao vivo — eles estão cobertos em seus próprios guias dedicados. --- # **🎯 Etapa 6 — Segmentação e colocação (Opcional)** Mudar para o **& Colocação de Destino** aba para controlar onde o widget aparece e quem o vê. --- ## **📍 Colocação** * **Abaixo Adicionar ao Botão do Carrinho (Padrão)** → o widget é colocado automaticamente — recomendado para a maioria das lojas * **Personalizado (somente na página do produto)** → coloque o widget em qualquer lugar que você gosta na página do produto Se você escolher **Personalizado**, o aplicativo dá-lhe duas coisas **após a gravação**: * **Hoppy bundles ID** → usá-lo para adicionar / reposicionar o Hoppy Bundles bloco de aplicativo em seu editor de tema * **Hoppy bundles excerto de código** → um pequeno `
` você pode colar em qualquer lugar em seu código de tema ℹ️ Até que a oferta seja salva uma vez, você verá “Salve para ver Hoppy bundles ID e trecho de código”. --- ## **👤 Alvo do Cliente & 🌍 Meta de Geolocalização** Estas secções opcionais permitem-lhe: * Mostrar a oferta apenas para **Clientes registados** * Mostrar ou ocultar a oferta com base em **etiquetas de clientes** ou **vida útil** * Limitar a oferta **Países específicos** (padrão: **Todo o mundo**) Há também um **Agendamento** secção para definir a **início** e **fim** data/hora para a oferta — útil para vendas em flash ℹ️ Todos estes são opcionais. Se os ignorares, a oferta mostra-se a todos, em todo o lado, imediatamente. Segmentação avançada é coberto em detalhe em seu próprio guia dedicado. --- # **🎨 Página de Desenho (Opcional)** A **Desenho** tab controla o estilo visual do widget: * **Tipografia & Cor** → família de fontes, tamanhos de texto, pesos e cores para cada elemento * **Variante** → tamanho pequeno / médio / grande para seletores variante * **Contorno** → largura da borda e controles de raio de canto 💡 Cada mudança reflete instantaneamente na visualização ao vivo à direita — ambos na **desktop** e **móvel** painéis de visualização. ℹ️ Os padrões já estão ótimos fora da caixa, então este passo é totalmente opcional. Styling é coberto em profundidade no guia de design dedicado. --- # **✅ Passo Final — Salvar e Publicar** Uma vez que tudo fica bem na pré-visualização: 1. Clique **Gravar** na barra de gravação no topo da página 2. Clique **Publicar** para fazer a oferta viver ⚠️ **Por favor note**: * A **Publicar** o botão está desativado enquanto a oferta é nova em folha — **salvar primeiro**, em seguida, publicar. * A publicação cria um **desconto automático** na sua **Shopify Admin → Descontos**. Isto é o que realmente aplica os preços da camada no checkout — por favor, não exclua ou edite manualmente. * Se o aplicativo incorporado não estiver habilitado no seu tema, um banner aparecerá após salvar com um **Activar a Entrada da Aplicação** botão de atalho — clique nele, ative a inserção e salve seu tema. * Se a publicação falhar porque outra oferta publicada já cobre o mesmo produto ou coleção, converta essa oferta existente para um rascunho primeiro, então publique novamente. Sua oferta Quantity Break está agora ao vivo 🚀 --- # **🎉 Resultado Final** Uma vez configurado com sucesso: ✅ Clientes veem seus níveis de quantidade diretamente na página do produto ✅ Descontos se aplicam automaticamente no checkout ✅ Níveis, tags e etiquetas atualizados instantaneamente do aplicativo ✅ O elemento corresponde ao seu tema com a disposição e as cores que escolheu Veja como o widget finalizado fica na frente da loja — níveis limpos, economias claras e seleção de um clique ✨ --- 💡 Quer executar um negócio “Comprar 2 Obter 1 Grátis” em vez disso? Criar um novo **BOGO** oferecer a partir da página tipo oferta - ele usa exatamente o mesmo fluxo de configuração que você acabou de aprender, com níveis BOGO pré-preenchidos para você.