> ## 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 contagem regressiva 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. O aplicativo oferece dois tipos de colocação primária para configurações de contagem regressiva: * 📌 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 Countdown 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 contagem regressiva 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 o Countdown usando ambos os métodos disponíveis. --- # **🛠️ Passo 1 — Abra o aplicativo** Abra a aplicação do seu Shopify Admin. --- # **📂 Passo 2 — Abrir ou Criar uma Configuração de Contagem Regressiva** Você pode: → Abra uma configuração de contagem regressiva existente → Ou criar uma nova configuração --- # **⚙️ Passo 3 — Navegue até a Página de Colocação** → Abra o **Colocação** tab dentro da configuração de contagem regressiva. A aba Colocação controla onde e como o Countdown aparece na frente da loja. --- # **🎯 Passo 4 — Mudar de posição para posição personalizada** Dentro das configurações de colocação: → Alterar a opção de colocação para: **Posição Personalizada** → Depois: Clique **Gravar** ⚠️ Importante: Habilitar a Posição Personalizada remove a Contagem Regressiva das áreas de colocação padrão. A contagem regressiva irá agora aparecer apenas onde é colocado manualmente. --- # **🆔 Método 1 — Utilização do ID de contagem decrescente** Este método é ideal quando você quer colocar o Countdown diretamente usando ShopifyEditor Temático. --- # **🎨 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 aplicação de contagem regressiva** Dentro do Editor de Temas: → Navegue para a seção onde você quer que o Countdown apareça → Hover em torno de seções compatíveis até a cor azul ➕ ícone aparece → Clique **Adicionar bloco** Depois: → Abra o **Aplicativos** categoria → Selecione o bloco de aplicação de contagem regressiva O Bloco App será agora adicionado à área de armazenamento selecionada. --- # **🔗 Passo 7 — Adicionar o ID de contagem regressiva** Uma vez adicionado o Bloco de Aplicação: → Digite o ID de contagem regressiva dentro das configurações do bloco de aplicativo Depois: → Salve o Shopify Tema → Salve a configuração de contagem regressiva dentro do aplicativo também ⚠️ Importante: Ambas as economias são necessárias. Caso contrário, o Countdown pode não aparecer corretamente na frente da loja. --- # **🧩 Método 2 — Usar o Excerto de Código de Contagem Regressiva** Este método é útil quando você quer mais flexibilidade de colocação avançada. O trecho do código de contagem regressiva pode ser: * Adicionado usando um bloco de líquido personalizado * Adicionado diretamente em Shopify Arquivos de tema --- # **➕ Passo 8 — Adicionar um bloco líquido personalizado** Dentro Shopify Editor de temas: → Navegue para a área onde você quer que o Countdown apareça → Hover em torno de seções compatíveis até a cor azul ➕ ícone aparece → Procurar **Liquido Personalizado** Depois: → Adicione o trecho de código de contagem regressiva dentro do bloco líquido personalizado Isto permite que a Contagem Regressiva seja renderizada na posição do storefront seleccionada. --- # **💻 Adicionando o trecho de código diretamente em arquivos de tema** Se necessário, o Countdown Code Snippet 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** ⚠️ Importante: Não é recomendado 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. 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** --- # **🧩 Identificar a área correta à frente da loja** Antes de inserir o Countdown Code Snippet, é importante identificar o local exato do storefront onde o Countdown 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 contagem regressiva → 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 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 deseja que o Countdown 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 Contagem Regressiva** Uma vez o correcto `.liquid` O ficheiro está identificado: → Colar o trecho de código de contagem regressiva 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 contagem regressiva aparece corretamente na localização personalizada selecionada ✨ --- # **🎉 Resultado Final** Uma vez configurado com sucesso: ✅ A contagem regressiva pode aparecer em posições totalmente personalizadas ✅ Shopify Blocos de aplicativos podem se conectar corretamente usando o ID de contagem regressiva ✅ 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 ✨