Centro de Atención Nube Configurá tu tienda Diseño Personalizar el diseño Edición avanzada de CSS

Material - Códigos CSS para personalizar el diseño

Códigos CSS para editar algunos de los elementos de la plantilla de diseño Material de Tiendanube

Última actualización: 14/06/2022

Es posible realizar ciertas modificaciones en el diseño de una tienda mediante códigos CSS, un lenguaje de programación utilizado para definir la visualización de una página web.  

En este artículo, te dejamos algunos de los códigos con los que podés modificar el diseño Material de tu Tiendanube. Los mismos solo funcionan en esa plantilla, por lo que es posible que pierdas las modificaciones si cambiás de diseño. Conocé más en 📝¿Cómo cambiar mi plantilla de diseño y qué implica?.

Delete

Success

Te acercamos los siguientes códigos para ayudarte con algunas modificaciones. En caso de que necesites ayuda para generar códigos CSS personalizados o quieras realizar cambios más profundos en el diseño de tu tienda, podés contactar a uno de los 👉Tiendanube Especialistas.

En el Administrador de tu Tiendanube, vas a poder incorporar el código que quieras, siguiendo nuestro tutorial:

📝¿Cómo editar el diseño de mi Tiendanube con código CSS?

  • Ocultar los íconos de las redes sociales de las páginas de los productos

.bg-facebook.product-share-button {    display: none;}.bg-twitter.product-share-button {    display: none;}.bg-google-plus.product-share-button {    display: none;}.bg-pinterest {    display: none;}

  • Ocultar las Categorías Principales de la página de inicio para la versión de computadora

section.pills-container.home-categories.horizontal-container.container.m-bottom {    display: none;}

  • Ocultar las cuotas o mensualidades de la página de inicio y del listado de productos

.item-installments {    display: none;}

  • Ocultar las cuotas o mensualidades de la página del producto

.js-max-installments-container.d-inline-block {    display: none;}

  • Ocultar la etiqueta de Envío gratis

.product-label.product-label-shipping {    display: none;}

  • Deshabilitar el zoom de las fotos de los productos

.mousetrap {    display: none;}

  • Ocultar el carrito de compras 

#ls_cart_widget{display: none;}

  • Ocultar la opción del Newsletter del footer o pie de página

.col-xs-12.col-sm-12.col-md-8.col-md-offset-2.col-lg-8.col-lg-offset-2.m-top-half.m-bottom-half.m-bottom-xs {    display: none;}

  • Ocultar las flechas del carrusel de imágenes

.col-xs-12.col-sm-12.col-md-8.col-md-offset-2.col-lg-8.col-lg-offset-2.m-top-half.m-bottom-half.m-bottom-xs {    display: none;}

  • Modificar el tamaño del logo, tanto para Desktop (computadora) como para Mobile (celular)

#home-logo img {    max-height: 200px;}@media (max-width: 767px){#home-logo img {    max-height: 150px!important;}}

  •  Aumentar el tamaño del logo

.logo-img {    max-height: 200px;}

  • Ocultar los botones de registrarse e iniciar sesión

ul.list-style-none.p-none.m-none.account-links {    display: none;}

  • Alinear el icono de WhatsApp al lado izquierdo de la tienda

.btn-whatsapp{ left: 20px; right: auto !important; }

Delete

Warning

Algunos códigos requieren de conocimiento básico de este lenguaje para que funcionen correctamente y puedan adaptarse a lo que necesitás (colores, medidas, etc.). 

En caso de que no te guste el resultado o quieras deshacer los cambios, solo debés eliminar el código agregado (teniendo cuidado de no borrar otros códigos anteriores) y guardar los cambios.