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 puedes modificar el diseño Silent de tu Tiendanube.
Estos códigos CSS solo funcionan en esta plantilla, por lo que es posible que pierdas las modificaciones si cambias de diseño. Conoce 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 necesitas (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, puedes contactar a uno de los 👉Tiendanube Especialistas.
Códigos CSS para Silent
Desplegando las siguientes opciones vas a poder ver el código correspondiente a cada una.
Ocultar:
Ocultar los iconos de redes sociales de la página del producto
|
.text-center.p-top-half.p-bottom-half.m-bottom.clear-both.border-bottom { display: none; } |
Ocultar las mensualidades
- Listado de productos
|
.item-installments { display: none; } |
- En la página del producto
|
.product-installments { display: none; } |
Ocultar el newsletter
|
#newsletter { display: none; } .footer div div:nth-child(1) div:nth-child(1) { display: none; } |
Ocultar el filtro de variantes en el listado de productos
|
.filters-container.p-bottom.m-bottom { display: none; } |
Ocultar el botón "Mostrar todos los productos"
|
.container-fluid.container-xs.text-center.clear-both.visible-when-content-ready { display: none; } |
Ocultar la etiqueta de "Sin stock"
|
.js-stock-label.item-label-no-stock.font-small-extra-xs { display: none; } |
Modificar:
Cambiar el tamaño (aumentar) del logo
|
.logo-img-container img { max-width: 139%; vertical-align: middle; margin-top: 8px; max-height: 180px; } @media (max-width: 767px) { .mobile-logo-home img { max-height: 60px!important; max-width: 80%!important; } } |
Cambiar el formato de los iconos de redes sociales para redondo
|
a.link-social { border-radius: 50%; } |
Cambiar la leyenda "Sin stock"
|
.js-stock-label.item-label-no-stock.font-small-extra-xs:before { visibility: visible; content: "Agotado"; color: rgba(67,67,67,0.6); background: rgba(255,255,255,0.9); padding: 5px 36%; } .js-stock-label.item-label-no-stock.font-small-extra-xs { visibility: hidden; } |
❗Solo hace falta sustituir la palabra Agotado por la que quieras que se muestre.
Info
En caso de que no te guste el resultado o quieras deshacer los cambios, solo debes eliminar el código agregado (teniendo cuidado de no borrar otros códigos anteriores) y guardar los cambios.