Dynamic Shopify Breadcrumbs

Breadcrumbs dinâmicos do Shopify

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: todos os temas do Shopify funcionam melhor com os temas GRATUITOS do Shopify 2.0

Vários clientes têm buscado um sistema de navegação estrutural eficaz que funcione perfeitamente com os estilos CSS dos temas GRATUITOS do Shopify 2.0.

Embora exista um código de localização complementar do Shopify , sua compatibilidade com temas individuais pode variar. Além disso, existem desafios conhecidos com o recurso ‘current_tags’.

Para resolver isso, desenvolvemos um trecho de código que pode detectar o URL anterior. Se um usuário navegar de uma página de coleção para uma página de produto, a localização atual exibirá o título da coleção. Em outros casos, o metacampo de coleção atribuído será usado para exibir informações relevantes.

Você pode conferir a loja de demonstração aqui . Senha: made4uo

O que você está comprando:

  • Uma seção de localização atual do Shopify
  • Escolha setas diferentes
  • A localização atual aparecerá no produto, coleção, artigo e página
  • O título da coleção com link será exibido no meio quando você abrir um produto na página da coleção e substituirá o metacampo da coleção atribuído

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para criar o metacampo:

1. Na sua página de administração, clique em Configurações no canto inferior esquerdo

2. Vá para Metacampo/Dados Personalizados e depois Produtos. Siga os campos abaixo e SALVAR.

coleção atribuída a um produto

3. Em seguida, você precisa ir para seus Produtos. Na sua página Admin, clique em Produto no lado esquerdo. Escolha o produto e role até o fim. Você deverá ver o metacampo assign_collection. Escolha a coleção que deseja atribuir e clique em SALVAR

Imagem do metacampo de localização atual do Shopify

Para iniciar:

1. Na sua página de administração, clique em Loja Online > Temas > Ações > Editar código
2. Na pasta Seção, crie uma seção e nomeie-a como "shopify-breadcrumbs"
3. Abra a seção recém-criada e cole o código abaixo. Certifique-se de clicar em SALVAR.

4. Em seguida, vá para a pasta Layout e abra theme.liquid.

5. Encontre o {% section 'header' %} e adicione o código abaixo depois dele.

6. Em seguida, vá para a página do personalizador de tema. Clique nos três pontos no canto superior esquerdo e escolha Personalizar tema para personalizar.

É isso (",)

Copied!
Voltar para o blogue

2 comentários

@ILONKA I believe this is fixed. I would suggest to contact us using “Chat with us” to assist you timely

Made4Uo

Hello,
I just implemented “breadcrumbs”, it works perfectly on product pages or collections. but not so good on blog pages. It shows only “Home” and the blog post, but not in which blog you are (I have two blogs). For example it should be “Home > Puppy Blog > Stay Alone”, instead the display is only “Home > Stay Alone” . Do you have a solution for this? Thank you very much, Ilonka

PS: I have also implemented Infinite Scroll, it works very well, thanks for that.

Ilonka

Deixe um comentário