Apariencia e integración en el tema
Overlay o dentro del tema, los selectores que unen la búsqueda a la tienda, el aspecto de los resultados y los textos que lee el visitante.
Todo lo que está aquí vive en Búsqueda → Tiendas → editar, y llega al panel de búsqueda automáticamente: no se toca el módulo ni se hace ningún deploy en la tienda.
Dónde aparecen los resultados
El panel de búsqueda tiene dos modos, y la elección depende del tema:
- Por encima de la tienda (overlay): los resultados se abren en una capa propia que cubre la página. Funciona en cualquier tema sin configuración. Aquí puede definir el logotipo (apuntando al del tema con un selector, o subiendo uno propio) y el enlace del carrito, para que la capa mantenga la navegación esencial de la tienda.
- Dentro del tema (inline): los resultados se dibujan dentro de un contenedor del propio tema, como una página de la tienda. Pide dos selectores: el del contenedor y, normalmente, el de lo que hay que esconder durante la búsqueda. En una página donde el contenedor no exista, el panel de búsqueda usa overlay automáticamente.
Los selectores
Son el pegamento entre el panel de búsqueda y el tema, y es donde una integración sale bien o mal:
- Barra de búsqueda: por defecto
input[name='s']. Si su tema usa otro, es el primero que hay que ajustar, y se ajusta en la configuración del módulo. - Botones que abren la búsqueda: iconos o botones del tema (la lupa del menú en el móvil, por ejemplo). Al tocarlos, el panel de búsqueda se abre con su propia caja de escritura.
- Botones que abren el asistente: lo mismo, para el asistente.
- Esconder durante la búsqueda: lo que del tema debe quitarse de en medio mientras los resultados están a la vista, en el modo inline.
Si la búsqueda de la tienda sigue respondiendo El selector de la barra no está cogiendo el input correcto. Inspecciona el campo en el tema y corrígelo; es la causa de nueve de cada diez integraciones a medias.
Paginación
Para llegar al resto de los resultados hay tres opciones: un botón «Ver más», scroll infinito o páginas numeradas. Cada una tiene el coste y el beneficio explicados en la propia pantalla.
Apariencia de los resultados
Color de acento, radio de las esquinas, productos por fila (en el ordenador y en el móvil), y lo que muestra cada tarjeta: botón de comprar (activado por defecto), texto de la llamada a la acción, marca, referencia, etiqueta de descuento y aviso de agotado.
La tipografía no se configura: el panel de búsqueda hereda siempre la de la tienda, para integrarse en el tema. Es una de las pocas cosas cerradas a propósito, y la razón es que una búsqueda con tipografía propia parece siempre una caja de otra persona pegada encima de la tienda.
Un producto que ya esté en el carrito del visitante aparece marcado: la tarjeta gana el marco en el color de acento, el botón de comprar muestra las unidades que hay allí, y en los listados de la propia tienda la tarjeta del tema recibe un sello «En el carrito». La marca acompaña al carrito en tiempo real, tanto si el producto se añade en la búsqueda como en la tienda.
Para lo que las opciones no cubren existe la caja de CSS extra (hasta 4000 caracteres), inyectada al final de la hoja de estilos del panel de búsqueda.
Textos del panel de búsqueda
Todos los textos que lee el visitante («Ver más resultados», «Sin resultados para…», la ordenación, los filtros) tienen traducción de la casa en cada idioma del índice. En la sección Textos puede sustituir cualquiera de ellos, idioma a idioma.
Un campo dejado en blanco mantiene nuestra versión y sigue recibiendo las correcciones futuras; solo lo que escribas queda fijo a su manera. Vale la pena tocar solo lo que su tienda dice de otra forma, y dejar el resto acompañando las versiones del panel de búsqueda.