Algunos trucos para personalizar tu CSS

Cuando conectas tu tienda con Motive Commerce Search, sabes que nuestra búsqueda se integrará perfectamente con el estilo de tu tienda. Siempre has podido adaptar varias cosas de la página de resultados, como la fuente, los colores, las fichas de producto, etc., pero ahora tienes la posibilidad de personalizar más cosas.

En Motive, realmente queremos ofrecer a los compradores y propietarios de tiendas la mejor experiencia que puedan tener en el comercio electrónico, y eso incluye versatilidad para que puedas hacer cambios que reflejan tu marca. Por eso, hemos introducido la posibilidad de cambiar manualmente el CSS de la búsqueda de tu tienda para que implementes los cambios que desees.

Primeros pasos con el CSS personalizado

Si quieres empezar a utilizar esta función, probablemente necesitarás tener algunos conocimientos de CSS, o contar con alguien que los tenga, pero si tienes curiosidad y quieres probarlo, vamos a darte algunas ideas sobre cómo puedes aprovecharlo con algunas configuraciones sencillas.

Esta característica es increíblemente útil si estás utilizando Motive Commerce Search a través de un partner, ya que estarán deseando ayudarte a implementar estos cambios y son muy conscientes de las posibilidades que puede ofrecer.

Puedes encontrar el cuadro de CSS personalizado en la sección de Personalización Visual de la Capa de Búsqueda de tu Motive Playboard, en la Configuración Avanzada.

Cambiando el tamaño de los precios

Uno de los trucos más sencillos que puedes hacer y que te puede resultar útil es cambiar el tamaño del precio de los productos. Para que coincida con el estilo de tu tienda cuando los compradores navegan, puede que quieras hacerlo más grande o más pequeño.

Puedes inspeccionar los resultados de búsqueda de tu tienda para ver cómo está configurado el tamaño de la fuente del precio y cambiarlo en la sección CSS Personalizado con algo como esto:

#motive-x .x-mot-result-price {
    font-size: 22px;
}

Puedes cambiar el font-size al tamaño que mejor se adapte a tus necesidades y comprobar cómo queda en tiempo real al guardar los cambios.

Cambiando el color del añadir al carrito

También puedes cambiar el color del botón de añadir al carrito añadiendo CSS personalizado, en caso de que quieras algo distinto al color por defecto. Para ello, puedes incluir algo como el siguiente ejemplo.

#motive-x .x-mot-result-cta__action{
    background-color: #fabada;
}

Asegúrate de cambiarlo al color que más te guste especificando su código HEX.

Ocultando los productos populares

Uno de los casos más comunes en los que esta función puede ser especialmente útil es ocultar los productos populares de su búsqueda. No puedes hacer esto automáticamente en el Playboard, pero puedes intentarlo a través de la función de CSS Personalizado.

Para ello, puedes introducir el siguiente ejemplo de CSS:

#motive-x .x-mot-recommendations {
    display: none;
}

Haciendo el logo más grande

Otro consejo útil que puedes tener en cuenta al introducir cambios en CSS es el tamaño de tu logotipo, ya que, dependiendo de la tienda, podéis darle un grado de importancia variable. Puedes cambiar el tamaño de tu logotipo modificando su anchura y altura:

#motive-x .x-mot-brand-logo {
    height: 70px;
    width: 70px;
    max-width: 100%;
}

Asegúrate de comprobar cómo afectan tus cambios a la página de resultados de búsqueda cuando los guardes y actualices tu tienda para ver cómo quedan. Ten en cuenta que eliminar un cambio es tan fácil como borrarlo del cuadro CSS personalizado.

Entiende tu CSS para saber más

Si tienes suficientes conocimientos de CSS, puedes ser realmente tan creativo como quieras a la hora de modificar ciertos aspectos del aspecto de la página de resultados de búsqueda de tu tienda aplicando cambios que puedan hacerla más atractiva para ti y para tus compradores.

Además, hay muchos otros aspectos que puedes configurar fácilmente de tus resultados de búsqueda como tu marca, fichas de producto o imágenes en los sencillos ajustes que te permiten hacerlo de forma muy intuitiva.

Si aún no eres usuario de Motive Commerce Search y quieres ver cómo se integra mágicamente en tu tienda, ¡pruébalo gratis!