Base de conocimientos
Guías
Academia
Tutoriales en vídeo
Intenta buscar:
Artículos vistos recientemente:

Tabla de contenidos

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.

Cómo cambiar el diseño del cuadro de búsqueda en Instant Site

Si vende en Instant Site de Ecwid, puede ajustar la apariencia del cuadro de búsqueda en el sitio.

Customizing_the_search_box__2_.png

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

  1. Desde el panel de administración de Ecwid, vaya a Resumen → Gestionar Instant SiteEditar sitio (o Sitio webEditar sitio).
  2. Haga clic en el bloque Encabezado.
  3. Cambie a la pestaña Diseño y haga clic en el elemento Buscar icono.
  4. Haga clic en el campo Color y elija el color que necesite con el selector de colores:

    Customizing_the_search_box__1_.png

    También puede especificar un código de color existente en el campo Color (si ya lo conoce).
  5. Haga clic en Guardar y publicar.

El color que elija se utilizará en el icono de búsqueda y en el texto que se escriba en el campo de búsqueda.

Estas instrucciones son válidas para el Instant Site de nueva generación. Si está usando la versión original de Instant Site de Ecwid, puede aplicar el siguiente código CSS (en inglés) para cambiar la apariencia del cuadro de búsqueda.

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:Customizing_the_search_box__4_.png
    /*  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:

    Customizing_the_search_box__3_.png

    /* 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
    }
Si ha añadido la búsqueda a su tienda de Ecwid en Wix, puede mover fácilmente el cuadro en el editor de Wix. Simplemente abra la página donde se encuentra su tienda, haga clic en el cuadro para seleccionarlo, y arrastre y suelte para situarlo como quiera. Cuando haya terminado, guarde y publique los cambios.

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:

Disponibilidad de planes: Venture, Business, Unlimited.

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.

Clickable Brand

La aplicación Clickable Brand ayuda a mejorar la navegación en su tienda haciendo que se pueda hacer clic en el atributo «Marca». Esto permite filtrar productos por marca.

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

Aprenda a asignar el atributo «Marca» a sus productos →

Para añadir una búsqueda por facetas a su escaparate, puede usar filtros de productos.
¿Fue útil este artículo?

¡Increíble! ¡Gracias por sus comentarios!

¡Gracias por sus comentarios!

¡Lo sentimos! ¿Qué ha ocurrido?
Usuarios a los que les pareció útil: 19 de 48
10
Usamos cookies y tecnologías similares para recordar sus preferencias, medir la efectividad de nuestras campañas y analizar datos despersonalizados con el fin de mejorar el rendimiento del sitio. Al elegir «Aceptar», da su consentimiento para el uso de cookies.
Aceptar cookies Rechazar