[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-Quick-tips-for-customising-your-CSS-es":3,"es-cms-blog-Quick-tips-for-customising-your-CSS":3},{"title":4,"slug":5,"publishDate":6,"category":7,"body":8,"metaTitle":4,"metaDescription":9,"metaImageAlt":10,"createdAt":11,"updatedAt":12,"publishedAt":13,"locale":14,"coverImage":15,"metaImage":16,"author":17},"Algunos trucos para personalizar tu CSS","Quick-tips-for-customising-your-CSS","2023-08-29","Motive Features","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](https://www.motive.co/es/blog/your-search-product-cards-got-a-new-look), etc., pero ahora tienes la posibilidad de personalizar más cosas.\n\nEn Motive, realmente queremos ofrecer a los compradores y propietarios de tiendas [la mejor experiencia que puedan tener en el comercio electrónico](https://medium.com/motiveco/listening-through-our-eyes-designing-the-best-search-experience-228b843686da), 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.\n\n## Primeros pasos con el CSS personalizado\n\nSi 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.\n\nEsta 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.\n\nPuedes encontrar el cuadro de CSS personalizado en la sección de [Personalización Visual](https://searchbroker.atlassian.net/servicedesk/customer/portal/11/topic/c53242c2-8d87-4fca-bc88-6449c2be1dfd/article/4124279025) de la Capa de Búsqueda de tu Motive Playboard, en la Configuración Avanzada.\n\n### Cambiando el tamaño de los precios\n\nUno 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.\n\nPuedes 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:\n\n\n```\n#motive-x .x-mot-result-price {\n    font-size: 22px;\n}\n```\nPuedes 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. \n\n### Cambiando el color del _añadir al carrito_\n\nTambié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.\n\n\n```\n#motive-x .x-mot-result-cta__action{\n    background-color: #fabada;\n}\n```\nAsegúrate de cambiarlo al color que más te guste especificando su código HEX.\n\n### Ocultando los productos populares\n\nUno 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.\n\nPara ello, puedes introducir el siguiente ejemplo de CSS:\n\n```\n#motive-x .x-mot-recommendations {\n    display: none;\n}\n```\n### Haciendo el logo más grande\n\nOtro 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:\n\n```\n#motive-x .x-mot-brand-logo {\n    height: 70px;\n    width: 70px;\n    max-width: 100%;\n}\n```\nAsegú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.\n\n## Entiende tu CSS para saber más\n\nSi 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.\n\nAdemá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.\n\nSi aún no eres usuario de Motive Commerce Search y quieres ver cómo se integra mágicamente en tu tienda, [¡pruébalo gratis!](https://playboard.motive.co/signup?utm_campaign=opensignup&utm_source=webpage&utm_medium=organic&utm_content=navigationmenuES&utm_term=tryfreebutton&origin=plg)\n","Descubre el poder de la personalización en Motive Commerce Search. Utiliza la opción de CSS personalizado para refinar la búsqueda de tu tienda. ¡Te explicamos cómo!","Imagen abstracta de la personalización CSS","2023-08-29T09:46:58.799Z","2023-08-29T10:37:08.035Z","2023-08-29T09:53:51.428Z","es","https://assets.motive.co/cms/Custom_CSS_in_Motive_Commerce_Search_6957adf8a1.jpg","https://assets.motive.co/cms/Custom_CSS_tips_in_Motive_Commerce_Search_8af11e6083.jpg",{"fullName":18,"email":18,"jobTitle":18},""]