Aparência e integração no tema

Overlay ou dentro do tema, os seletores que ligam a pesquisa à loja, o aspeto dos resultados e os textos que o visitante lê.

Tudo o que está aqui vive em Pesquisa → Lojas → editar, e chega ao painel de pesquisa automaticamente: não se mexe no módulo nem se faz deploy nenhum na loja.

Onde aparecem os resultados

O painel de pesquisa tem dois modos, e a escolha depende do tema:

• Por cima da loja (overlay): os resultados abrem numa camada própria que cobre a página. Funciona em qualquer tema sem configuração. Aqui pode definir o logótipo (apontando para o do tema com um seletor, ou carregando um próprio) e o link do carrinho, para a camada manter a navegação essencial da loja.
• Dentro do tema (inline): os resultados desenham-se dentro de um contentor do próprio tema, como uma página da loja. Pede dois seletores: o do contentor e, normalmente, o do que esconder durante a pesquisa. Numa página onde o contentor não exista, o painel de pesquisa usa overlay automaticamente.

Os seletores

São a cola entre o painel de pesquisa e o tema, e é onde uma integração corre bem ou mal:

• Barra de pesquisa: por omissão input[name='s']. Se o seu tema usar outro, é o primeiro a ajustar, e ajusta-se na configuração do módulo.
• Botões que abrem a pesquisa: ícones ou botões do tema (a lupa do menu no telemóvel, por exemplo). Ao serem tocados, o painel de pesquisa abre com a sua própria caixa de escrita.
• Botões que abrem o assistente: o mesmo, para o assistente.
• Esconder durante a pesquisa: o que do tema deve sair da frente enquanto os resultados estão à vista, no modo inline.

Se a pesquisa da loja continua a responder O seletor da barra não está a apanhar o input certo. Inspeciona o campo no tema e corrige-o; é a causa de nove em cada dez integrações a meio.

Paginação

Para chegar ao resto dos resultados há três opções: um botão "Ver mais", scroll infinito ou páginas numeradas. Cada uma tem o custo e o benefício explicados no próprio ecrã.

Aparência dos resultados

Cor de destaque, raio dos cantos, produtos por linha (no computador e no telemóvel), e o que cada card mostra: botão de comprar (ligado por omissão), texto da chamada para ação, marca, referência, etiqueta de desconto e aviso de esgotado.

O tipo de letra não se configura: o painel de pesquisa herda sempre o da loja, para se integrar no tema. É uma das poucas coisas fechadas de propósito, e a razão é que uma pesquisa com tipografia própria parece sempre uma caixa de outra pessoa colada por cima da loja.

Um produto que já esteja no carrinho do visitante aparece marcado: o card ganha a moldura na cor de destaque, o botão de comprar mostra as unidades que lá estão, e nas listagens da própria loja o card do tema recebe um selo "No carrinho". A marca acompanha o carrinho em tempo real, seja a adição feita na pesquisa ou na loja.

Para o que as opções não cobrem existe a caixa de CSS extra (até 4000 caracteres), injetada no fim da folha de estilos do painel de pesquisa.

Textos do painel de pesquisa

Todos os textos que o visitante lê ("Ver mais resultados", "Sem resultados para…", a ordenação, os filtros) têm tradução da casa em cada língua do índice. Na secção Textos pode substituir qualquer um deles, língua a língua.

Um campo deixado em branco mantém a nossa versão e continua a receber as correções futuras; só o que escrever fica fixo à sua maneira. Vale a pena mexer só no que a sua loja diz de forma diferente, e deixar o resto a acompanhar as versões do painel de pesquisa.