📍 Como colocar Upsell & Cross Sell numa posição personalizada
ℹ️ 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.
Quero o teu Upsell & Cross Sell widget para aparecer exatamente onde você quer - não apenas nos pontos padrão? 🎯
Isso é exatamente o que o Posição Personalizada opção em Hoppy Upsell & Cross Sell foi concebido para o efeito.
Em vez de confiar na colocação automática do aplicativo, a posição personalizada permite que você decida a localização exata do seu widget usando:
- 🧩 Um tema Bloco de Aplicação (sem necessidade de codificação)
- 📝 A excerto de código você pode colar em uma seção de líquido personalizado ou seus arquivos de tema
Isso é perfeito quando você quer que o widget se sente entre seções específicas — por exemplo, sob a descrição do produto, dentro de uma aba, ou acima dos totais do carrinho — então ele combina naturalmente com o design da sua loja ✨
🗺️ Onde Funciona a Posição Personalizada
A posição personalizada pode ser usada nas seguintes páginas:
- Página do produto → em qualquer lugar dentro do seu modelo de produto
- Página do Carrinho → em qualquer lugar dentro do seu modelo de carrinho
ℹ️ A posição personalizada só é suportada na Página do produto e Página do Carrinho. Gaveta de Carrinhos é renderizado dinamicamente pelo seu tema, então os blocos de aplicativos não podem ser colocados dentro dele — para a gaveta do carrinho, use o dedicado Gaveta de Carrinhos tipo de colocação.
✅ Antes de começar
Certifique-se de que o seguinte está no lugar antes de configurar uma posição personalizada:
- A Upsell Cross-Sell Slider app embed está habilitado em seu tema → Shopify Admin → Loja online → Temas → Editar tema → App Incorpora → Upsell Cross-Sell Slider → ON → Salvar
⚠️ Sem o aplicativo incorporado, o script widget nunca carrega — então nada aparecerá, mesmo que o bloco seja colocado corretamente.
- Tens o teu Upsell ID A mão. Não sabe onde encontrá-lo? Ver 🔎 Como encontrar Upsell ID?.
🛠️ Passo 1 — Habilitar posição personalizada na aplicação
Existem duas maneiras de ligar a Posição Personalizada — escolha o que corresponder à sua situação.
Opção A — Criar uma Nova Posição Personalizada Upsell
Abrir o Hoppy Upsell & Cross Sell aplicação, então:
→ Clique Criar um novo upsell
→ Na tela do tipo de colocação, selecione Posição Personalizada
Isto cria um novo upsell cuja colocação já está definida para Posição personalizada — você irá configurar o seu conteúdo e design como de costume, em seguida, colocá-lo em seu tema nas próximas etapas.
Opção B — Mudar uma Upsell existente para uma posição personalizada
Já tenho um Página do produto ou Página do Carrinho Upsell? Você pode converter:
→ Abra o upsell do seu painel → Vá para o Colocação tab → Sob Mostrar Ligado (Incluir), abra o dropdown de colocação e selecione Posição personalizada
💡 Mudar para Posição personalizada limpa a colocação automática, então o widget só aparecerá onde você mesmo colocá-lo no tema.
💾 Passo 2 — Salvar para obter seu Upsell ID & Excerto de Código
Posição personalizada funciona combinando sua colocação do tema com um upsell específico usando o seu Upsell ID.
Após selecionar Posição personalizada:
→ Clique Gravar
Uma vez salvo, o Colocação A aba revela dois itens prontos para serem copiados:
- Upsell ID → o ID único deste upsell (com um botão de cópia 📋)
- Excerto de código da Upsell → um trecho em HTML pronto (também com um botão de cópia)
ℹ️ Estes só aparecem após a gravação. Se você ver “Salvar para ver Upsell ID e trecho de código”, basta clicar em Salvar primeiro.
🧩 Passo 3 — Coloque o elemento em seu tema
Agora escolha como deseja colocar o widget. Os dois métodos de trabalho modelo de produto e o modelo do carrinho.
Método 1 — Utilização do bloco de aplicação do tema (recomendado)
Esta é a maneira mais fácil, sem código 🎉
→ Ir para Shopify Admin → Loja online → Temas → Editar tema → A partir do top dropdown, abra o modelo onde você quer o widget:
- Produtos → Produto padrão (para as páginas do produto)
- Carrinho (para a página do carrinho)
→ No painel esquerdo, clique Adicionar bloco (ou Adicionar seção) → Abaixo Aplicativos, selecionar Bloco de venda cruzada Upsell
→ Nas configurações do bloco, cole o seu Upsell ID na Upsell ID campo → Arraste o bloco para sua posição preferida ⬆️⬇️ → Clique Gravar
💡 Logo após a publicação de um upsell, o aplicativo também mostra Adicionar Bloco de Aplicação botão de atalho no banner de confirmação — ele abre seu editor de tema diretamente com o bloco pronto para adicionar.
⚠️ Se a Upsell ID campo é deixado em branco, o bloco exibe um “Por favor, configure o Upsell ID para usar App Block.” placeholder em vez de seu widget — então sempre cole o ID.
Método 2 — Usando um bloco líquido personalizado / corte de código
Prefere mais controle, ou quer que o widget em algum lugar blocos de aplicativo não estão disponíveis? Use o trecho de código em vez disso.
→ No editor de temas, adicione um Liquido Personalizado bloco ou seção onde você quer o widget → Colar o Excerto de código da Upsell Você copiou da aplicação. Parece isto:
→ Clique Gravar
O aplicativo automaticamente encontra este placeholder na página e renderiza o widget upsell correspondente dentro dele — mesmo que seu tema re-render a seção mais tarde 🔄
💡 Você também pode colar o trecho diretamente nos arquivos Líquidos do seu tema (por exemplo, dentro de uma seção de produto personalizado) se você estiver confortável edição código.
📌 Notas e Avisos Importantes
- ⚠️ A incorporação do aplicativo deve permanecer on — ambos os métodos dependem do Upsell Cross-Sell Slider A incorporação do aplicativo está ativada.
- ⚠️ Projetado para páginas de produto e carrinho — A posição personalizada é construída e suportada para as páginas do produto e a página do carrinho. O widget renderiza onde quer que ele encontre o placeholder bloco / snippet na página, então só colocá-lo nesses modelos — colocando-o em outro lugar (como a página inicial ou coleções) não é suportado e pode produzir resultados inesperados.
- 💡 Um ID = um upsell — o Upsell ID no interior do bloco ou snippet decide que upsell mostra. Para exibir um upsell diferente, troque em seu ID.
- 💡 Colocações múltiplas — pode adicionar o mesmo bloco ou trecho em mais de um ponto (por exemplo, página do produto) e página do carrinho) usando o mesmo Upsell ID.
- ⚠️ Publicar o seu upsell — o volume de vendas deve ser: publicado no aplicativo, caso contrário, nada renderiza na frente da loja.
- ℹ️ As condições de exibição ainda se aplicam — regras de segmentação como status de login do cliente, geolocalização, valor do carrinho ou agendamento ainda são respeitadas em posições personalizadas. Ver 🎯 Opções de Alvo Avançadas para Upsell & Cross Sell para mais pormenores.
🎉 Resultado Final
Assim que tudo estiver preparado:
✅ Seu widget upsell aparece exatamente onde você colocou o bloco ou trecho ✅ Ele atualiza automaticamente com as configurações de conteúdo, design e segmentação do aplicativo ✅ Você pode mover, remover ou re-adicionar livremente a colocação a qualquer momento do editor do tema — não há necessidade de tocar no aplicativo novamente
Aqui está o que parece em uma página de produto:
🛟 Resolução de Problemas
Se seu widget não está aparecendo após a colocação:
- 🔎 Verificar novamente o app incorporar está habilitado e salvo
- 🔎 Confirmar Upsell ID no bloco corresponde ao upsell que publicou
- 🔎 Certifique-se de colocar o bloco em um produto ou carrinho modelo
- 🔎 Verificar o upsell é publicado e não agendado fora da data atual
Ainda preso? Verificar Upsell & Cross Sell não está a mostrar na minha loja [fixo] para uma lista completa.
📚 Guias relacionados
- 🔎 Como encontrar Upsell ID?
- 🎨 Upsell & Cross Sell – Design e Styling
- 🎯 Opções de Alvo Avançadas para Upsell & Cross Sell
- Upsell & Cross Sell não aparece na minha loja
Actualizado em: 15/09/2026
Obrigado!