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 menu deslizante 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). Os 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 menu deslizante enquanto o mantém fácil de acessar.

O menu deslizante é 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 menu deslizante é 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 menu deslizante. Isso garante melhor visibilidade e engajamento do usuário para o menu deslizante.

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 menu deslizante 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 menu deslizante—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 #idofelement ou .classname) é 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 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 no 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.

2.3. Importante! Otimize a velocidade do menu deslizante, 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 menu deslizante criada pelo Navi+. Antes que o Navi+ substitua completamente o antigo menu deslizante, 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+ 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:

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

Muito simples: basta inserir o seletor CSS que você usa para o Menu Deslizante 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.