Editar el código CSS de tu tienda te permite hacer pequeñas modificaciones en el diseño, sin necesidad de tocar el código HTML: cambiar colores, ocultar elementos, modificar tamaños o reacomodar la posición de lo que ya existe. No es posible crear elementos nuevos, solo modificar el estilo de los que ya forman parte de tu diseño.
Para aprovechar mejor las distintas posibilidades de personalización con CSS, es recomendable tener un conocimiento básico de este lenguaje. Si estás arrancando, puedes hacer algún curso básico, como el de Freecodecamp.
Puedes aplicar código CSS tanto de forma global como en secciones puntuales de tu tienda. Te recomendamos agregar un código CSS distinto para cada sección que quieras personalizar, ya que esto te permite organizar, controlar y gestionar mejor los estilos aplicados. Para conocer qué secciones admiten personalización con CSS, ingresa a los tutoriales de las páginas que quieres editar: Inicio, Categoría, Producto y Búsqueda y Error 404.
En este tutorial te explicamos cómo agregar y eliminar códigos CSS personalizados con el diseño Ipanema en Configuraciones avanzadas.
¿Cómo agregar un código CSS?
Helpjuice Info Callout Title
Para ver ejemplos de personalización con este lenguaje, te recomendamos nuestro tutorial ¿Qué partes del diseño puedo modificar con códigos CSS?
¡Sigue a los pasos!
1. Ingresar al administrador de tu Tiendanube.
2. Acceder a "Tienda online > Diseño" y hacer clic en "Editar diseño".
3. Hacer clic en el ícono del engranaje en el menú superior (al lado de "Editar diseño") para acceder a las Configuraciones avanzadas.
4. En el menú lateral, hacer clic en "CSS personalizado" para abrir el campo de código.
5. Ingresar el código en "Código CSS personalizado" para personalizar visualmente tu tienda más allá de las opciones estándar del editor.
Helpjuice Warning Callout Title
En este campo para agregar códigos CSS existe un límite de 15,000 caracteres, así que te recomendamos usarlo solo para código CSS global o general, y aplicar el código CSS específico de cada sección directamente.
Si necesitas aplicar varios códigos a la vez, puedes pegarlos uno arriba del otro separados por un espacio.
Helpjuice Info Callout Title
Guarda una copia de los códigos que agregues en un archivo de texto propio: no almacenamos el historial de cambios, así que si borras un código no vamos a poder recuperarlo.
6. Hacer clic en "Guardar y publicar" para aplicar los cambios.
¿Cómo eliminar un código CSS?
1. Ingresar al campo "CSS personalizado" y borrar el código que quieras quitar. Si pegaste varios códigos uno debajo del otro, identifica el bloque correspondiente y elimina solo esas líneas, sin tocar el resto.
2. Hacer clic en "Guardar y publicar" para aplicar el cambio.
Recuerda que si no guardaste una copia del código en un archivo de texto propio, no vamos a poder recuperarlo una vez eliminado.
¡Listo!
Ya sabes cómo personalizar tu tienda con códigos CSS en el diseño Ipanema.
Si quieres hacer cambios mayores, puedes acceder al FTP de tu tienda siguiendo: ¿Cómo modificar el diseño desde el código de mi tienda?
Además, puedes contactar a uno de los Tiendanube Especialistas en caso de que necesites ayuda en la personalización del diseño de tu tienda vía el FTP o código CSS.