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.
En este tutorial te explicamos cómo agregar y eliminar códigos CSS personalizados con el diseño Ipanema.
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 Info Callout Title
Con este campo puedes ajustar estilos globales (como tipografías, colores, tamaños y espaciados) o crear personalizaciones puntuales. Recomendado para usuarios con conocimientos técnicos en desarrollo web.
Si necesitas aplicar varios códigos a la vez, puedes pegarlos uno arriba del otro separados por un espacio.
Helpjuice Warning 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. Además, ten en cuenta que si en algún momento cambias de plantilla de diseño, todos los códigos CSS que hayas agregado se van a perder.
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.