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 Amazonas 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 Amazonas
Desplegando las siguientes opciones vas a poder ver el código correspondiente a cada una.
Ocultar:
Ocultar opción "Mi cuenta" (Iniciar sesión)
DeleteOcultar la barra de anuncios con las redes sociales
|
.section-topbar { display:none!important; } |
Ocultar iconos de las redes sociales en la página de los productos
|
.social-share { display: none; } |
Ocultar etiqueta de "Agotado"
|
.js-stock-label.label.label-default { display: none; } .label.label-default { display: none; } |
Ocultar cuotas
Con la plantilla Amazonas, es posible ocultar las cuotas 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, puedes usar este código CSS:
|
.js-installments-cart-total.text-right { display: none; } |
Modificar:
Banner informativo (Información de envíos, pagos y compra): cambiar el color de fondo y del texto
|
.section-informative-banners { background-color: #000000; color: #ffffff; } |
❗ 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 es el color de fondo y Color es el color del texto.
Banner informativo (Información de envíos, pagos y compra): cambiar el color de los iconos
|
.svg-icon-text { fill: #ffffff; } |
❗ 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?.
Delete
Cambiar el tamaño del logo
Success
Actualmente, es posible 📝 modificar el tamaño del logo en dimensiones pre-establecidas directamente desde tu administrador. Sin embargo, si estos tamaños no se adaptan a tu necesidad, podrías hacerlo con el siguiente código.
|
.logo-img { max-height: 450px; } |
❗ Puedes cambiar el valor para cualquiera que sea menor de 450px.
Delete
Cambiar el color de la barra de búsqueda y su texto
|
.js-search-input.form-control.search-input{ border-color: #ff0000; 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 border-color modifica el color de los bordes, ya que en este diseño, la barra de búsqueda solo tiene color en el borde y el de fondo es el color del encabezado. Color es el color del texto.
Cambiar el color de la barra de anuncio y su texto
|
.section-topbar { 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?.
Delete
Cambiar el color de la barra de navegación
|
.nav-desktop { background-color:#f1f100; } |
❗ 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?.
Delete
Cambiar el color de fondo y texto de la etiqueta "Agotado"
|
.label.label-default { background-color: #f1f100; 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?.
Ten en cuenta que Background-color es el color de fondo y Color es el color del texto.
Delete
Cambiar el color de fondo y texto de la etiqueta de promoción
|
.label.label-accent { background: #f11f11; 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?.
Ten en cuenta que Background-color es el color de fondo y Color es el color del texto.
Delete
Cambiar el tamaño de la fuente de las cuotas o mensualidades en la página de inicio
|
.js-max-installments { font-size: 20px; } |
❗ Para definir el tamaño de la fuente, solo es necesario cambiar el valor junto a 'px'. Por ejemplo, puedes cambiar 20px por 30px.
Delete
Cambiar el color de la información de contacto y los links en el menú del footer (o pie de página)
|
footer a, footer .contact-link { color:#545454!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?.
Delete
Cambiar el color de fondo y de los títulos del footer (o pie de página)
|
footer { color: #ffffff; background-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?.
Ten en cuenta que Background-color es el color de fondo y Color es el color del texto.
Delete
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.