Instalar el script

El widget de SoloSearch es un único archivo JavaScript. No requiere npm, compilación ni ningún framework —funciona en cualquier página HTML.

1. Copia el snippet

Abre tu motor de búsqueda en el panel, ve a la pestaña General y copia el snippet. Ya incluye el UUID de tu motor y la URL de la API rellenos.

Snippet de instalación

💡 Actualiza data-input antes de pegarlo. Este atributo indica al widget qué elemento de tu página es el campo de búsqueda. Acepta cualquier selector CSS — #search, .search-field, input[type=search]. Inspecciona el HTML de tu tema para encontrar el selector correcto y reemplaza el valor predeterminado. Si tu tienda no tiene ningún input de búsqueda, puedes eliminar el atributo completamente y el widget renderizará su propio campo.

El snippet mostrado es el mínimo necesario para poner en marcha el widget. Pueden configurarse muchos parámetros adicionales —layout, idioma, número de resultados, comportamiento de los filtros y más— consulta Atributos del script para la referencia completa.

2. Pégalo en tu tienda

Pega el snippet dentro de <head> o justo antes de </body>. El atributo defer evita que bloquee el renderizado de la página.

Magento 2

La forma más sencilla es a través del panel de administración: ve a Content → Design → Configuration, edita tu vista de tienda, abre la sección HTML Head y pega el snippet en Scripts and Style Sheets.

Alternativamente, añádelo mediante layout XML en tu tema en app/design/frontend/[Vendor]/[theme]/Magento_Theme/layout/default_head_blocks.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <script src="https://search.solosearch.app/widget.js"
            src_type="url"
            defer="defer"
            attributes="data-engine=your-engine-uuid data-api=https://search.solosearch.app data-input=#search"/>
  </head>
</page>

Shopify

Ve a Online Store → Themes → Actions → Edit code → layout/theme.liquid y pégalo antes de </head>. Las etiquetas script HTML estándar funcionan sin cambios dentro de las plantillas Liquid.

WooCommerce / WordPress

Añade el snippet al archivo functions.php de tu tema:

add_action('wp_head', function () { ?>
  <script
    src="https://search.solosearch.app/widget.js"
    data-engine="your-engine-uuid"
    data-api="https://search.solosearch.app"
    data-input="#search"
    defer
  ></script>
<?php });

O pégalo directamente en Appearance → Theme Editor → header.php antes de </head>.

PrestaShop

Ve a Design → Theme & Logo → Advanced customisation y añádelo al hook del encabezado, o edita themes/[your-theme]/templates/_partials/head.tpl.

HTML personalizado

Pégalo dentro de <head>. Eso es todo.

3. Verifica que funciona

Escribe algunos caracteres en tu campo de búsqueda. Los resultados deberían aparecer según el layout configurado para tu motor.

Si no aparece nada, revisa la consola del navegador en busca de errores y verifica que:

  • El UUID en data-engine coincide con el que figura en el panel.
  • El selector en data-input corresponde a un elemento que realmente existe en la página.
  • El dominio de tu tienda figura en Allowed origins en la configuración del motor de búsqueda.
💡 Si estás probando en localhost, añade http://localhost o http://localhost:3000 a Allowed origins temporalmente.