> ## 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 posicionar o caça-níqueis na página do carrinho > ℹ️ **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. Cada tema apresenta sua página Cart de forma um pouco diferente — então o caça-níqueis deve sentar exatamente onde faz sentido para _sua_ guardar 📍 Com o **Posição** configurações em Hoppy Delivery Dates, você pode controlar onde o caça-níqueis aparece na página Carrinho, como ele está alinhado, e quão grande é — separadamente para Desktop e Mobile. --- # **📌 Antes de começar** * Hoppy Delivery Dates está instalado e o aplicativo embed está habilitado em seu tema * Estás ligado ao teu Shopify administrador * (Opcional) Se você planeja usar um seletor CSS personalizado, ajuda a conhecer a estrutura HTML do seu tema — a ferramenta Inspecionar do seu navegador é seu amigo aqui 🔍 --- # **Passo 1 — Abra a Página de Aparência** Na navegação do aplicativo, acesse: **Hoppy Delivery Dates → Aparência** Encontrar o **Posição** cartão — é o primeiro cartão na página. --- # **Passo 2 — Escolha uma aba do dispositivo** O cartão tem duas abas: * **Área de trabalho** 🖥️ * **Telemóvel** 📱 As configurações são salvas separadamente para cada, para que você possa ajustar a posição para telas maiores e menores. Configure uma aba, depois mude para a outra e repita se necessário. --- # **Passo 3 — Escolha Onde o Selector Aparece** Embaixo _"Onde queres posicionar o escolhidor de datas?"_, escolha uma das opções de rádio: * **Predefinição (antes do botão de checkout ou fim da página do carrinho)** → o aplicativo automaticamente coloca o seletor perto do botão de checkout. Isso funciona fora da caixa para a maioria das lojas, uma vez que o aplicativo detecta seu tema e usa uma colocação correspondente — nenhuma configuração necessária ✅ * **Antes de um elemento HTML** → o coletor é colocado pouco antes do elemento especificado * **No início de um elemento HTML** → o coletor é colocado dentro do elemento, antes de seu conteúdo existente * **No final de um elemento HTML** → o coletor é colocado dentro do elemento, após o seu conteúdo existente * **Depois de um elemento HTML** → o coletor é colocado logo após o elemento especificado ### **Usando um seletor CSS personalizado** Escolher qualquer outra opção que não **Predefinição** revela um campo de texto extra. Digite o seletor CSS do elemento que você deseja atingir. * Exemplo do placeholder: `.cart_input` * Exemplo de classe: `.cart-footer` * Exemplo de ID: `#main-cart-footer` ⚠️ Se o seletor CSS não corresponder a nenhum elemento na sua página de Carrinho, o seletor de fendas pode não aparecer. Verifique novamente o seletor usando a ferramenta Inspecionar do seu navegador, e sempre veja a página Carrinho após salvar para confirmar que o seletor está visível. 💡 Se o seletor desaparecer depois de definir um seletor personalizado, volte para **Predefinição** e salvar — essa é a maneira mais rápida de restaurá-lo. --- # **Passo 4 — Alinhar** Escolha como o captador se alinha dentro de seu recipiente: * **Centro** * **Esquerda** * **Direita** ### **Exemplo** * Um tema amplo e mínimo muitas vezes fica melhor com **Centro** * Se o resumo do seu carrinho estiver à direita, **Esquerda** pode manter as coisas equilibradas --- # **Passo 5 — Definir a Largura do Container (Opcional)** Utilização **Largura do recipiente de caça-níqueis** para controlar a largura do coletor: * Digite um número no campo largura (por exemplo. `100`) * Escolha a unidade na lista ao lado: **%** ou **px** ### **Exemplo** * `100` + `%` → o coletor se estende para preencher o espaço disponível * `400` + `px` → um coletor compacto de largura fixa ℹ️ Este campo é opcional — deixe-o vazio para deixar o coletor usar sua largura natural. --- # **Passo 6 — Salve e verifique sua loja** Clique **Gravar** no topo da página. Em seguida, abra a página de carrinho da sua loja e confirme que o catador fica exatamente onde você queria. Lembre-se de verificar no desktop e no celular se você configurou ambas as abas 👀 --- # **⚠️ Notas Importantes** ⚠️ As posições Desktop e Mobile são configuradas de forma independente — alterar uma aba não afeta a outra. ℹ️ A **Predefinição** opção é tema-saber: o aplicativo detecta seu tema e escolhe um local adequado automaticamente, por isso é a escolha mais segura se você não tiver certeza. ⚠️ Um seletor CSS errado ou desatualizado (por exemplo, depois de mudar de tema) é o motivo mais comum pelo qual o seletor para de mostrar — verifique-o primeiro se isso acontecer. --- # **🎉 Resultado Final** Uma vez configurado com sucesso: ✅ O caça-níqueis aparece exatamente onde você quer na página Carrinho ✅ Desktop e Mobile cada obter a sua colocação ideal ✅ Alinhamento e largura fazer o catador se sentir como uma parte natural do seu tema ✨