Búsqueda

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de búsqueda predictiva
2. Aplicación Search & Discovery
3. Documentación de Company XYZ sobre el bloque Search
4. Documentación de Company XYZ sobre el uso de vídeos
5. Documentación de Company XYZ sobre iconos
6. Documentación de Company XYZ sobre los ajustes de colores del banner
7. Documentación de Company XYZ sobre los ajustes de tarjetas
8. Documentación de Company XYZ sobre los ajustes de visibilidad
9. Documentación de Shopify sobre secciones y bloques

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Este bloque añade un campo de búsqueda con resultados en vivo opcionales, sugerencias predeterminadas seleccionadas y contenido de banner promocional. Úselo cuando quiera que la búsqueda haga más que aceptar consultas y, en su lugar, guíe activamente a los clientes hacia productos, colecciones o páginas clave. Para obtener una visión general más amplia de cómo funcionan los bloques en los temas, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Los ajustes de texto principales dan forma a la primera impresión de la experiencia de búsqueda. Use el texto del marcador de posición para indicar a los clientes qué pueden buscar, y mantenga breve la etiqueta del botón para que encaje cómodamente en los distintos diseños.

En la mayoría de los casos, funciona mejor un texto simple. Los mensajes claros son más fáciles de identificar que las frases de marca que hacen que el campo parezca menos evidente.

Ajustes de búsqueda predictiva

Este grupo controla la experiencia de búsqueda en vivo que aparece mientras los clientes escriben. También le permite dar forma al estado vacío con enlaces predeterminados seleccionados para que el bloque siga siendo útil antes de introducir una consulta.

La búsqueda predictiva en tiempo real requiere que la aplicación Search & Discovery esté instalada y configurada. Consulte las referencias proporcionadas en la fuente para ajustes de búsqueda predictiva, la aplicación Search & Discovery y la Búsqueda.

Los ajustes de este grupo solo se aplican cuando la búsqueda predictiva está activa. Si los resultados en vivo no están disponibles, estos controles no cambiarán la experiencia de búsqueda como se espera.

Use los menús de resultados predeterminados y secundarios para convertir el estado de búsqueda vacío en un panel de descubrimiento útil. Las colecciones populares, los destinos de temporada, las páginas de soporte o las categorías habituales suelen funcionar mejor aquí que los menús largos y profundamente anidados.

Si deja vacío el título de los resultados predeterminados, se usará en su lugar el nombre del menú. Revise ese nombre de menú con cuidado para que el panel de búsqueda siga pareciendo intencionado.

El banner opcional y la barra de funciones pueden añadir merchandising y confianza, pero deben apoyar la búsqueda en lugar de competir con ella. Si el panel empieza a verse recargado, simplifique el contenido circundante antes de reducir la visibilidad de los resultados.

Fondo del banner

Este grupo controla el fondo del área de banner opcional. Puede usar una imagen o un video y ajustar cómo el medio de fondo encaja en el espacio.

Los medios de fondo específicos para móviles son útiles cuando el recorte de escritorio no se adapta bien a pantallas más pequeñas. Esto es especialmente importante cuando el material incluye texto, personas o productos cerca de los bordes.

Elija medios que todavía dejen espacio para contenido de primer plano legible. Un recurso visualmente potente solo es útil si los encabezados, los botones y el texto de apoyo siguen siendo fáciles de identificar.

Consejo

Use recursos de fondo específicos para móviles cuando su material de escritorio dependa de un recorte amplio. Esto suele ofrecerle un mejor encuadre y un contraste de texto más limpio en pantallas más pequeñas.

Para conocer las mejores prácticas de configuración de video, consulte using video.

Primer plano del banner

Este grupo le permite superponer contenido promocional sobre el fondo del banner. Puede añadir un icono, una leyenda, un encabezado, un subtítulo y una llamada a la acción, y luego colocar ese contenido dentro del banner.

Los campos vacíos simplemente se ocultan, por lo que puede mantener esta área mínima o crear un mensaje promocional más completo. En la mayoría de los casos, un encabezado claro, una línea breve de apoyo y una acción funcionarán mejor que una pila de contenido densa.

Elija el tipo de encabezado para que coincida con la jerarquía de la página circundante. El objetivo es que el banner se sienta estructurado sin eclipsar el contenido cercano.

Si añade un botón, mantenga el texto directo y orientado a la acción. Los ajustes de diseño, icono y estilo ayudan a refinar la presentación, pero el estilo del enlace tiene el mayor efecto en cómo se comporta el banner.

