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

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

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

Última actualización: 05/12/2023

Saltar a los Códigos CSS

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 Idea 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?.

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.).

Delete

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 Idea

Desplegando las siguientes opciones vas a poder ver el código correspondiente a cada una.

    Ocultar:

Ocultar icono del carrito de compra

.js-modal-open.js-toggle-cart.js-fullscreen-modal-open.utilities-item {

display:none;

}

Delete

Ocultar opción "Mi cuenta" (Iniciar sesión)

.nav-secondary{ 

display:none;

}

Delete

Ocultar etiqueta de promoción

.label.label-accent {

    display:none;

}

Delete

Ocultar iconos de las redes sociales en la página del producto

.social-share.mt-3 {

display:none;

}

Delete

Ocultar cuotas

Con la plantilla Idea, es posible ocultar las cuotas del listado, detalle y buscador de productos siguiendo los pasos de este tutorial: 📝 ¿Cómo ocultar las cuotas 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.font-body {

    display: none;

}

Delete

    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

Modificar el tamaño del logo

Delete

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;

}


❗ Podés modificar el valor por cualquier por debajo 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?.


Cambiar el tamaño de la fuente para el número de 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, podés cambiar 20px por 30px.
Delete

Cambiar el color de fondo y del texto de la etiqueta "Sin stock"

.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?.
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?.
Delete

Cambiar el color de la lupa en la barra de búsqueda

body > div > header > div.container-fluid > div > div:nth-child(1) > div > div > div > div > form > div > button > svg {

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?.
Delete

Cambiar el color del botón de la compra rápida

.item-buy-open {

    background: #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 del botón "Finalizar compra" en el carrito

.btn-primary {

    background-color: #000000;

     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 es el color de fondo y Color es el color del texto.
Delete

Delete

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.