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 Bahía 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 Bahía
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 del producto
|
.social-share.mt-5 { display: none; } |
Ocultar el newsletter
|
.js-newsletter.newsletter { display: none; } |
Ocultar las opciones de Registro e Iniciar sesión
|
.utilities-item.user-access.d-none.d-md-inline-block { display: none!important; } |
Ocultar la etiqueta de promoción en la página del producto
|
.js-offer-label.label.label-accent { display: none; } |
Ocultar la etiqueta de envío gratis
|
body > section.category-body > div > div > div.js-item-product.col-12.col-md-3.item.item-product.installments-custom > div > div.item-image.box-rounded.mb-3 > div > div.labels > div:nth-child(2) { display: none; }
#single-product > div > div > div.col-12.col-md-8.order-1.order-md-2 > div.js-swiper-product.nube-slider-product.swiper-container.pr-md-1.swiper-container-initialized.swiper-container-horizontal > div.labels > div:nth-child(3) { display: none; } |
Ocultar la etiqueta "Sin stock"
|
.js-stock-label.label.label-default { display: none; }
.label.label-default { display: none; } |
Ocultar las flechas del carrusel de imágenes
|
.js-swiper-home-control.js-swiper-home-next.swiper-button-next.d-none.d-md-block { display: none!important; }
.js-swiper-home-control.js-swiper-home-prev.swiper-button-prev.d-none.d-md-block { display: none!important; } |
Ocultar los filtros en el lateral del listado de productos
|
div#filters { display: none; } |
Ocultar la opción "Ordenar por"
|
.col-6.col-md-auto { display: none; } |
Ocultar el carrito de compras
|
.utilities-item { display: none; } |
Ocultar las cuotas o mensualidades
- En el listado de productos
|
.item-installments { display: none; }
|
- En la página del producto
|
span.js-max-installments-container.js-max-installments.col-12.mb-2.col-md-auto { display: none; } |
- En la leyenda de los productos en el resultado de búsqueda
|
body > header > div.container-fluid > div > div.col-5.col-md-3 > div > ul > li > a > div.search-suggest-text.col > p:nth-child(2) > span { display:none; } |
- En el carrito de compras
|
.js-installments-cart-total.text-right { display:none; } |
- En el pop-up de los medios de pago
|
#installment_mercadopago_ > div > div:nth-child(2) > div:nth-child(1) > h4 { display:none; } #installment_mercadopago_ > div > div:nth-child(2) > div:nth-child(2) > h4 { display:none; } |
Ocultar la sección "Productos relacionados"
|
section#related-products { display: none; } |
Eliminar el zoom de las imágenes
|
.mousetrap { display: none; } |
Modificar:
Modificar el espacio entre los iconos del menú principal
|
li.nav-item.nav-item-desktop { padding: 18px 25px; } |
Cambiar el tamaño de la fuente del menú principal
|
a.nav-list-link { font-size: 16px; } |
❗ Para definir el tamaño del logo, solo es necesario cambiar el valor junto a 'px'. Por ejemplo, podés cambiar 16px por 18px.
Cambiar el tamaño del logo
|
.logo-img { max-width: 100%; } |
Cambiar el color de la fuente del menú principal
|
ul.nav-desktop-list a { 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 la leyenda "Sin stock" por otra
|
.label.label-default:before { visibility: visible; content: "Agotado"; background: black; padding: 2px 5px; border-radius: 3px; } .label.label-default { visibility: hidden; } |
❗Solo hace falta sustituir la palabra Agotado por la que quieras que se muestre.
Cambiar el color de la etiqueta "Sin stock"
|
.js-stock-label.label.label-default { background-color: red; } .label.label-default { background-color: red; } |
❗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.