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

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

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

Última actualización: 23/07/2025

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 Focus 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 Focus

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

    Ocultar:


Ocultar las opciones de Registro e Iniciar sesión

ul.list-unstyled.list-inline.m-none {

    display: none;

}

 
 

Ocultar el campo de suscripción al newsletter

.js-hide-footer-while-scrolling.container.visible-when-content-ready {

    display: none;

}

 
 

Ocultar el logo del newsletter

#news-popup > div > div > div > div > div:nth-child(1) > div.text-center.m-top-half.m-bottom-half {

    display: none;

}

 
 

Ocultar las flechas del carrusel de imágenes

.bx-controls.bx-has-controls-direction {

    display: none;

}

 
 

Ocultar el botón "Mostrar todos los productos"

.col-xs-12.text-center {

    display: none;

}

 
 

Ocultar el filtro de variantes en la lista de productos

.col-md-2 {

    display: none;

}

 
 

Ocultar la opción de "Ordenar por"

.col-xs-7.col-sm-7.text-right.text-left-xs {

    display: none;

}

 
 

Ocultar el carrito de compras

li.cart-summary {

    display: none;

}

 
 

Ocultar el botón de "Agregar al carrito"

input.js-addtocart.js-prod-submit-form.btn.btn-primary.btn-block.m-top.m-bottom.d-inline-block.cart {

    display: none;

}

 
 

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

.social-widgets.text-secondary.text-center.p-top-half.p-bottom-half.m-top {

    display: none;

}

 
 

Ocultar la sección "Productos relacionados"

.container.m-top {

   display: none;

}

 
 

Eliminar el zoom de las imágenes

.mousetrap {

    display: none;

}

 
 

Ocultar la etiqueta promocional de la página de los productos

.labels-floating.m-right {

    display: none;

}

 
 

Ocultar la etiqueta de envío gratis

.label-secondary {  display: none;}

 
 

Ocultar la etiqueta de "Sin stock"

.js-stock-label.label.label-small.label-dark {

    display: none;

}

 
 

    Modificar:

Cambiar el formato de los iconos de las redes sociales para redondo

.social-networks a {

    font-size: 1.8em;

    border-radius: 50%;

    width: 50px;

    height: 50px;

}

 
 


Cambiar el color de fuente del menú principal

.desktop-nav-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?.
 

 
 

Cambiar el tamaño del texto del menú principal

.desktop-nav-link {

    font-size: 20px;

}


❗ Si no te gusta el tamaño, solo es necesario cambiar el número 20 por otro hasta llegar al tamaño deseado. 
 

 
 

Cambiar el tamaño del logo

.logo-img {

    max-height: 100px;

}

 
 

Cambiar la leyenda "Sin stock" por otra 

.js-stock-label.label.label-small.label-dark:before {

    visibility: visible;

    content: "Sin stock";

    box-shadow: 0px 3px rgba(0, 0, 0, 0.3);

    background: #e2e4ed;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 50px;

    padding: 5px;

    margin-bottom: 8px;

    text-align: center;

}

.js-stock-label.label.label-small.label-dark {

    visibility: hidden;

}

❗ Para cambiar la leyenda, es necesario sustituir el texto "Sin stock" por la que quieras mostrar.
 

 
 

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.

 
Da tu opinión sobre este artículo