> ## 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 colocar bar de envio gratuito em uma 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. 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 ✨