Publicando no Shopify
Passo 2: (Shopify) Publique o menu em seu site.
I) MÉTODO 1: INSERIR (ANTES OU DEPOIS) ESTE MENU EM UM LOCAL ESPECÍFICO EM 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. 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.
- Seletores CSS para alguns temas populares e gratuitos.. do Shopify como Dawn, Sense, Savor, Horizon..
header
- 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 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.
- Seletores CSS para alguns temas populares e gratuitos.. do Shopify como Dawn, Sense, Savor, Horizon..
.header-menu
- 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 em 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.
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 instantaneamente o troca 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+ 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:
- O Shopify prioriza o carregamento de seus próprios recursos primeiro.
- Depois, o Shopify carrega o conteúdo do tema.
- 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.
- Deixe sem 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.
