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

¿Qué partes del diseño puedo modificar con códigos CSS?

Conoce los aspectos del diseño de tu Tiendanube que puedes cambiar usando códigos CSS

Última actualización: 13/06/2022

El lenguaje CSS sirve para darle estilo a las páginas web, es decir, agregarle colores, cambiar tamaños, cambiar las posiciones de algunos elementos, ocultar otros, entre otras acciones. 

Desde tu Administrador de Tiendanube, es posible modificar algunos de estos elementos sin necesidad de acceder al código HTML, es decir, sin tener que abrir el FTP y trabajar con un diseñador. Esto tiene varias ventajas si quieres realizar cambios más pequeños de estilo.

En este tutorial te contamos qué modificaciones puedes realizar en tu tienda desde la sección de "Edición Avanzada de CSS".

Delete

Warning

Si no tienes conocimiento de CSS y quieres hacer alguna modificación que lo requiera, te recomendamos trabajar con uno de los 👉Tiendanube Especialistas, para que te pueda ayudar con cambios personalizados.

Cambiar el color de cualquier elemento

Ver información

Puedes, por ejemplo, modificar el color de la etiqueta de promoción o el botón de "Agregar al carrito".


Te mostramos un ejemplo, donde cambiamos el color de la etiqueta de celeste a violeta:

Producto de ejemplo con la configuración inicial (etiqueta de precio promocional color celeste) y con el código aplicado (etiqueta de color magenta oscuro)

Delete

Ocultar elementos

Ver información

Es posible ocultar algunos elementos que no quisieras que se muestren en tu tienda.


Por ejemplo, acá te mostramos antes y después de ocultar las categorías principales:

Dos imágenes de la misma tienda, donde una tiene las categorías principales y la otra no

Delete

Modificar tamaños 

Ver información

Con código CSS, puedes aumentar o reducir el tamaño de algunos elementos.


En este ejemplo, modificamos el tamaño del logo de la tienda:

Dos imágenes de la misma tienda, mostrando primero el logo en tamaño más grande y luego, más chico

Delete

Cambiar la alineación de algún elemento

Ver información

Puedes mover un elemento para la izquierda, derecha o centrarlo, así como moverlo hacia arriba o abajo.


En este ejemplo modificamos la alineación de la opción para ordenar los productos en el listado de la tienda:

Parte superior del listado de productos de una tienda, una vez con la opción para ordenar los productos centrada y otra a la izquierda

Delete

Otras posibles modificaciones vía CSS

Ver información

Básicamente, se pueden cambiar los formatos y estilos de diferentes elementos que ya existan en la tienda por medio de CSS. No es posible crear nuevos elementos.


Te damos otros ejemplos de posibles alteraciones con CSS:

  • Cambiar el color del precio de un producto
  • Ocultar la etiqueta de "Envío gratis" u "Oferta"
  • Disminuir el espacio entre la imagen y la información de un producto
  • Cambiar el tamaño de banners o el carrusel de imágenes
  • Ocultar las opciones de variantes en los filtros de la izquierda
  • Cambiar el icono de la página en construcción
Delete

Ahora que sabes qué modificaciones se pueden realizar en tu Tiendanube por medio de códigos CSS, puedes ver los pasos para hacerlo en:

📝¿Cómo editar el diseño de mi tienda con código CSS?

Delete

Info

Si estás buscando hacer otro tipo de modificaciones en el diseño de tu tienda, puedes conocer las personalizaciones que se pueden hacer desde el código base en 📝¿Qué tipo de cambios se pueden hacer sobre el diseño vía código?.