> ## 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 o produto Upsell > â„č **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 aumentar o seu valor de ordem mĂ©dia (AOV) recomendando os produtos certos no momento certo? đŸ›ïž Isso Ă© exatamente o que o **Produto Upsell (Slider)** tipo de oferta em **Hoppy Bundles** foi concebido para o efeito. Com esta oferta, vocĂȘ pode exibir uma bela barra de produto em suas pĂĄginas de produto que recomenda produtos adicionais para seus clientes, tais como: * 🧠 RecomendaçÔes de I.A. (Produtos relacionados ou complementares) * 🎯 Produtos especĂ­ficos escolhidos a dedo que vocĂȘ deseja promover Os clientes podem adicionar produtos recomendados ao carrinho diretamente da barra deslizante — sem nunca sair da pĂĄgina do produto ✹ Neste guia, vamos levĂĄ-lo atravĂ©s da configuração completa, passo a passo, para que o seu upsell slider Ă© ao vivo em apenas alguns minutos ⚙ --- # **📋 Antes de começar** Antes de criar seu primeiro produto Upsell, certifique-se de ter o seguinte pronto: * ✅ **Hoppy Bundles instalado** na sua Shopify guardar * ✅ Uma ideia ĂĄspera de **Que produtos** vocĂȘ quer recomendar (ou se vocĂȘ quer que a IA decida por vocĂȘ) * ✅ _(Apenas para AI Upsell)_ O livre **Shopify Pesquisar & Discovery app** instalado — Ă© aqui que Shopify armazena suas recomendaçÔes de produtos relacionados e complementares â„č O controle deslizante Upsell do produto **nĂŁo** criar quaisquer descontos. Produtos recomendados sĂŁo adicionados ao carrinho a seu preço regular — Ă© puramente uma ferramenta de recomendação de produto 💡 --- # **✅ Passo inicial — Habilitar a incorporação da aplicação** Para que o controle deslizante upsell apareça em sua loja, o Hoppy Bundles app embed deve ser ativado dentro de seu Shopify tema. Ir para: **Shopify Admin → Loja online → Temas → Editar Tema → App Incorpora** A partir daĂ­: 1. Abrir o **Incorporar aplicativos** secção da barra lateral esquerda 2. Encontrar o **Hoppy Bundles** app incorporar 3. Alternar **ON** ✅ 4. Clique **Gravar** ⚠ NĂŁo se preocupe se vocĂȘ pular este passo — apĂłs publicar sua oferta, Hoppy Bundles lhe mostrarĂĄ um banner de lembrete com um direto **Activar a Entrada da Aplicação** botĂŁo que o leva diretamente para o lugar certo no editor do tema. --- # **⚙ Passo 1 — Criar uma nova oferta de upsell produto** Da **Hoppy Bundles** Painel de aplicação: 1. Clique **Criar uma nova oferta** 2. Na **Selecionar tipo de oferta** tela, encontrar o **Produto Upsell (Slider)** cartĂŁo đŸ·ïž 3. Clique **Criar uma Barra de Upsell** VocĂȘ vai pousar no **Criar uma Barra de Upsell** pĂĄgina de configuração. A pĂĄgina de configuração estĂĄ dividida em duas ĂĄreas: * **Lado esquerdo** → Suas configuraçÔes, organizadas em 3 abas: **Geral**, **Desenho**, e **& Colocação de Destino** * **Lado direito** → A **Visualização ao vivo** do seu controle deslizante em ambos đŸ–„ïž Área de trabalho e đŸ“± MĂłvel, que atualiza instantaneamente Ă  medida que vocĂȘ altera as configuraçÔes 💡 Cada mudança que vocĂȘ faz Ă© refletida na visualização em tempo real — sinta - se Ă  vontade para experimentar! --- # **đŸ·ïž Passo 2 — Nomeie sua oferta e defina o tĂ­tulo da barra deslizante** Na **Geral** tab, comece com o bĂĄsico: ## **Nome da Oferta** Este nome Ă© **somente visĂ­vel para vocĂȘ** dentro do aplicativo – os clientes nunca o vĂȘem. Use algo reconhecĂ­vel para sua prĂłpria referĂȘncia, como: * _Coleção de VerĂŁo Upsell_ * _Barra deslizante de acessĂłrios_ ## **TĂ­tulo da barra deslizante** Este Ă© o cliente principal **verĂĄ** acima do controle deslizante em sua loja. O tĂ­tulo padrĂŁo Ă© **“VocĂȘ tambĂ©m pode gostar”**Mas podes mudar para o que quiseres, como: * _Complete o look_ * _Pars bem com_ * _Clientes tambĂ©m comprados_ ⚠ A **É necessĂĄrio o tĂ­tulo da barra deslizante** — se o deixar em branco, verĂĄ _“TĂ­tulo deslizante Ă© necessĂĄrio”_ erro e nĂŁo serĂĄ capaz de salvar. --- # **🔱 Passo 3 — Configurar as configuraçÔes da barra deslizante** Ainda na **Geral** tab, o **Configuração** a seção controla quantos produtos sĂŁo visĂ­veis ao mesmo tempo dentro da barra deslizante: * **Produtos por lĂąmina (Desktop)** → Quantos produtos mostram por slide em telas de desktop _(padrĂŁo: 3)_ * **Produtos por lĂąmina (Mobile)** → Quantos produtos mostram por slide em dispositivos mĂłveis _(padrĂŁo: 2)_ â„č Se vocĂȘ selecionar mais produtos do que caber em um slide, os clientes podem passar ou navegar atravĂ©s do controle deslizante para ver o resto — entĂŁo nĂŁo tenha medo de adicionar muitas recomendaçÔes. --- # **đŸ›ïž Passo 4 — Selecione seus produtos Upsell** Este Ă© o coração da tua oferta ❀ — escolha **Que produtos** ser recomendado dentro da barra deslizante. VocĂȘ tem duas opçÔes: --- ## **Opção 1 — SubvençÔes de produtos especĂ­ficos _(padrĂŁo)_** Escolha os produtos exatos que vocĂȘ deseja recomendar: 1. Selecionar **Upsell Produtos EspecĂ­ficos** 2. Clique **Selecionar produtos** 3. ShopifyO coletor de produtos abrirĂĄ — procure e selecione um ou mais produtos 4. Confirme sua seleção ✅ Seus produtos escolhidos aparecerĂŁo como uma lista abaixo do botĂŁo, e instantaneamente na prĂ©-visualização ao vivo. 💡 Esta opção Ă© perfeita quando vocĂȘ quer controle total — por exemplo, sempre recomendando acessĂłrios correspondentes em uma pĂĄgina especĂ­fica do produto. --- ## **Opção 2 — AI Upsell (Comprados FreqĂŒentemente Juntos)** Vamos ShopifyA IA decide quais produtos recomendar para cada pĂĄgina do produto automaticamente. Quando vocĂȘ seleciona esta opção, dois tipos de recomendação ficam disponĂ­veis: * **Upsell Produtos relacionados** → Produtos semelhantes ao que estĂĄ sendo visto * **Upsell Produtos complementares** → Produtos que vĂŁo bem junto com o que estĂĄ sendo visto ⚠ **Importante:** AI Upsell usa as recomendaçÔes que vocĂȘ configura no livre **Shopify Pesquisar & Discovery app**VocĂȘ verĂĄ um banner de lembrete com um **Abrir pesquisa e descoberta** botĂŁo — use-o para configurar seus produtos Relacionados ou Complementares por produto, caso contrĂĄrio, o controle deslizante pode nĂŁo ter nada para mostrar. ## **NĂșmero mĂĄximo de produtos** Quando a IA Upsell Ă© selecionada, aparece um campo adicional: **NĂșmero mĂĄximo de produtos** → O nĂșmero mĂĄximo de produtos recomendados indicado na barra deslizante _(atĂ© 10)_. --- ⚠ **Atenção!** Alternando entre _Upsell Produtos EspecĂ­ficos_ e _AI Upsell_ **limpa sua seleção atual de produtos**. Escolha sua abordagem primeiro, em seguida, selecione produtos. --- # **🌍 Etapa 5 — TraduçÔes (Opcionais)** A vender em vĂĄrias lĂ­nguas? A **Tradução** a seção na guia Geral permite traduzir os textos da barra deslizante para cada uma das lĂ­nguas da sua loja. Este passo Ă© completamente opcional durante a configuração — vocĂȘ sempre pode voltar a ele mais tarde. Para uma caminhada completa, confira nosso dedicado **Guia de tradução** 📖 --- # **🎹 Passo 6 — Personalizar o Desenho (Opcional)** Mudar para o **Desenho** aba para fazer com que o controle deslizante corresponda perfeitamente Ă  sua marca 🎹 Aqui estĂĄ uma rĂĄpida visĂŁo geral do que vocĂȘ pode personalizar: * **Fonte** → Use sua fonte de tema (padrĂŁo) ou escolha a partir de uma grande lista de fontes * **Tipografia e cores** → Tamanho, peso e cor do texto para o tĂ­tulo da barra deslizante, tĂ­tulos do produto, preços e o botĂŁo Adicionar ao Carrinho * **Contorno** → Largura da borda e arredondamento do canto (rĂĄdio) dos cartĂ”es do produto * **Cores de fundo e borda** → Para ambos os cartĂ”es de produto e o botĂŁo Todas as alteraçÔes sĂŁo atualizadas instantaneamente na visualização ao vivo Ă  direita đŸ–„ïžđŸ“± â„č O design padrĂŁo jĂĄ parece limpo fora da caixa, para que vocĂȘ possa pular isso com segurança durante sua primeira configuração e refino-lo mais tarde. Para um mergulho profundo em cada opção de estilo, confira nosso dedicado **Guia de Desenho e Estilhamento** 📖 --- # **📍 Passo 7 — Escolha a posição** Mudar para o **& Colocação de Destino** aba e decidir **em que** A barra deslizante aparece. VocĂȘ tem duas opçÔes de colocação: ## **Abaixo Adicionar ao BotĂŁo do Carrinho (PadrĂŁo)** A barra deslizante Ă© colocada automaticamente logo abaixo da **Adicionar ao Carrinho** botĂŁo em suas pĂĄginas de produto. Nenhum trabalho extra necessĂĄrio — esta Ă© a opção recomendada para a maioria das lojas ✅ ## **Personalizado (somente na pĂĄgina do produto)** Escolha isto se quiser posicionar a barra manualmente, onde quiser na pĂĄgina do produto. Quando selecionado, o aplicativo mostra duas coisas: * **Hoppy Bundles ID** → Use este ID com o Hoppy Bundles bloco de aplicativo em seu editor de tema para adicionar, remover ou reposicionar a barra deslizante * **Hoppy Bundles excerto de cĂłdigo** → Um pequeno `
` snippet vocĂȘ pode colar em qualquer lugar em seu cĂłdigo de tema ⚠ O trecho ID e cĂłdigo sĂł aparece **depois de salvar ou publicar** a oferta — entĂŁo salve primeiro, depois copie-as. --- # **🎯 Passo 8 — Definir o destino e o calendĂĄrio (Opcional)** Ainda na **& Colocação de Destino** tab, vocĂȘ vai encontrar controles opcionais para **que** vĂȘ a barra deslizante e **quando** 👇 ## **đŸ‘€ Alvo do Cliente** Controle qual cliente vĂȘ o controle deslizante: * **Visibilidade (Status de login do cliente)** → Mostrar a todos os clientes, ou apenas aos clientes logados * **Mostrar a barra para** → Todos os clientes, clientes com um especĂ­fico **etiqueta do cliente** (p. ex. `premium, wholesale`), ou clientes acima de um determinado **vida Ăștil** montante * **Ocultar barra de** → Opcionalmente excluir clientes por tag ou vida Ăștil ## **🌍 Meta de Geolocalização** * **Todo o mundo** _(padrĂŁo)_ → Mostrar o controle deslizante para visitantes de todos os paĂ­ses * **PaĂ­ses especĂ­ficos** → Clique **Seleccionar PaĂ­ses** para abrir o catador de paĂ­s, procure e selecione exatamente onde o controle deslizante deve aparecer ## **đŸ—“ïž Agendamento** Perfeito para campanhas de tempo limitado: * **Iniciar** → _Agora_ (por omissĂŁo) ou _Data especĂ­fica_ e tempo * **Fim** → _Nunca_ (por omissĂŁo) ou _Data especĂ­fica_ e tempo â„č Todas estas opçÔes de segmentação sĂŁo opcionais. Para a maioria das lojas, os padrĂ”es (mostrar a todos, em todos os lugares, sempre) funcionam muito bem para começar. Para configuraçÔes avançadas, confira nosso dedicado **Guia-alvo** 📖 --- # **🚀 Passo 9 — Salvar e Publicar** VocĂȘ estĂĄ quase pronto! 🎉 ## **Salvar sua oferta** Sempre que fizer alteraçÔes, **Salvar barra** aparece no topo da pĂĄgina: * Clique **Gravar** para guardar a sua oferta como um **Rascunho** 📝 * Clique **Descartar** para reverter suas alteraçÔes ⚠ Numa nova oferta, o **Publicar** botĂŁo permanece desativado atĂ© que vocĂȘ tenha salvo pelo menos uma vez — entĂŁo pressione **Gravar** Primeiro. ## **Publicar a sua oferta** Uma vez salvo, clique **Publicar** no canto superior direito para fazer o controle deslizante viver em sua loja 🚀 ApĂłs publicação, Hoppy Bundles mostra um banner de confirmação: * Se a **app embed ainda nĂŁo estĂĄ habilitado**, vocĂȘ verĂĄ um _“Certifique-se de que o App Inbed estĂĄ ativo”_ banner com uma **Activar a Entrada da Aplicação** botĂŁo — clique nele e ative a inserção (veja o Passo Inicial acima) * Se tudo estiver ativo, clique **Abrir a Loja** para ver sua barra ao vivo em uma pĂĄgina do produto ✹ Podes. **NĂŁo publicado** a qualquer momento para tirar a barra off-line sem perder suas configuraçÔes. --- # **⚠ Notas e Dicas Importantes** * 💰 **NĂŁo sĂŁo aplicados descontos** — o produto Upsell slider recomenda produtos ao seu preço regular. Se vocĂȘ quer pacotes com desconto, confira o nosso **Pacote** ou **Quebra de Quantidades** tipos de oferta em vez disso * 🧠 **AI Upsell precisa de pesquisa e descoberta** — sem produtos relacionados/complementares Shopify Pesquisa & Discovery app, a barra IA pode aparecer vazia * 🔄 **Alternar o tipo upsell reinicia sua seleção** — mudança entre _Produtos especĂ­ficos_ e _AI Upsell_ limpa os produtos que vocĂȘ escolheu * đŸ—‘ïž **A exclusĂŁo Ă© permanente** — o **Apagar** action (topo da pĂĄgina de edição) remove a oferta _e_ suas estatĂ­sticas analĂ­ticas para sempre. Isto nĂŁo pode ser desfeito * 📄 **Duplicar ofertas facilmente** — utilizar o **Duplicar** acção sobre qualquer oferta existente para criar uma cĂłpia e ajustĂĄ- la, em vez de começar do zero --- # **🎉 Resultado Final** É isso aĂ­ — sua barra Upsell do produto estĂĄ ao vivo! đŸ„ł Seus clientes agora verĂŁo uma bela barra de recomendação de produto em suas pĂĄginas de produto, exatamente onde vocĂȘ a colocou. Eles podem navegar recomendaçÔes e adicionar produtos ao seu carrinho com um Ășnico clique — impulsionando seu AOV no piloto automĂĄtico 📈 Da Hoppy Bundles painel, vocĂȘ pode: * ✏ **Editar** a oferta a qualquer momento para alterar produtos, design ou direcionamento * 📊 **Desempenho da pista** para ver como seus upsells estĂŁo convertendo * O que Ă© isso? **NĂŁo publicado** quando quiser pausar a oferta Feliz aumento! 🚀