Comienza a utilizar Omni-Search

Omni-search es la mejor solución de búsqueda de Clerk.io. Aprende cómo empezar a utilizarla.
Products:

Impulsada por la Search 3.0 de Clerk, Omni-search proporcionará a tus visitantes los productos y el contenido relacionado más relevante para sus búsquedas.

Como e-commerce manager, te da la flexibilidad que necesitas para asegurarles la mejor experiencia de búsqueda:

  • Es fácil de integrar en tu sitio web (ver la sección inserta un omni-search content en tu sitio web)
  • Es totalmente personalizable: partiendo de una de nuestras plantillas que te permiten alinear el diseño con la identidad de tu marca, cambiando únicamente algunos elementos (logotipo, fuentes, colores…)
  • Se enfoca en brindar la mejor experiencia de usuario, puesto que incluye:
    • Sugerencias de búsqueda (basadas en la popularidad, el historial de búsqueda, etc.): para guiar a tus visitantes.
    • Resultados en vivo: facilitando a tus visitantes resultados de búsqueda rápidos a medida que escriben, así como sugerencias de categorías, marcas y contenido.
    • Clasificación y filtrado: para que tus visitantes puedan refinar su búsqueda de forma intuitiva y sencilla.

Creación de un Omni-search desing

Al igual que con los live-search y search page contents, necesitarás un diseño de omni-search para crear un contenido de este tipo. Por ese motivo, es una buena idea empezar por personalizar una de nuestras plantillas:

  1. En tu cuenta de Clerk.io, ve a Store > Search > Designs
  2. Haga clic en New design
  3. Seleccione el tipo de diseño Omni-search.
  4. Elige una plantilla para empezar.
  5. Pulsa «Create design» para empezar a personalizar tu diseño.

¿Qué hay que tener en cuenta al editar un Omni-search design?

Todos los Omni-search designs constan de un layout general y de un conjunto de sub-diseños a los que se puede hacer referencia en el layout principal.

**Nota: ** en el layout general solo se pueden referenciar los sub-diseños disponibles en ese omnisearch design en concreto.

Para editar un subdiseño específico, haz clic en su icono Edit y accederás a la página del subdiseño. Cuando hayas terminado de editar, haz clic en Save and close y volverás al editor del layout general.

También puedes eliminar, duplicar y copiar la referencia de cualquier subdiseño haciendo clic en el botón de tres puntos.

! [Capturas de pantalla de opciones de subdiseños] (sub-designs-options.png)

