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, podés 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?
¡Vamos 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 podés 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 necesitás aplicar varios códigos a la vez, podés pegarlos uno arriba del otro separados por un espacio.
Helpjuice Warning Callout Title
Guardá una copia de los códigos que agregues en un archivo de texto propio: no almacenamos el historial de cambios, así que si borrás un código no vamos a poder recuperarlo. Además, tené en cuenta que si en algún momento cambiás 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, identificá el bloque correspondiente y eliminá solo esas líneas, sin tocar el resto.
2. Hacer clic en "Guardar y publicar" para aplicar el cambio.
Recordá 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 sabés cómo personalizar tu tienda con códigos CSS en el diseño Ipanema.
Si querés hacer cambios mayores, podés acceder al FTP de tu tienda siguiendo: ¿Cómo modificar el diseño desde el código de mi tienda?
Además, podés 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.