Precaución

Elegir un estilo de enlace de bloque completo elimina los enlaces del texto del subtítulo. Úselo solo cuando quiera que toda el área del banner actúe como el objetivo principal de clic.

Si usa iconos, puede introducir un emoji o un nombre de icono compatible. Para orientación sobre iconos, consulte icons.

Medios de primer plano del banner

Use este grupo para añadir una imagen de primer plano junto al texto del banner, como un logotipo, una insignia, un recorte de producto o un gráfico de campaña. Este medio aparece junto al contenido de primer plano y no detrás de él.

Los anchos de imagen más pequeños funcionan bien para logotipos y acentos decorativos, mientras que los anchos mayores son adecuados para ilustraciones de productos o elementos visuales promocionales llamativos. Si establece el ancho en 0, la imagen puede ocupar todo el espacio disponible, así que revise el resultado con cuidado en pantallas más pequeñas.

Si añade un enlace a la imagen, manténgalo alineado con el mensaje del banner. Los destinos separados dentro de un banner compacto pueden hacer que el bloque parezca menos centrado.

Colores del banner

Este grupo le permite anular las opciones de color más amplias del tema para el área del banner. Úselo cuando el banner de búsqueda necesite una marca más sólida o cuando el medio de fondo necesite más contraste.

Los colores de superposición y de texto suelen ser los controles más importantes aquí. Una superposición sutil puede conservar el aspecto de una imagen o un video y, al mismo tiempo, hacer que los encabezados, el texto y las acciones sean mucho más fáciles de leer.

Priorice la legibilidad sobre la coincidencia decorativa de colores. Si el banner incluye texto o acciones, asegúrese de que sigan siendo claros tanto en la vista de escritorio como en la móvil.

Para obtener más información sobre estos controles, consulte colores del banner.

Ajustes estándar de bloque

Ajustes de tarjeta

Estos ajustes compartidos controlan cómo se presentan los resultados basados en tarjetas en este bloque. Úselos para alinear las tarjetas de resultados con el resto de su tienda o para dar a los resultados de búsqueda un tratamiento visual más distintivo.

Las opciones más influyentes son el estilo de la tarjeta, la proporción de la imagen y cuánto texto muestra cada tarjeta. Si es probable que los clientes examinen varios resultados rápidamente, priorice tarjetas fáciles de identificar en lugar de diseños que hagan que cada resultado sea demasiado alto.

Para la referencia compartida, consulte Ajustes de tarjeta.

Ajustes de visibilidad

Use estos ajustes para mostrar u ocultar el bloque según el tamaño del dispositivo. Son más útiles cuando quiere una presentación de búsqueda diferente en escritorio y en móvil.

Si oculta este bloque en un tamaño de dispositivo, asegúrese de que allí exista otro punto de entrada claro para la búsqueda. Para la referencia compartida, consulte Ajustes de visibilidad.

Ajustes del editor

Estos ajustes solo afectan a cómo se etiqueta el bloque en el editor. Un título personalizado del editor es útil cuando usa varios bloques de búsqueda o quiere identificar más fácilmente una versión específica de una campaña.

Notas de uso

1. Planifique dos estados de búsqueda. El estado vacío y el estado de consulta escrita pueden servir a objetivos diferentes, así que haga que ambos parezcan intencionados.
   1. Use contenido predeterminado seleccionado para guiar la navegación de quienes visitan por primera vez.
   2. Mantenga los resultados en vivo centrados en las coincidencias más útiles.
2. Revise ambas vistas. Los controles de escritorio y móvil pueden cambiar el diseño, la alineación y el comportamiento de los medios, así que compruebe ambos tamaños antes de publicar.
   1. Confirme que el texto del banner siga siendo legible.
   2. Asegúrese de que los recortes de los medios sigan respaldando el mensaje.
3. Mantenga deliberadas las decisiones de estilo. Los valores en blanco o con estilo predeterminado suelen conservar el aspecto de respaldo del tema, mientras que los colores explícitos, los degradados o las anulaciones de medios hacen que el área parezca más personalizada.
4. Use los medios con cuidado. Las imágenes y los videos pueden afectar al recorte, la carga, el contenido de respaldo y la legibilidad, especialmente cuando los recursos de escritorio y móvil son diferentes.
5. Apoye la claridad del formulario. Mantenga fáciles de leer las etiquetas, los mensajes y cualquier mensaje de éxito o error para que los clientes puedan buscar sin confusión.