Publicando no Shopify

Passo 2: (Shopify) Publique o menu em seu site.

I) MÉTODO 1: INSERIR (ANTES OU DEPOIS) DESTE MENU EM UM LOCAL ESPECÍFICO NO SEU SITE, OU SUBSTITUIR UM MENU EXISTENTE, USANDO UM SELETOR CSS. (RECOMMENDED)

I.1. Ative o Navi+ em Embeds de Aplicativos

Passo 1: Clique em Loja Online, depois clique em Temas. Dica: Clique com o botão direito em Loja Online e selecione “Abrir Link em Nova Aba” para economizar tempo.

Passo 2: Selecione o tema onde você deseja publicar o menu. Clique: Personalizar

• Se o seu site é novo e ainda não tem usuários, sinta-se à vontade para publicar o menu sem preocupações—você pode ativá-lo ou desativá-lo a qualquer momento sem afetar os visitantes.
• Se o seu site já tem tráfego regular, seja mais cauteloso. A melhor prática é criar um Tema duplicado e testar o Navi+ nessa versão primeiro.

Passo 3: Vá para Embeds de Aplicativos, encontre “Navi+ em Todas as páginas”, e ative-o.

Passo 4: Não se esqueça de clicar em “Salvar” para aplicar as alterações.

Após esses 4 passos, o Navi+ foi instalado em seu site e está pronto para exibir. No entanto, o processo ainda não está completo. Volte para a aba do aplicativo Navi+ para realmente ativar Publicar Menu.

I.2. Entendendo o Seletor CSS

Um Seletor CSS é uma maneira de direcionar um elemento HTML específico em sua página da web. O Navi+ o utiliza para saber exatamente onde colocar seu menu — se deve inseri-lo antes ou depois de um elemento, ou substituir um existente completamente.

Para encontrar o Seletor CSS correto para o seu site, você pode usar:

• Modo de Depuração — ferramenta integrada do Navi+: passe o mouse sobre qualquer elemento e copie instantaneamente seu seletor
• DevTools do Navegador — método manual usando o inspetor do seu navegador

Como encontrar o seletor CSS usando o DevTools do Navegador

Você pode conversar com um apoiador do Navi+ para obter ajuda instantânea em vez de fazer isso sozinho. No entanto, se você quiser fazer isso por conta própria, siga as capturas de tela abaixo.

I.3. Três opções de publicação

Passo 1: Clique no botão Publicar no site.

Passo 2: Ative o toggle “Publicar menu pelo método Inserir/Substituir”.

Passo 3: Insira seu Seletor CSS e escolha uma das três opções de publicação abaixo.

Opção 1: Inserir Antes (mais comum para Menu em Grade)

Insere o menu Navi+ imediatamente antes do elemento selecionado.

Exemplo: Seletor CSS main → o Menu em Grade aparece acima da área de conteúdo principal da página.

Seletores CSS comuns para temas Shopify (Dawn, Sense, Savor, Horizon):

• main — a maioria dos temas Shopify
• #MainContent — tema Shopify Dawn

Não está nesta lista? Converse com um apoiador do Navi+, ou use Modo de Depuração ou DevTools do Navegador.

Opção 2: Inserir Depois

Insere o menu Navi+ imediatamente depois do elemento selecionado.

Exemplo: Seletor CSS header → o Menu em Grade aparece logo abaixo do cabeçalho.

Seletores CSS comuns para temas Shopify (Dawn, Sense, Savor, Horizon):

• header — a maioria dos temas Shopify
• .header-wrapper — alguns temas

Não está nesta lista? Converse com um apoiador do Navi+, ou use Modo de Depuração ou DevTools do Navegador.

Opção 3: Substituir

Na maioria das lojas Shopify, não há um elemento de Menu em Grade embutido para substituir. Inserir Antes main é a abordagem recomendada.

Se o seu tema tiver um elemento de estilo grade que você deseja substituir, use Modo de Depuração ou DevTools do Navegador para encontrar seu seletor.

I.4. Direcionamento específico para dispositivos

Você pode controlar se o Seletor CSS se aplica em dispositivos móveis, desktops ou ambos, adicionando um sufixo:

Sufixo	Aplica-se a
(M)	Somente móvel
(D)	Somente desktop
(nenhum)	Ambos, móvel e desktop

Exemplos: main(D) — somente desktop · main(M) — somente móvel · main — ambas as plataformas.

II) MÉTODO 2: ADICIONAR ESTE MENU COMO UMA SEÇÃO/BLOCO NO TEMA DO SHOPIFY

Este método insere o menu adicionando um Bloco/Seção no seu tema Shopify. É uma abordagem tradicional, então não a descreverei em detalhes. Com este método, você não precisa nem mesmo “Ativar o Navi+ em Embeds de Aplicativos” como exigido no Passo 1 do Método 1.

Copie o ID de Embed deste menu, depois insira no bloco chamado “Navi+ na Seção” nas Seções do Tema. Você pode adicionar um título, configurar a largura total e ajustar a margem para esta seção após adicioná-la.

Guia para adicionar este menu como uma seção/bloco no tema do Shopify

Abaixo está um guia detalhado sobre como inserir um menu Navi+ como uma seção/bloco no seu tema Shopify. Este método permite que você adicione o menu de uma maneira padrão, suportada pelo Shopify, embora não seja tão flexível quanto os outros métodos fornecidos pelo Navi+.

Este método se aplica a Menus Mega e Menus em Grade. Ele NÃO SE APLICA a Tabbar, FAB ou Menus de Slide.