Compatibilidade: Compatível SOMENTE com temas Shopify Vintage
NOTA: Isso pode não funcionar no seu tema atual
O tema Boundless Shopify tem uma barra lateral personalizável. Você tem um tema do Shopify, mas quer uma barra lateral? Não procure mais. Basta seguir três etapas fáceis abaixo.
Criado com código HTML e CSS apenas com o uso de caixas de seleção de entrada que controlam os outros filhos ou elementos.
Comprovadamente funciona bem em qualquer tema do Shopify que não tenha barra lateral.
- Vá para Loja online> Temas> Ações> Editar código>
- Vá para a pasta Seção, crie uma nova seção e nomeie-a como barra lateral personalizada. Substitua o código abaixo e clique em SALVAR.
- Vá para a pasta Layout e abra theme.liquid. Adicione o código abaixo após a seção do cabeçalho e clique em SALVAR.
Criei o código apenas com CSS para mostrar até onde pode ir um CSS. Se você notar, a barra lateral não fecha quando o mouse se afasta. Seria muito bom ter o foco em CSS, mas o foco não funciona com esta configuração. Pelo menos ainda não, mas não sabemos no futuro. Portanto, se você deseja a função mouseleave ou deseja que a barra lateral feche quando o mouse sai da barra lateral, siga as instruções abaixo.
- Primeiro, no menu_icon, exclua o (for="menu_toggle" ) no rótulo e adicione a função onclick no menu_icon (onclick="openNav()" )
Seu código deve ficar assim:
- Encontre o inside_menu_icon que já foi verificado. Exclua o (for="menu_toggle" ) e adicione a função onclick no menu_icon (onclick="closeNav()" )
Seu código deve ficar assim:
- Encontre o ID sideBar e adicione o (onmouseleave="closeNav()" )
Seu código deve ficar assim:
- Quase pronto. Por último, temos que adicionar o código do script. Abaixo da tag de estilo <style>, adicione o código abaixo:
Há uma razão pela qual adicionei as funções onclick para as entradas menu_icon. Se você notar, o código onmouseleave não funciona bem sem ele. Ele só fechará a barra lateral quando o mouse sair, mas quando você clicar novamente no menu, ele não abrirá.
Eu havia fornecido vários códigos no blog, dê uma olhada. E se você usou o código que tenho, seria aconselhável se inscrever na newsletter ou se inscrever no meu canal do youtube para ficar atualizado quando eu atualizar meus blogs e o youtube também. Os códigos sempre mudam para melhor e eu os mantenho atualizados tanto quanto possível.
Não hesite em contactar-me. Também estou aberto a sugestões sobre o que trabalhar em meu próximo projeto.
Copied!
5 comentários
This code works on Shopify vintage themes only, such us Debut and not Shopify 2.0 themes.
Hi,
it’s seems your code have any failure. Can you check it? When I copy your code and I want to save, I receive an error like this:
Liquid syntax error (line 202): Unexpected character in "settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or request.page_type == ‘article’ or request.page_type == ‘blog’ "
Can you help to fix ?
hi, do you have collection sidebar?
Please be reminded that this only works with the theme that does not have a sidebar (this include the sidebar when in mobile)
Doesnt work – multiple errors