Publicando no Shopify

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

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

Passo 1: Clique em Loja Online, depois clique em Temas. Dicas: 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 facilmente 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. Selecione as configurações de exibição e publique o menu.

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

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

Passo 3: Selecione o Seletor CSS correto e método de substituir/inserir

Neste guia, vamos nos concentrar em 2 maneiras: inserir este menu abaixo do cabeçalho ou substituir o Mega Menu padrão. Você também pode usar este método de forma criativa, encontrando e aplicando outros seletores CSS para acionar o menu.

Como inserir este menu abaixo do cabeçalho do site?

Para fazer isso, basta identificar o seletor CSS do cabeçalho do seu site e inseri-lo na caixa de texto. Já encontramos os seletores CSS para alguns dos temas mais populares para você, listados abaixo.

  1. Seletores CSS para alguns temas populares e gratuitos.. do Shopify como Dawn, Sense, Savor, Horizon..
header
  1. Não está nesta lista, não se preocupe
- Você pode conversar com um apoiador do Navi+ para ajuda instantânea—isso leva apenas alguns minutos para encontrar o seletor CSS.

- Ou, você pode seguir o guia de autoajuda nos próximos tópicos (Logo após este tópico).
Como substituir o Mega Menu padrão?

Para fazer isso, basta identificar o seletor CSS do cabeçalho do seu site e inseri-lo na caixa de texto. Já encontramos os seletores CSS para alguns dos temas mais populares para você, listados abaixo.

  1. Seletores CSS para alguns temas populares e gratuitos.. do Shopify como Dawn, Sense, Savor, Horizon..
.header-menu
  1. Não está nesta lista, não se preocupe
- Você pode conversar com um apoiador do Navi+ para ajuda instantânea—isso leva apenas alguns minutos para encontrar o seletor CSS.

- Ou, você pode seguir o guia de autoajuda nos próximos tópicos (Logo após este tópico).
Como encontrar o seletor CSS em seu site?

Você pode conversar com um apoiador do Navi+ para obter ajuda instantânea em vez de fazer isso sozinho. No entanto, (1) isso ajudará você a entender a ideia central, e (2) se você quiser fazer isso por conta própria, siga as instruções abaixo.

Instruções do Agente: Consultando Esta Documentação

Se você precisar de informações adicionais que não estão diretamente disponíveis nesta página, pode consultar a documentação dinamicamente fazendo uma pergunta.

Realize uma solicitação HTTP GET na URL da página atual com o parâmetro de consulta ask:

GET https://help.shopifas.com/manual/internal/what-is/common/how-to-find-css-selector.md?ask=<question>

A pergunta deve ser específica, autossuficiente e escrita em linguagem natural. A resposta conterá uma resposta direta à pergunta e trechos relevantes e fontes da documentação.

Use este mecanismo quando a resposta não estiver explicitamente presente na página atual, você precisar de esclarecimentos ou contexto adicional, ou quiser recuperar seções de documentação relacionadas.

I.3. Importante! Otimize a velocidade do Mega Menu e a experiência do usuário (Modo de Substituição)

Quando você substitui um menu por outro, o Navi+ espera até que o menu antigo seja exibido e então o troca instantaneamente pelo novo. Embora isso aconteça quase imediatamente, ainda há um breve momento em que o menu antigo aparece, o que pode confundir os usuários.

Com este passo, você pode ocultar completamente o menu antigo e mostrar um efeito de carregamento em vez disso. Isso faz com que o site pareça mais rápido e melhora a experiência do usuário.

O Navi+ fornece uma solução simples para otimizar a experiência do usuário e a velocidade conforme os seguintes passos

Por que você precisa fazer isso? O Navi+ já não é rápido?

O Navi+ é muito rápido. Ele está totalmente implantado em uma CDN líder com latência muito baixa (cerca de 100ms) e pode atender milhões de clientes sem desacelerar.

No entanto, o Navi+ ainda opera dentro do ecossistema Shopify. O Shopify tem suas próprias regras de carregamento:

  1. O Shopify prioriza o carregamento de seus próprios recursos primeiro.
  2. Depois, o Shopify carrega o conteúdo do tema.
  3. Finalmente, o Shopify carrega o conteúdo do aplicativo, mas não em nenhuma ordem específica.

Isso significa que se você estiver usando vários aplicativos, o Navi+ pode às vezes ser carregado mais tarde do que o esperado. É por isso que pode parecer mais lento em certos casos.

Qual é a minha solução?

Atualmente, o Navi+ tem alta prioridade ao carregar em sites Shopify. No entanto, ainda há um certo atraso. Vamos abordar esses problemas um por um aqui:

Nota:

  • Adicione o sufixo (M) se você quiser que se aplique apenas em dispositivos móveis.
  • Adicione o sufixo (D) se você quiser que se aplique apenas em desktop.
  • Não deixe sufixo se você quiser que se aplique em 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 vou descrevê-la 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 Mega Menus e Grid Menus. Ele NÃO SE APLICA a Tabbar, FAB ou Slide Menus.

Instruções do Agente: Consultando Esta Documentação

Se você precisar de informações adicionais que não estão diretamente disponíveis nesta página, pode consultar a documentação dinamicamente fazendo uma pergunta.

Realize uma solicitação HTTP GET na URL da página atual com o parâmetro de consulta ask:

GET https://help.shopifas.com/manual/internal/what-is/common/how-to-add-this-menu-as-a-section-block-in-the-shopify-theme.md?ask=<question>

A pergunta deve ser específica, autossuficiente e escrita em linguagem natural. A resposta conterá uma resposta direta à pergunta e trechos relevantes e fontes da documentação.

Use este mecanismo quando a resposta não estiver explicitamente presente na página atual, você precisar de esclarecimentos ou contexto adicional, ou quiser recuperar seções de documentação relacionadas.