ℹ️ 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.

Hoppy Free Shipping oferece dois tipos de colocação primária para o Free Shipping Bar:

• 📌 Colocações Predefinidas
• 🧩 Colocações Personalizadas

Na maioria dos casos, as áreas de colocação padrão funcionam perfeitamente bem.

No entanto, às vezes os comerciantes podem querer mais flexibilidade e preferem colocar o Free Shipping Bar em um local completamente personalizado, dependendo do layout da loja.

É exatamente onde o Posição Personalizada recurso torna-se útil ✨

Usando a posição personalizada, a barra de envio livre pode ser colocada:

• Dentro Shopify Blocos de Aplicações
• Dentro de Seções Líquidas Personalizadas
• Ficheiros de Tema Interior
• Locais de armazenamento controlados manualmente

Esta documentação explica como habilitar corretamente a Posição Personalizada e como colocar a Barra de Envio Livre usando ambos os métodos disponíveis.

⚠️ Compreender as diferenças de fluxo de trabalho

O comportamento de posição personalizada depende do tipo de fluxo de trabalho selecionado ao criar a configuração Upsell Frete Livre.

🎯 Baseado em Objetivos (Multiple Placement)

A Baseado em Objetivos O fluxo de trabalho inclui várias áreas de colocação:

• Página do produto
• Gaveta de Carrinhos
• Página do Carrinho
• Banner

Para este fluxo de trabalho:

→ Abra a guia de colocação que você deseja personalizar
→ Mudar a sua colocação para Posição Personalizada

Uma vez habilitada:

→ A Excerto do Código da Barra de Envio fica disponível

⚠️ Importante:

A página de colocação deve ser alterada para Posição Personalizada.

Caso contrário, a Barra de Envio Livre continuará usando o comportamento de colocação padrão.

📍 Com base na colocação (posição única)

A Baseado na Colocação O fluxo de trabalho controla apenas uma área de colocação.

Para este fluxo de trabalho, dois métodos de Posição Personalizada ficam disponíveis:

1. 🆔 ID da Barra de Envio
2. 🧩 Excerto do Código da Barra de Envio

🆔 ID da Barra de Envio

Este método é utilizado principalmente com Shopify Blocos de aplicação.

O ID da barra de envio conecta o bloco de app storefront com a configuração de envio livre selecionada.

🧩 Excerto do Código da Barra de Envio

Este método proporciona maior flexibilidade de colocação.

O trecho de código pode ser:

• Adicionado dentro de um bloco de líquido personalizado
• Adicionado diretamente em Shopify Arquivos de tema

🛠️ Passo 1 — Abrir Hoppy Free Shipping

Abrir o Hoppy Free Shipping app a partir da sua Shopify Admin.

📂 Passo 2 — Abra ou crie uma Upsell Frete Grátis

Você pode:

→ Abra uma configuração de Upsell Frete Livre existente
→ Ou criar uma nova configuração

⚙️ Passo 3 — Navegue até as configurações de colocação

O próximo passo depende do tipo de fluxo de trabalho atualmente em uso.

🎯 Baseado no fluxo de trabalho dos objetivos

Se estiver a utilizar Baseado em Objetivos fluxo de trabalho:

→ Abra a guia de colocação onde você deseja colocar manualmente a Barra de Envio Grátis

Exemplos:

• Página do produto
• Gaveta de Carrinhos
• Página do Carrinho
• Banner

📍 Baseado no fluxo de trabalho de colocação

Se estiver a utilizar Baseado na Colocação fluxo de trabalho:

→ Navegar diretamente para o Colocação aba

Uma vez que este fluxo de trabalho controla apenas uma colocação, todas as configurações relacionadas com a colocação aparecerão lá.

🎯 Passo 4 — Mudar de posição para posição personalizada

Dentro das configurações de colocação:

→ Alterar o Mostrar Ligado (Incluir) ou Colocação opção para:

Posição Personalizada

Depois:

→ Clique Gravar

⚠️ Importante:

Habilitar a Posição Personalizada remove a Barra de Envio Livre das áreas de colocação padrão.

A Barra de Frete Grátis aparecerá agora apenas onde você colocá-la manualmente.

ℹ️ Se utilizar Baseado em Objetivos fluxo de trabalho, ir para Método 2.

🆔 Método 1 — Utilização do ID da barra de transporte

Este método é ideal quando você quer colocar o Free Shipping Bar diretamente usando ShopifyEditor Temático.

ℹ️ Este método está disponível principalmente para Baseado na Colocação fluxo de trabalho.

🎨 Passo 5 — Abrir Shopify Editor de Temas

De Shopify Administrador:

→ Ir para Canais de Vendas → Loja Online
→ Clique Editar tema

Isto abre o Shopify Editor de temas.

➕ Passo 6 — Adicione o bloco de aplicativo de envio gratuito

Dentro do Editor de Temas:

→ Navegue para a seção onde você quer que a Barra de Frete Grátis apareça
→ Hover em torno de seções compatíveis até a cor azul ➕ ícone aparece
→ Clique Adicionar bloco

