Publicando no Shopify

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

2.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.

2.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 (visível apenas quando aberto pelo usuário)”.

Passo 3: Selecione o método de exibição

Método 1: Abra este menu a partir de outro item de menu do Navi+ usando a sintaxe open:NaviMenu

Este método permite que você abra um slide menu quando o usuário clica ou toca em um item de menu de outro menu do Navi+ (por exemplo: em uma tab bar, um FAB no canto inferior da tela, ou um mega menu). Principais propósitos deste método:

Propósito 1: Melhor visibilidade e experiência do usuário ao mostrar o mapa do site completo no slide menu enquanto mantém fácil acesso.

O slide menu é ideal para exibir o mapa completo do seu site graças ao seu grande espaço e layout flexível, tornando-o perfeito para mostrar todo o catálogo de produtos, links para páginas principais, blogs, ferramentas de suporte, etc. No entanto, o slide menu é frequentemente menos visível por padrão. Para melhorar a descobribilidade, você pode usar outro menu do Navi+ (como uma tab bar) para apresentar seus links mais importantes e reconhecíveis, e colocar um item de menu destacado que aciona o slide menu. Isso garante melhor visibilidade e engajamento do usuário para o slide menu.

Propósito 2: Profundidade de menu ilimitada com uma estrutura de menu grande e flexível (Apenas Navi+)

Em vez de mostrar um popup com espaço limitado quando um item de menu é clicado, você pode abrir outro slide menu com três níveis e várias maneiras de apresentar informações. Isso pode ser repetido para outros itens de menu—ou até mesmo para o mesmo slide menu—permitindo que você crie uma profundidade virtualmente ilimitada para seus menus do Navi+.

Método 2: Quando um elemento de UI (definido por um seletor CSS como #id_of_element ou .class_name) é clicado ou tocado, este menu será exibido.

Este é, sem dúvida, o melhor e mais comumente usado método com o Slide Menu.
Neste guia, vamos nos concentrar em substituir o menu hamburger padrão do site em dispositivos móveis.
Você também pode aplicar este método de forma criativa, encontrando e usando outros seletores CSS para acionar o menu.

Como substituir o menu hamburger padrão do seu site pelo Navi+ Slide Menu (Guia Popular)?

Na maioria dos sites Shopify, o menu hamburger padrão é gerado a partir da versão desktop via design responsivo. Como resultado, geralmente é muito simples, tem profundidade rasa e não suporta ícones, imagens ou layouts avançados. Substituí-lo por um Navi+ Slide Menu é uma escolha comum e prática para aproveitar os recursos avançados do Navi+.

Para fazer isso, basta identificar o seletor CSS do ícone do menu hamburger 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..
#Details-menu-drawer-container
  1. Não está nesta lista, não se preocupe
- Você pode conversar com um suporte 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 no seu site?

Você pode conversar com um suporte 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 ask parâmetro de consulta:

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.

2.3. Importante! Otimize a velocidade do slide menu, adicione um efeito de carregamento e previna menus duplicados

Não é algo que você precisa corrigir imediatamente, mas a longo prazo é importante para a experiência do slide menu criada pelo Navi+. Antes que o Navi+ substitua completamente o antigo slide menu, o menu original do tema ainda está ativo. Por um breve momento—cerca de meio segundo—se um usuário carrega o menu e rapidamente toca no botão hamburger (um caso raro, mas ainda possível), o menu antigo do tema pode aparecer e causar um erro visual.

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 a um aqui:

Slide Menu: Adicione um efeito de carregamento e bloqueie o seletor de acionamento

Muito simples: basta inserir o seletor CSS que você usa para o Slide Menu na seção de embed do aplicativo Navi+ (veja a imagem abaixo).

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.