Centro de Atención Nube Configurá tu tienda Diseño Editar el código de diseño

¿Cómo acceder al código de mi tienda para personalizar el diseño?

Pasos para abrir el FTP y tener un diseño a medida a partir de una plantilla de Tiendanube

Última actualización: 29/01/2024

La edición del código fuente, conocido como FTP (o Protocolo de transferencia de archivos), permite el acceso al código de la tienda para realizar mayores cambios y personalizaciones en el diseño o funcionamiento que no estén incluidas en las plantillas de 🎨 Tiendanube Diseños, directamente sobre el HTML, CSS y JavaScript. Es por eso que, para trabajar con el FTP, es necesario tener conocimientos avanzados en esos lenguajes de programación.

Delete

Info

Si querés realizar cambios pequeños en el diseño de tu tienda, es probable que no necesites abrir el FTP, y que puedas hacerlo a través de códigos CSS

Para verificarlo, te recomendamos ir al tutorial 👉 ¿Cómo editar el diseño con código CSS?.

En este tutorial te contamos cómo acceder a la herramienta de edición del código en tres partes:

  • Antes de acceder al código
  • Pasos para abrir el FTP de tu tienda
  • Cerrar el FTP de tu tienda

Antes de acceder al código

Tené en cuenta estos aspectos antes de abrir el FTP de tu tienda:

Consultar el plan de tu tienda

La edición del diseño vía FTP está disponible únicamente en algunos de los planes.


Podés conocer si el plan de tu tienda incluye esta herramienta en nuestra página de 👉 Planes y precios, buscando la funcionalidad "Diseño 100% flexible (vía HTML, CSS y JavaScript".


En caso de que sea necesario, podés ver los pasos para tener otro plan en 📝 ¿Cómo cambiar mi plan de Tiendanube?

Delete

Trabajar con un programador o diseñador web

Si no contás con conocimiento avanzado de diseño web (HTML, CSS y JavaScript), es necesario que contrates a una persona con estos conocimientos para trabajar con el FTP de tu tienda. Para esto, podés contactar a uno de los Especialistas de Tiendanube y solicitar un presupuesto sin compromiso.

👉 Página de Tiendanube Especialistas

Delete

Acceder a la Documentación para diseñadores

Si contás con conocimientos de diseño web o ya estás trabajando con un diseñador o programador para que realice los cambios en el código de tu tienda, es importante seguir nuestra documentación de diseño para asegurar una buena implementación y funcionamiento.

👉 Documentación para diseñadores

Delete

Conocer qué cambios se pueden hacer con FTP

Para saber cuáles son las modificaciones que podés hacer en tu Tiendanube vía FTP, te recomendamos el tutorial:

📝 ¿Qué tipo de cambios se pueden hacer sobre el diseño vía código?

Delete

Saber cómo cambiar la plantilla de diseño

Al habilitar el acceso al FTP, no va a seguir siendo posible cambiar de plantilla de diseño. 


Para eso, es necesario desactivar primero la edición del código fuente, siguiendo el tutorial 👉 ¿Cómo volver a una plantilla de diseño de Tiendanube si tengo un diseño a medida?. Luego, elegir la plantilla que quieras, como indicamos en el tutorial 👉 ¿Cómo cambiar mi plantilla de diseño y qué implica?.

Delete
Delete

Info

También te recomendamos tener en cuenta los aspectos que mencionamos en 📝 ¿Cómo trabajar con el código fuente (FTP) de mi Tiendanube?.


Pasos para abrir el FTP de tu tienda

Para acceder al FTP de tu tienda, podés seguir los pasos que te contamos acá:

Ver pasos

1. Ingresar a "Mi Tiendanube > Diseño" dentro del administrador de tu tienda.

2. Hacer clic en "Editar el código" en la sección de tu diseño actual.

Sección Mi Tiendanube - Diseño con el botón Editar el código resaltado


3. Leer detenidamente el cartel de advertencia, y hacer clic en "Abrir FTP".

Ventana emergente avisando que las futuras actualizaciones no van a impactar de forma automática si se abre el FTP de la tienda


Una vez que hacés clic en el botón, se va a habilitar tu usuario y contraseña para acceder al FTP de tu tienda:

Sección de Código a medida


4. Modificar los archivos del FTP que desees desde un cliente de FTP como 🌐 Filezilla, que es la opción que te recomendamos.


5. Para modificar tus archivos con un cliente FTP, solo tenés que registrar los datos generados de Host, Usuario y Contraseña, que sirven para bajar los archivos con cualquier cliente FTP. 

¡Listo! 🙌

Ya vas a haber accedido al FTP de tu tienda para comenzar a editar el diseño desde el código. 

Delete

Antes de ejecutar el código personalizado

Después de editar el código del diseño de la tienda, hay dos acciones que son importantes de realizar para evitar errores:

Seleccionar el tipo de transferencia

Para que no ocurra un error, luego de insertar los datos en el programa auxiliar, es obligatorio dejar el tipo de transferencia como binario, tal como lo configuramos en FileZilla:


Delete

Success

En caso de que elijas la opción ASCII, puede aparecer el error "503 ASCII (text) data type is not supported for file transfer operations", lo que hace imposible aplicar ediciones en el código del diseño.

Delete

Certificado SSL seguro

Después de configurar el tipo de transferencia como mostramos arriba, es el momento de ejecutar el código personalizado del diseño.

1. Al hacer clic en "Quickconnect", va a aparecer una ventana con la información del certificado de seguridad (SSL) del dominio.


2. En ella, mantener las dos opciones seleccionadas y hacer clic en "OK".


3. En caso de que aparezca otra ventana, solo es necesario confirmar nuevamente, haciendo clic otra vez en "OK".

Delete

Cerrar el FTP de la tienda

En caso de que quieras cerrar el FTP de tu tienda y volver a usar una de nuestras plantillas de diseño, podés seguir los pasos en el tutorial:

📝 ¿Cómo volver a una plantilla de diseño de Tiendanube si tengo un diseño a medida?