Al editar un omni-search design, ten en cuenta que [algunos elementos necesitan identificadores específicos] (https://help.clerk.io/help/design/creation-your-own-omnisearch-design/) para que tu diseño funcione, como el campo de entrada (id=» clerk-omnisearch-input») o el contenedor de contenido (id=“clerk-omnisearch-content»).

En un principio, es posible que solo desees ajustar algunas cosas para que el diseño se adapte a tu imagen de marca**. Recuerda que siempre puedes editar tu diseño más adelante, después de previsualizarlo y probarlo en tu sitio.

  • Logotipo: accede al subdiseño TopBarSearchForm y reemplaza el logotipo predeterminado por el tuyo.
  • Fuentes: si es necesario, ajusta las fuentes para que coincidan con la apariencia de tu sitio.
  • Colores: puedes añadir los colores de tu marca a los elementos que quieras enfatizar o simplificar con el resto de tu sitio, como botones y etiquetas.
  • Botones y bordes de etiquetas: puedes ajustar su color, radio, ancho…
  • Enlaces: si tienes un estilo específico para tus enlaces, también puedes editarlo.

Siempre que quieras comprobar tu progreso, puedes hacerlo haciendo clic en el botón “Preview design”. Esto te permitirá comprobar la última versión guardada de tu diseño.

Una vez que sientas que tu diseño está listo, puedes pasar al siguiente paso del proceso: crear un contenido para tu Omni-search.

Los contenidos de Clerk.io pueden considerarse de alguna manera como “contenedores” de los elementos que puedes crear desde su cuenta (diálogos de búsqueda o carruseles de recomendaciones). Para cada elemento que quieras insertar en tu web, debes crear un contenido.

Así, para empezar a utilizar Omni-search en tu tienda, tienes que crear un contenido para ella:

  1. Navega hasta Search > Content.
  2. Haz clic en “New content” en la parte superior derecha de la página
  3. Rellena los campos obligatorios:
    • Name: te ayudará a identificar tu contenido en caso de que quieras crear más de uno (se puede modificar más adelante)
    • Content type: es Omni-search por defecto, por lo que no necesitas hacer nada con él.
    • Diseño: todos los contenidos requieren un diseño compatible. Haz clic en el campo y debería poder seleccionarlo entre todos los diseños de Omni-search que hayas creado.
      • Si tu diseño incluye alguna variable, aparecerán aquí.
      • Decide cuántos productos quieres mostrar cada vez que tus visitantes clican “ver mas”. Cada búsqueda puede devolver muchos productos. Para garantizar el mejor rendimiento, no los cargaremos todos a la vez, sino bajo demanda, cuando tus visitantes hagan clic en el botón Ver más.
      • Limita las sugerencias de consulta, el número de categorías y el número de páginas de contenido que se pueden mostrar a la vez. Esto garantiza que, independientemente de la búsqueda, tus visitantes no se sientan abrumados con excesiva información y que tu diseño no se rompa.
      • Elige los atributos que quieres incluir en tus filtros y establece nombres legibles para ellos. Si no puede encontrar un atributo específico en la lista, es posible que hayas olvidado incluirlo en la lista de “atributos filtrables”, en Search configuration.

! [Bloque de diseño de un contenido de Omni-search] (omnisearch-content-design-block.png)

Inserta el contenido en tu sitio web

El último paso para incluir un contenido de Clerk.io en tu webshop es insertarlo en su sitio.

Para insertar el contenido de omni-search, el método predeterminado es “Using injection”, pero también puedes hacerlo “Using embedded code”.

Insertar mediante inyección:

Este es el método más fácil para insertar un contenido de Clerk.io en tu sitio web. Solo tienes que indicar:

  • El evento que debería desencadenar que se despliegue el contenido (lo más probable es que quieras que se muestre cuando tus visitantes hagan clic en el icono de búsqueda o en la barra de búsqueda)
  • El elemento en el que ocurrirá ese evento. Por ejemplo, si quieres que tu contenido de Omni-search se muestre solo cuando tus visitantes interactúen con la barra de búsqueda (al hacer click o focalizarse sobre ella), solo tienes que encontrar un selector CSS único para ese elemento ( probablemente algo así como #search, #search_bar…). Si tienes identificadores diferentes para las vistas móvil y desktop, agrega ambos. ¿Cómo encontrar el selector CSS de mi barra de búsqueda? 1. Inspecciona el código de su sitio web; 2. Busca el elemento que quieres inspeccionar. 3. Haga clic con el botón derecho sobre él y busca la opción Copiar > copiar selector.

!

Nota: asegúrese de encontrar un selector CSS que sea un identificador único de los elementos a los que desea dirigirse. Puedes utilizar cualquier selector CSS compatible con el método querySelector().

  • Establece la visibilidad del contenido:
    • In preview: te permite testear tu contenido sin que se publique en tu web. Puedes abrir tu sitio en vista previa haciendo clic en “Open site in preview” o añadiendo /?clerk_preview=true a la URL de tu sitio.
    • In my live site: Una vez que hayas probado tu contenido y estés listo para publicarlo, escoge esta opción.

Insertar usando embedded code:

Esta es la alternativa a agregar el contenido en su sitio mediante inyección. Requiere algunos pasos más y editar el código de tu sitio.

Para añadir el código embebidos en tu sitio:

  1. Despliega la sección “Insert into website” y selecciona la opción “Using embedded code”.
  2. Si tienes algún cambio sin guardar, guárdalo y genera el código embebido. Si no, verás que el código se ha generado automáticamente. Copia el código embebido.

! [Inserta contenido en su sitio] (insert-into-site.png)

  1. Accede al backend de tu tienda online
  2. Pegua el código embebido en el archivo que genera las páginas de la web, debajo del código de inyección de clerk.js.
  3. Reemplaza INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH con el selector CSS del elemento html que quieres que active tu contenido de Omni-search.