Menu de loja parece detalhe até você olhar para o comportamento de quem entra no seu site. A pessoa chega procurando um vestido, não encontra a categoria em poucos segundos e fecha a aba. Não foi falta de interesse no seu produto, foi falta de caminho até ele.
O mega menu resolve isso mostrando tudo de uma vez. Em vez de uma listinha de texto que abre embaixo do menu, a pessoa vê um painel largo com todas as categorias em foto, uma busca que já mostra os produtos enquanto ela digita e uma sacola que abre pela lateral sem tirar ninguém da página. É o tipo de acabamento que as grandes lojas têm e que costuma ficar de fora das lojas pequenas, porque parece coisa de programador.
E é aqui que muda o jogo. Você não precisa saber programar nem contratar alguém para ter esse menu na sua loja. Com um prompt bem escrito, a IA entra no seu site, lê as categorias reais, pega as cores da sua marca e devolve o menu inteiro pronto para colar em um widget HTML do Elementor.
Neste mapa mental eu deixei esse prompt pronto para você copiar. São só dois campos que você troca, o link da sua loja e o link da sua logo, e o resto o prompt já resolve. Clique em cada fase para abrir o conteúdo e vá seguindo na ordem.
Mega menu completo com IA na sua loja
Você copia um prompt pronto, troca só dois links e cola em um widget HTML do Elementor. A IA lê a sua loja WordPress e monta o mega menu inteiro, com busca em popup e sacola lateral.
Prompt do mega menu para loja WordPress
SITE PARA ANALISAR: [link do seu site]
LOGO: [link da sua logo]
Junto com este prompt estou anexando uma imagem de referência do mega painel. Use essa imagem como guia principal do layout: largura do painel, tamanho dos círculos e posição do card de destaque.
PRIMEIRO PASSO
Entre no site acima e levante:
– As categorias reais de produto e os links corretos de cada uma (ignore links quebrados ou que apontem para outro domínio).
– As imagens de cada categoria já hospedadas no site, se existirem.
– A paleta de cores da marca. Se não ficar claro, use o fallback rosé abaixo.
– O valor do frete grátis, se houver aviso no site.
– Os slugs das páginas de carrinho e checkout (padrão em português: carrinho/ e finalizar-compra/).
Se algum dado estiver ambíguo, me avise no final para eu confirmar.
ESTRUTURA DO MENU
1. Barra de aviso no topo com o texto de frete grátis.
2. Barra principal com botão hambúrguer (mobile), logo à esquerda, menu ao centro e ícones à direita.
3. Itens do menu: Início, Todas as Peças, Categorias (abre o mega painel), a coleção sazonal (abre painel menor) e Contato.
4. Painel menor da coleção sazonal: lista com “Ver coleção completa” e as subcategorias.
5. Ícones à direita, nesta ordem: busca, conta e sacola.
MEGA PAINEL DE CATEGORIAS (layout de referência)
O mega painel de Categorias abre como um painel largo preso à parte de baixo do cabeçalho, alinhado à largura do conteúdo do site. Não faça um popover estreito nem um card flutuante muito arredondado. Fundo branco, com leve arredondamento só nos cantos de baixo.
Dentro do painel, duas áreas lado a lado:
Área da esquerda (cerca de 70% da largura):
– No topo, o título “COMPRE POR CATEGORIA” em caixa alta, fonte pequena, com espaçamento entre as letras, na cor escura da marca.
– Abaixo, uma grade de 4 colunas por 2 linhas, com 8 categorias reais da loja.
– Cada categoria é um card com imagem redonda grande (cerca de 150px de diâmetro, com um anel fino em volta) e, embaixo, o nome da categoria em caixa alta, centralizado, na cor rosa da marca.
– Não coloque a coleção sazonal dentro dessa grade. Ela continua sendo um item separado do menu.
Área da direita (cerca de 30% da largura):
– Um único card de destaque alto, ocupando a altura das duas linhas da grade, com cantos arredondados.
– Imagem de fundo cobrindo o card, com um leve gradiente escuro embaixo para o texto ficar legível.
– Na parte de baixo do card: um título em fonte serifada e branca, embaixo uma frase curta de apoio e, por último, um botão em formato pílula branco com uma chamada de ação.
No mobile, a grade de categorias vira 2 colunas e o card de destaque vai para baixo da grade, ocupando a largura toda.
BUSCA EM POPUP (AJAX)
Ao clicar na busca, abra um popup arredondado com campo de busca. Conforme a pessoa digita (a partir de 2 letras, com debounce), mostre:
– Seção de categorias que combinam.
– Seção de produtos com foto, nome e preço (preço antigo riscado quando em promoção).
– Rodapé “Ver todos os produtos” levando para a busca da loja.
Use a Store API do WooCommerce:
– Produtos: /wp-json/wc/store/v1/products?search=TERMO&per_page=6 (leia o total no header X-WP-Total).
– Categorias: /wp-json/wc/store/v1/products/categories?search=TERMO&per_page=4.
– Ver todos: base + ?s=TERMO&post_type=product.
Cancele a requisição anterior a cada nova digitação e trate erro de forma silenciosa.
SACOLA LATERAL (AJAX)
O ícone de sacola mantém o link para a página do carrinho como fallback, mas ao clicar abre uma sacola lateral deslizando pela direita. Use a Store API:
– Ler carrinho: GET /wp-json/wc/store/v1/cart.
– Alterar quantidade: POST /cart/update-item com key e quantity.
– Remover: POST /cart/remove-item com key.
– Envie o header Nonce capturado na resposta anterior e credentials include.
A bolinha de quantidade fica em cima do ícone e atualiza sozinha ouvindo os eventos do WooCommerce (added_to_cart, removed_from_cart, wc_fragments_refreshed). Ao adicionar um item, a sacola pode abrir sozinha (deixe configurável). Dentro da sacola: foto, nome, controle de mais e menos, preço, botão de remover, uma barra de “Faltam R$X para o frete grátis”, subtotal e os botões “Finalizar compra” e “Ver sacola completa”.
IDENTIDADE VISUAL
Estilo boutique feminino, elegante e bem arredondado. Cards de categoria em círculo, painéis e popup com cantos arredondados, botões em formato pílula, miniaturas arredondadas. Título do card de destaque em fonte serifada, o resto em sans-serif limpa. Paleta fallback rosé, caso o site não indique outra: ink #3a2b30, mut #8a7379, rose #c56d8a, rose-strong #a8496a, soft #fbf2f6, line #efdde5, branco #ffffff.
REGRAS TÉCNICAS (obrigatórias para Elementor)
– Bloco único autocontido: markup, style e script no mesmo bloco.
– Sem !important. Sem reset universal de margin e padding, só box-sizing.
– Sem nav, details ou summary. Use div com toggle de classe via JS.
– Wrapper externo transparente, sem background nem border-radius.
– Prefixo único de classe em tudo.
– SVG inline, nunca base64.
– type=”button” em todos os botões.
– JS dentro de IIFE com guard window.__[prefixo]Init.
– Corrija o bug do fundo no hover forçando background transparente nos botões do menu em todos os estados (normal, hover, focus, active, aberto), com especificidade suficiente para vencer o tema, sem usar !important.
– Popup de busca e sacola lateral devem ser movidos para o body via JS, para não serem cortados por containers com transform. Redeclare as variáveis de cor nesses elementos.
RESPONSIVIDADE
No desktop, o hover abre os painéis. Abaixo de 1024px, vira menu lateral com sanfona pelo hambúrguer, painéis empilhados e grade de categorias reduzida.
ENTREGA
– Deixe um bloco CFG no topo do script com: slug do carrinho, slug do checkout, valor do frete grátis e abertura automática da sacola (true ou false).
– Me lembre que na pré-visualização a busca e a sacola aparecem vazias, porque dependem do WooCommerce rodando no site publicado.
– Aponte no final os pontos que eu preciso confirmar (slugs de categoria, carrinho e checkout).
- Link do site: é o endereço principal da sua loja, aquele que você digita no navegador para chegar na home.
- Link da logo pelo painel: no WordPress, entre em Mídia, clique na sua logo e copie o endereço do arquivo que aparece na lateral.
- Link da logo pelo site: ou então clique com o botão direito em cima da logo no site e escolha copiar o endereço da imagem.
- Copie todo o código que a IA gerou.
- Abra a página onde o menu vai aparecer e clique em Editar com Elementor.
- Arraste um widget HTML para o topo da página.
- Cole o código dentro do widget.
- Clique em Atualizar e o mega menu já aparece.
Recapitulando o caminho: você copia o prompt, troca o link do site e o link da logo, envia para a IA, recebe o código pronto e cola em um widget HTML dentro do Elementor. Do começo ao fim, dá para fazer em uma tarde.
Guarde dois detalhes que evitam susto no meio do processo. O primeiro é que, na pré-visualização do Elementor, a busca e a sacola aparecem vazias, e isso é completamente normal. As duas conversam com o WooCommerce, então elas só ganham vida quando você salva e abre o site publicado. O segundo é anexar um print do menu que você quer junto com o prompt. A IA acerta muito mais o layout quando enxerga a referência, principalmente a largura do painel e o tamanho dos círculos das categorias.
E se o resultado não vier redondo de primeira, isso também faz parte. Um site raramente sai perfeito na primeira tentativa, e a IA funciona muito bem no vai e vem: você olha o que ficou fora do lugar, pede o ajuste na mesma conversa e roda de novo até o menu ficar do jeito que você imaginou.
Se você quiser ver esse passo a passo com a tela ao vivo, o vídeo completo está lá no canal do YouTube. E se a ideia é usar isso em sites de clientes, o Kit Web Designer reúne os recursos que eu uso no dia a dia para entregar projeto mais rápido e com cara de profissional.
