Cómo adaptar el aspecto de Doofinder al look&feel de tu página

En Doofinder , sabemos lo importante que es para tu e-commerce mantener una misma estética en todos los elementos que forman parte de él, por eso, hoy te traemos las claves para adaptar el aspecto de nuestro buscador de tal manera que este se ajuste a la imagen de tu site.

¿Quieres saber cómo puedes conseguirlo? Sigue leyendo y podrás adecuar la apariencia del buscador a tu imagen de marca en pocos minutos.

Adapta el aspecto de la capa de Doofinder

La capa de resultados de Doofinder está integrada en tu página web. Esto significa que es parte de la estructura de tu código HTML , así que puedes modificar cualquier elemento de la capa, usando reglas CSS.

Para hacer la personalización más sencilla, puedes utilizar las herramientas de desarrollo del navegador para inspeccionar la estructura HTML de tu web . Esto te ayudará a encontrar la clase específica del elemento que quieres modificar.

Todas las capas de Doofinder comparten casi en su totalidad el mismo diseño, pero hay algunas diferencias. Básicamente, las diferencias se concretan en los estilos CSS utilizados.

Se pueden identificar todas esas clases como componentes:

  • df-topbar: Exclusiva de la capa Fullscreen, contiene la caja de búsqueda y el logo de nuestro site.
  • df-aside: Columna secundaria que contiene las facetas, si están configurados.
  • df-panel: Paneles colapsables dentro de la columna lateral que contienen los valores de las facetas.
  • df-main: Todo el contenido de la capa
  • df-header: La cabecera de la capa. Incluye elementos como el número total de resultados y los iconos para cambiar la visualización de los mismos, entre la vista de cuadrícula o la de lista.
  • df-results: Contenedor de los resultados
  • df-card: Cada resultado de búsqueda tiene esta clase.

Además, tanto la capa Classic como la FullScreen tienen otras clases que permiten personalizaciones más específicas.

Ejemplos de personalización

Cambiar el color del título en los resultados:

.df-card__title {

color : #FFBBCC ;

}

Cambiar el margen izquierdo del precio para todos los resultados en GridView:

.df-layer–grid .df-card__price {

margin-left : 20px ;

}

Cambiar el color de fondo del panel de facetas en FullScreen

.df-fullscreen .df-aside {

background : #EEEEEE ;

}

Además, tienes que tener en cuenta que…

Dependiendo del lugar donde coloques estas reglas CSS, podrías necesitar más especifidad en la regla CSS para hacer que se apliquen las nuevas en lugar de las reglas por defecto. Puedes usar la id CSS de la capa o una etiqueta padre como prefijo del selector o la keyword !important al final de cada regla para forzarla .

Si tienes cualquier duda o necesitas ayuda para modificar la capa de tu buscador ponte en contacto con nosotros a través del

teléfono 913185099 o a través del correo electrónico support@doofinder.com

Usamos cookies para mejorar tu experiencia.
Si continúas visitando la pagina aceptas su uso. Leer más.

OK