CSS es un lenguaje de programación utilizado para definir la apariencia con la que los elementos de una página de internet son presentados para sus visitantes. Es decir, solo sirve para modificar algunos aspectos visuales y no su funcionamiento o estructura.

Editar el código CSS de la tienda permite hacer algunas pequeñas modificaciones en el diseño de tu tienda, sin cambiar el código HTML. Esto es más complejo y requiere trabajar con un diseñador web y abrir el FTP de tu diseño para modificarlo.

💡 TIP: En el tutorial 👉 ¿Qué partes del diseño se pueden modificar con códigos CSS? podés ver algunos ejemplos de personalización con este lenguaje.

📌Aclaración: La edición en CSS ofrece diversas posibilidades de personalización. Para poder aprovecharlas mejor, es recomendable tener un conocimiento básico de este lenguaje.

🕵️‍♀️ ¿Cómo accedo a la herramienta de edición?

A continuación, te mostramos los pasos para localizar la herramienta de edición en CSS dentro del administrador de tu tienda.

1. Ingresar a Diseño > Personalizar tu diseño dentro de tu administrador.

2. Hacer clic en "Edición avanzada de CSS".

3. Pegar el código que quieras usar en el campo correspondiente (Ctrl+V) y hacer clic en "Probar CSS".

4. Cuando aparezca el cartel "Hay cambios sin guardar", hacer clic en "Guardar cambios".

¡Listo! Si tu código está bien redactado, vas a ver los cambios aplicados en tu tienda.

📌Aclaración: Si querés hacer más cambios, te recomendamos pegar los distintos códigos uno arriba del otro separados por un espacio. No es recomendable hacer muchos cambios en CSS; si necesitás hacer cambios mayores podés 👉 acceder al FTP de tu tienda.

👩‍💻 ¿Cómo obtengo los códigos?

Lo ideal para poder hacer cambios por CSS es que puedas aprender sobre este lenguaje. Podés empezar haciendo algún curso sobre CSS, como el de 🌐 Codecademy, por ejemplo.

Una vez que tengas los conceptos básicos, para empezar a probar estos cambios, podés seguir estos pasos:

1. Ir a tu tienda (la parte visible para tus clientes), hacer clic derecho sobre la sección, botón o texto que quieras modificar y seleccionar "Inspeccionar". En este ejemplo, seleccionamos el mensaje de bienvenida.

2. Eso va a abrir la ventana del código en el navegador, y abajo a la derecha vas a encontrar el CSS (donde dice "Styles"). 

3. Desde allí, podés modificar los aspectos visuales del elemento que seleccionaste. A modo de ejemplo, vamos a modificar el tamaño de fuente del mensaje de bienvenida.

4. Enseguida vas a ver que el cambio impacta en cómo se ve tu tienda. No te preocupes, este no se guarda, solo lo ves vos. Si estás conforme con el cambio, podés seleccionar y copiar el código final (Ctrl+C).

5. Finalmente, podés pegar (Ctrl+V) el código dentro del administrador de tu tienda, en el campo de la primera sección de este tutorial. 👆

¡Listo! Ya hiciste el cambio que querías. ✨ 

¿Encontró su respuesta?