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

Atlántico - Códigos CSS para personalizar el diseño

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

Última actualización: 21/10/2022

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 Atlántico 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 Atlántico

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 {

    display: none;

}

Delete

Eliminar el zoom de las imágenes

.mousetrap {

    display: none;

}

Delete

Ocultar el newsletter

input#email {

    display: none;

}

Delete

Ocultar las opciones de Registro e Iniciar sesión

body > div.sidebar-content.sidebar-content-transparent > div > div > div.nav-secondary.pt-3.pb-md-5 > ul.nav-account.row {

    display: none;

}

Delete

Ocultar la etiqueta de promoción en la página del producto

#single-product > div > div.section-single-product.row.no-gutters.mb-md-4 > div.col-md-7 > div.js-swiper-product.product-detail-slider.swiper-container > div.labels.labels-top.labels-top-more  {

 display: none;

}

Delete

Ocultar la etiqueta de envío gratis

.label.label-accent.mt-1 {

    display: none;

}

Delete

Ocultar la etiqueta "Sin stock"

.label.label-default {

    display: none;

}

.js-stock-label.label.label-default {

    display: none;

}

Delete

Ocultar las cuotas

  • En el listado de productos

.js-max-installments-container.js-max-installments.item-installments.font-small {

    display: none;

}

  • En la página del producto

.js-max-installments-container.js-max-installments {

    display: none;

}

  • En la leyenda de los productos en el resultado de búsqueda

#nav-search > div.modal-body.mt-0 > div > ul > li:nth-child(1) > a > div.search-suggest-text.col > p:nth-child(2) > span {

    display: none;

}

  • En el carrito de compras

.js-installments-cart-total.mt-1 {

    display: none;

}

  • En el pop-up de medios de pago

#installment_mercadopago_ > div > div:nth-child(2) > div:nth-child(1) > div.font-medium.mb-1 {

    display: none;

}

#installment_mercadopago_ > div > div:nth-child(2) > div:nth-child(2) > div.font-medium.mb-1 {

    display: none;

}

Delete

Ocultar la sección "Productos relacionados"

section#related-products {

    display: none;

}

Delete

Ocultar el botón "Agregar al carrito"

.mb-4 {

    display: none;

}

.form-group.js-quantity {

    display: none;

}

.item-actions {

    display: none;

}

Delete

Ocultar el carrito de compras

.cart-summary {

display:none;

}

Delete

Ocultar la opción "Ordenar por"

body > div.main-content > section.category-body.px-2.px-md-3 > div > div.category-controls  {

    display: none;

}

Delete

Ocultar el botón "Mostrar todos los productos"

body > div.main-content > section.section-featured-home.px-2.px-md-3 > div > div > div.col-md-4 > a {

    display: none!important;

}

Delete

Ocultar el filtro de variantes en el listado de productos

body > div.main-content > section.category-body.px-2.px-md-3 > div > div.category-controls  {

    display: none;

}

Delete

Ocultar las flechas del carrusel de imágenes

body > div.main-content > section:nth-child(2) > div > div > div > div.js-swiper-home-control.js-swiper-home-pagination.swiper-pagination.swiper-pagination-bullets.swiper-pagination-white.swiper-pagination-clickable {

    display: none!important;

}

Delete

    Modificar:

Cambiar el tamaño del logo

.logo-img {

max-height: 450px;

}

Delete

Modificar el espacio (aumentar) entre los iconos del menú principal

.nav-list .nav-list-link {

    padding: 16px 0;

}


❗ Solo es necesario sustituir el número 16 por otro hasta llegar al tamaño deseado.  
Delete

Cambiar el tamaño (aumentar) de la fuente del menú principal

@media (min-width: 768px)

.nav-list > li > .nav-list-link {

    font-size: 25px;

}


❗ Solo es necesario sustituir el número 25 por otro hasta llegar al tamaño deseado.
Delete

Cambiar el color de la fuente del menú principal

a.nav-list-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?
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.