Depois:

→ Abra o Aplicativos categoria
→ Selecionar Frete grátis Upsell

O Bloco App será agora adicionado à área de armazenamento selecionada.

🔗 Passo 7 — Adicionar o ID da barra de transporte

Uma vez adicionado o Bloco de Aplicação:

→ Insira o ID da barra de envio dentro das configurações do bloco de aplicativo

Depois:

→ Salve o Shopify Tema
→ Salve a configuração de envio livre dentro Hoppy Free Shipping também

⚠️ Importante:

Ambas as economias são necessárias.

Caso contrário, o Free Shipping Bar pode não aparecer corretamente na frente da loja.

🧩 Método 2 — Utilização do código da barra de transporte

Este método é útil quando você quer mais flexibilidade de colocação avançada.

O Código de Barra de Envio pode ser:

• Adicionado usando um bloco de líquido personalizado
• Adicionado diretamente em Shopify Arquivos de tema

ℹ️ Este é o único método de Posição Personalizada disponível para Baseado em Objetivos fluxo de trabalho.

➕ Passo 8 — Adicionar um bloco líquido personalizado

Dentro Shopify Editor de temas:

→ Navegue para a área onde você quer que a Barra de Frete Grátis apareça
→ Hover em torno de seções compatíveis até a cor azul ➕ ícone aparece
→ Procurar Liquido Personalizado

Depois:

→ Adicione o código de barra de envio dentro do bloco líquido personalizado

Isso permite que a Barra de Envio Livre renderize na posição de frente da loja selecionada.

💻 Adicionando o trecho de código diretamente em arquivos de tema

Se necessário, o Excerto de Código de Barra de Envio também pode ser adicionado diretamente em Shopify Arquivos de código de tema.

Isto é útil quando:

• Blocos de aplicativos não estão disponíveis
• Seções líquidas personalizadas não são suportadas
• A personalização avançada do storefront é necessária

⚙️ Abertura Shopify Editor de Códigos

Para abrir o Shopify Editor de Código:

→ Ir para Canais de Vendas → Loja Online
→ Clique no menu de três pontos ao lado do Editar tema botão
→ Clique Editar código

⚠️ Importante:

Não recomendamos modificar Shopify Arquivos de tema a menos:

• Você está confortável trabalhando com Shopify código
• Ou você entende que mudanças estão sendo feitas

Modificações incorretas no interior Arquivos de tema podem afetar o comportamento storefront.

🧩 Identificar a área correta à frente da loja

Antes de inserir o Excerto do Código da Barra de Envio, é importante identificar o local exato da loja onde a Barra de Envio Livre deve aparecer.

Uma maneira simples de fazer isto:

→ Abra sua frente de loja no navegador
→ Botão direito do mouse perto da área onde você quer a Barra de Frete Grátis
→ Clique Inspecionar

Isto abre as Ferramentas de Desenvolvimento do navegador.

A partir daí:

→ Inspecione a estrutura HTML circundante
→ Identificar nomes de classe ou referências de seção úteis
→ Combine essas seções com as correspondentes Shopify .liquid arquivos no Editor de Código

Isso ajuda você a localizar o arquivo de tema correto com mais precisão ✨

---

🔍 Encontrando o arquivo de tema correto

Após a abertura do Shopify Editor de Código:

→ Navegue através dos arquivos de tema no lado esquerdo
→ Localizar o .liquid arquivo responsável pela área onde você quer que a Barra de Frete Grátis apareça
→ Procure qualquer referência de id/classe usando o recurso de Pesquisa do Editor de Código.
→ Clique no mais promissor .liquid arquivo

Por exemplo:

• Podem existir secções relacionadas com o produto no interior:
• • main-product.liquid
  • product-template.liquid
• Podem existir secções relacionadas com o carrinho no interior:
• • cart.liquid
  • cart-drawer.liquid
• Seções personalizadas podem existir dentro:
• • sections/*.liquid

➕ Adicionar o Excerto de Código de Barra de Envio

Uma vez o correcto .liquid O ficheiro está identificado:

→ Colar o Excerto de Código da Barra de Envio na posição desejada dentro do arquivo

⚠️ Importante:

Certifique-se de que o trecho é adicionado cuidadosamente no local correto.

A colocação incorrecta pode causar:

• Questões de disposição
• Rendimento inadequado
• Comportamento inesperado do storefront

💾 Gravar o Ficheiro de Tema

Após inserir o trecho de código:

→ Clique Gravar

Depois:

→ Atualizar a visualização do storefront
→ Verifique se a barra de envio livre aparece corretamente no local personalizado selecionado ✨

🎉 Resultado Final

Uma vez configurado com sucesso:

✅ A Barra de Frete Grátis pode aparecer em posições totalmente personalizadas
✅ Shopify App Blocks pode conectar corretamente usando o ID da barra de envio
✅ Posicionamento avançado de storefront torna-se possível usando Excertos de Código
✅ Os comerciantes ganham muito mais flexibilidade sobre a visibilidade da loja ✨

Actualizado em: 10/09/2026