Configura la nueva capa móvil de tu buscador Doofinder

animal

Hace dos semanas te contábamos que ya podías disfrutar de todas las ventajas de la nueva versión móvil del buscador Doofinder en tu ecommerce y hoy vamos a mostrarte las diferentes opciones de configuración con las que cuentas para poder adecuarlo a la identidad de tu marca. 

¡Empezamos!

 

En primer lugar, como te contamos en el post anterior, debes tener en cuenta que, al estar integrada en la estructura HTML de tu página web, la nueva capa móvil es totalmente configurable utilizando reglas CSS, por lo que lo que te proponemos son algunos ejemplos de lo que puedes hacer con ella. 

Entre estas opciones de configuración se encuentran:

  • Modificar el color de los títulos. Puedes decidir qué color debe aplicarse en los títulos de los productos que muestra tu buscador. Por ejemplo, si los colores que predominan en tu tienda online son el blanco, el azul y el gris, puedes establecer que os títulos de los productos aparezcan en color azul. Para ello sólo tendrías que modificar la siguiente regla CSS:
.df-mobile .df-card__title {
  color: #0066ad;
}
  • ​​Modificar el tamaño de los márgenes. Otra de las opciones de configuración es la elección del tamaño que han de tener los márgenes de separación entre elementos, como por ejemplo, los precios. Así, podrías decidir que el espacio que debe haber a la izquierda d elos precios sea de 20 px.
.df-mobile  .df-card__price {
  margin-left:  20px;
}
  • Incluir el logo y/o una imagen de fondo. Una de las principales novedades de esta capa móvil es la posibilidad de incluir tanto el logo de tu empresa en la parte superior de la capa (encima de la caja de búsqueda) como una imagen identificativa que sirva de fondo. De esta manera, el usuario nunca tendría la sensación de abandonar tu tienda online al usar el buscador. Para introducirlas lo único que debes hacer es pegar la URL de las imágenes seleccionadas en la opción templateVars situada dentro del atributo display. Quedaría algo como esto: 
{
  mobile: {
    display: {
      templateVars: {
        images: {
          header: 'http://yoursite.com/media/logo.png',
          body:  'http://yoursite.com/media/watermark.png'
        }
      }
    }
  }
}

Si quieres más información sobre cómo customizar la nueva capa móvil puedes echar un vistazo a la documentación escrita al respecto aquí.

Si tienes cualquier duda o necesitas ayuda para configurarla, puedes contactar con nuestro equipo de soporte a través del correo electrónico support@doofinder.com.