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

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

📌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.

🔷 ¿Dónde encuentro 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 Mi Tiendanube > Diseño dentro del administrador de tu tienda.

2. Hacer clic en "Personalizar el diseño actual".

3. Una vez dentro de la sección de personalización, hacer clic en "Edición avanzada de CSS" en las opciones del menú lateral.

4. Pegar el código que quieras usar en el campo correspondiente (Ctrl+V en Windows o Command + V en Mac) y hacer clic en "Probar CSS".

5. Luego, hacer clic en el botón de "Publicar" si querés publicar el cambio en tu tienda, o en "Guardar Borrador" si querés ver cómo se vería en tu tienda, sin publicar el cambio automáticamente.

📌Aclaración: tené en cuenta que al publicar este cambio, se van a publicar todas las configuraciones que previamente hayas guardado en un borrador. Para conocer más sobre el funcionamiento de la tienda borrador ingresá en este tutorial 👉¿Cómo personalizar el diseño de mi tienda en un borrador?

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

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 por CSS, ya que si cambiás de plantilla, se van a perder. Si necesitás hacer cambios mayores podés acceder al FTP de tu tienda 👉 ¿Cómo modificar el diseño desde el código?.

🔷 ¿Cómo obtengo los códigos?

Lo ideal para poder hacer cambios por CSS es que puedas aprender sobre este lenguaje.

💡TIP: podés empezar haciendo algún curso sobre CSS, como el de 🌐Codecademy.

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. Se 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 cómo el cambio impacta en tu tienda, pero no te preocupes, que no está guardado aún, solo lo ves vos. Si estás conforme con el cambio, podés seleccionar toda la regla de CSS y copiar el código final (Ctrl+C).

5. Debés pegar (Ctrl+V) el código dentro del Administrador de tu tienda, en el campo que te indicamos en la primera sección de este tutorial. 👆

¡Listo! Ya va a estar aplicado el cambio que querías. Es importante que revisen si se ve bien tanto desde la computadora como desde el celular.

¿Encontró su respuesta?