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.
Desde el administrador de tu Tiendanube, vas a poder incorporar los códigos que quieras siguiendo nuestro tutorial:
📝¿Cómo insertar un código CSS en mi Tiendanube?
En este artículo, te dejamos algunos de los códigos con los que podés modificar el diseño Simple de tu Tiendanube.
Estos códigos CSS solo funcionan en esta 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?
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.).
Info
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.
Códigos CSS para Simple
Desplegando las siguientes opciones vas a poder ver el código correspondiente a cada una.
Ocultar:
Ocultar los iconos de las redes sociales en la página de los productos
|
.social-widgets-mobile.visible-when-content-ready.text-center.p-top-half.p-bottom-half.m-top-xs { display: none; } |
Ocultar el campo de suscripción para el newsletter
|
#container > div.js-main-content.main-content > footer > div.footer > div > div > div:nth-child(2) { display: none; } |
Ocultar las opciones de Registro e Inicio de sesión
Para Desktop💻
|
/*WEB*/ .user-access { display:none; } |
Para Mobile📱
|
/*MOBILE*/ .mobile-accounts { display:none; } |
Ocultar las etiquetas de promoción
|
.label-primary{ display:none; } |
Ocultar cuotas
Con la plantilla Simple, es posible ocultar las cuotas o mensualidades del listado, el detalle y el buscador de productos siguiendo los pasos de este tutorial: ¿Cómo ocultar las cuotas o mensualidades en mi Tiendanube?
Sin embargo, esta funcionalidad no oculta las cuotas del carrito de compras. Para ello, podés usar este código CSS:
|
.js-installments-cart-total.cart-installments.font-small.m-top-quarter.clear-both.pull-right { display: none; } |
Modificar:
Banner informativo (Información de envíos, pagos y compra): cambiar los colores de los iconos
|
.svg-icon-text { fill: #ff0000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Barra de búsqueda: cambiar los colores del texto y el fondo
Para Desktop💻
|
/*WEB*/ .js-search-input.header-input.form-control.form-control-xs { background-color: #F1F100; color: #ff0000; } |
Para Mobile📱
|
/*MOBILE*/ .js-search-input.header-input.p-left-half.form-control.form-control-xs { background-color: #F1F100; color: #ff0000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Tené en cuenta que background-color modifica el color del fondo y color es el color del texto.
Modificar el color de la barra de navegación
|
.js-desktop-nav.desktop-nav.hidden-phone.font-small{ background-color:#ff0000; } .desktop-nav-item { background-color: #ff0000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Cambiar el tamaño del logo
Para Desktop💻
|
.logo-img { height: 400px; } |
Para Mobile📱
|
.theme-wide .mobile-logo-home .logo-img { max-height: 90px; } |
Para definir el tamaño del logo, solo es necesario cambiar el valor junto a 'px'. Por ejemplo, podés cambiar 90px por 80px.
Cambiar los colores del menú de navegación (Inicio, Productos, Contacto, etc).
|
".desktop-nav-link { color: #ff0000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Cambiar el color del botón de compra rápida
|
.btn.font-small-extra { background-color: #ff0000; color: #000000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Cambiar el color de fondo del footer (o pie de página)
|
.footer{ background-color: #ff0000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Cambiar el color de los links del footer (o pie de página)
|
.footer a{ color: #ff0000!important; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Cambiar los colores de los títulos del footer (Navegación, Contacto, Newsletter, etc.)
|
.footer-title.font-body.text-uppercase { color: #ff0000; } |
Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial: ¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Info
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.