Cómo personalizar el cuadro de búsqueda

La búsqueda de productos ayuda a los clientes a encontrar los artículos que necesitan en su tienda. Puede cambiar el aspecto del propio cuadro de búsqueda para ajustarlo al diseño de su tienda. Si desea mejorar la búsqueda, también puede usar aplicaciones del Mercado de aplicaciones de Ecwid.

Cambiar el diseño del cuadro de búsqueda en Instant Site

Si vende en el Instant Site de Ecwid puede ajustar el aspecto del cuadro de búsqueda en el sitio en los ajustes de la sección Menú y encabezado.

Para cambiar el diseño del cuadro de búsqueda:

1. Desde su administración de Ecwid, vaya a Canales de ventas → Gestionar Instant Site → Editar sitio (o Sitio web → Editar sitio).
2. Haga clic en la sección Menú y encabezado de la lista de la izquierda.
3. Cambie a la pestaña Diseño y elija el diseño de bloque que le guste.
4. Haga clic en Fondo y elija el estilo y el color para el fondo de su sección.
5. Haga clic en Menú e iconos y elija la fuente y el color para sus iconos de la sección y las consultas introducidas en el campo de búsqueda.
6. Haga clic en Publicar.

¡Eso es todo! El estilo, la fuente y los colores que elija se utilizarán para el campo de búsqueda y su icono en su sitio web.

Cómo cambiar el diseño del widget de búsqueda

Si está usando el widget de búsqueda en Wix, Wordpress, etc. o en un sitio web personalizado, entonces puede cambiar el estilo del cuadro de entrada y el estilo del botón de búsqueda con códigos CSS.

Aprenda a añadir códigos CSS a su tienda →

Puede utilizar los siguientes códigos CSS para cambiar el diseño de los elementos del widget de búsqueda:

1. Estilos del cuadro de entrada:

   /*  Estilos del cuadro de entrada */
   input.ecwid-search-widget__input[type="text"] {
    width: 100px; /* cambiar ancho como sea necesario*/
    height: 20px; /* cambiar alto como sea necesario*/
    border: solid 1px red; /* cambiar color de bordes */
    background-color: blue; /* cambiar color de fondo */
    font-size: 12px; /* cambiar tamaño de fuente en campo de búsqueda */
    color: #000000; /* cambiar color de fuente en campo de búsqueda */
   }

   Cambie el código de color #000000 como sea necesario según la tabla de colores HTML.
2. Estilos del botón de búsqueda:
   

   

   /* Estilos del botón de "búsqueda" */
   button.ecwid-search-widget__btn {
    width: 20px; /* cambiar ancho como sea necesario*/
    height: 10px; /* cambiar alto como sea necesario*/
    border: solid 1px #ffffff; /*cambiar color de bordes */  
    background: transparent url(image/button_search.png) no-repeat bottom center !important; /*añadir imagen de fondo*/
   }

   Cambie el código de color #ffffff según sea necesario y reemplace la parte image/button_search.png con la ruta real absoluta a la imagen de fondo. Por ejemplo: "http://www.example.com/images/button_bg.png"

Cómo mover el cuadro de búsqueda

Si está usando el widget de búsqueda en un sitio web personalizado o en Wordpress, entonces puede mover el cuadro de búsqueda con códigos CSS.

Para aplicar los códigos, debe añadirlos a un tema CSS en el panel de administración de Ecwid.

Puede utilizar el siguiente código CSS para mover el widget de búsqueda:

/* para mover el widget de búsqueda*/
. cwid-search-widget {
max-width: 170px; /* cambiar ancho según sea necesario*/
position:relative;
margin-left: 400px; /* cambiar el margen izquierdo según sea necesario*/
margen-top: 10px; /* cambiar el margen superior según sea necesario*/
}

Dependiendo de la posición deseada del widget de búsqueda, introduzca los valores correspondientes para margen izquierdo y margen superior para moverlo.

Si su tienda está en Wordpress, también puede utilizar los siguientes códigos:

• Para mover el cuadro de búsqueda a la derecha:

  
  .ecwid-shopping-cart-search {
      text-align: right
  }

• Para centrar el cuadro de búsqueda:

  
  .ecwid-shopping-cart-search {
      text-align: center
  }

Cómo mejorar la funcionalidad de búsqueda

Si desea ampliar la funcionalidad de búsqueda, puedes usar una de las aplicaciones del Mercado de aplicaciones de Ecwid para incorporar una búsqueda avanzada en su tienda:

CloudSearch

La aplicación CloudSearch optimiza la búsqueda de su tienda con sugerencias automáticas. Aparecerá una lista con sugerencias de productos y categorías cuando un cliente escriba en el cuadro de búsqueda. Esta lista muestra información básica del producto con la opción de ir al producto.

CloudSearch también ofrece otras funciones además de las sugerencias automáticas:

• corrección ortográfica: las consultas de búsqueda con palabras mal escritas ahora devolverán resultados
• sinónimos: puede añadir palabras similares y se mostrarán los mismos resultados al buscar
• promoción de determinados productos cuando un visitante busca una palabra clave específica
• consulta de estadísticas de búsqueda en el panel de administración de Ecwid

Se trata de una aplicación de pago con una prueba gratuita de 30 días.