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, podés modificar algunos de estos elementos sin acceder al código HTML. Es decir, sin abrir el FTP ni trabajar con un diseñador. Es una opción útil si querés hacer cambios pequeños de estilo.
El diseño Ipanema se destaca por su flexibilidad para personalizar tu tienda. Si ya lo usás, conocé cómo personalizar tu tienda con códigos CSS en el diseño Ipanema. Si todavía no, es una buena forma de ver qué opciones te ofrece antes de elegir tu diseño.
En este tutorial te contamos qué modificaciones podés realizar en tu tienda desde la sección de "Edición avanzada de CSS".
Helpjuice Warning Callout Title
En Edición avanzada de CSS encontrarás los códigos más utilizados para tu diseño. También hay una guía para generar códigos CSS y aplicar modificaciones en tu diseño.
Cambiar el color de cualquier elemento con CSS
Podés, por ejemplo, modificar el color de la etiqueta de promoción o del botón "Agregar al carrito".
En este ejemplo se cambia el color de la etiqueta de celeste a violeta:
Helpjuice Info Callout Title
Según el diseño que uses, podés cambiar el color de distintos elementos sin usar CSS, siguiendo los pasos para cambiar los colores de tu diseño.
Ocultar elementos de tu tienda con CSS
Es posible ocultar algunos elementos que no quieras mostrar en tu tienda.
Mirá cómo queda la tienda antes y después de ocultar las categorías principales:
Helpjuice Info Callout Title
Te sugerimos ingresar a "Tienda online > Diseño", hacer clic en "Editar el diseño actual" y revisar si podés ocultar el elemento desde las configuraciones del diseño. Así evitás hacerlo con CSS.
Modificar tamaños con CSS
Con código CSS, podés aumentar o reducir el tamaño de algunos elementos.
En este ejemplo se modifica el tamaño del logo de la tienda:
Cambiar la alineación de un elemento con CSS
Podés mover un elemento hacia la izquierda o la derecha, centrarlo, o moverlo hacia arriba o abajo.
En este ejemplo se modifica la alineación de la opción para ordenar los productos en el listado de la tienda:
Otras modificaciones posibles con CSS
Con CSS se pueden cambiar los formatos y estilos de diferentes elementos que ya existen en la tienda. No es posible crear nuevos elementos.
Estos son otros ejemplos de cambios que se pueden hacer 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
Helpjuice Success Callout Title
Guardar una copia de los códigos que tengas en "Edición avanzada de CSS" en un archivo de texto, ya que no almacenamos el historial de cambios. Si borrás un código, no podremos recuperarlo.
Ahora que sabés qué modificaciones se pueden realizar en tu Tiendanube por medio de códigos CSS, podés ver los pasos para hacerlo en:
¿Cómo editar el diseño de mi tienda con código CSS?
Si buscás hacer otro tipo de modificaciones en el diseño de tu tienda, conocé las personalizaciones que se pueden hacer desde el código base.
Helpjuice Info Callout Title
Si no tenés conocimientos de CSS y necesitás una modificación que no está en nuestros tutoriales, te recomendamos trabajar con uno de los Tiendanube Especialistas.