Podés personalizar el diseño de tu tienda editando su código con HTML, CSS y JavaScript. El camino para liberar esa edición depende del tipo de diseño que usa tu tienda.
Helpjuice Success Callout Title
El acceso al código fuente no está disponible en todos los planes. Para confirmar si tu plan tiene el recurso, consultá la página de planes y precios y buscá "Diseño 100% flexible (via HTML, CSS y JavaScript)" en la columna de funcionalidades.
¿Cuál es el método de edición de código de mi diseño?
Hay dos caminos, y lo que define cuál es el tuyo depende del tipo de diseño elegido para tu tienda:
Tipo de diseño |
Qué libera la edición |
|---|---|
| Diseños clásicos legacy (Amazonas, Rio, etc.) | Abrir el acceso al código FTP en el panel de administrador. La conexión FTP se hace por el CLI de Tiendanube, que automatiza toda la sincronización. |
| Diseño con secciones (como Ipanema) | Hacer el fork del diseño, por el CLI de Tiendanube. |
En los dos casos, la edición de los archivos sucede fuera del panel de administrador, por eso te recomendamos que la haga una agencia o una persona desarrolladora. Si no tenés a alguien para hacer estos cambios, los Especialistas Tiendanube ya están acostumbrados a personalizar nuestros diseños y pueden mandarte un presupuesto.
Para saber cómo funcionan las actualizaciones de las mejoras para cada tipo de diseño, ingresá a: ¿Cómo testear las actualizaciones de mi diseño en Tiendanube sin perder las personalizaciones?
¿Qué necesito antes de editar el código del diseño?
Antes de liberar la edición, conviene revisar estos puntos:
- Plan con acceso al código fuente. Si tu plan no tiene el recurso, consultá cómo cambiar tu plan de Tiendanube.
- Conocimiento en HTML, CSS y JavaScript, tuyo o de quien vaya a hacer los cambios.
- Backup de los archivos antes de cualquier cambio. Tiendanube no hace backup de diseño personalizado, así que guardá una copia para poder restaurar el diseño si algo afecta la navegación de la tienda.
- La documentación del diseño, con las buenas prácticas para el funcionamiento correcto. Consultá la documentación para desarrolladores web.
¿Cómo libero la edición del código?
En diseños clásicos (FTP)
En los diseños clásicos legacy, el primer paso sucede en el administrador: abrís el acceso al código y recibís las credenciales que usarás en la herramienta de edición. Para eso, seguí estos pasos:
1. Acceder al administrador de tu tienda.
2. Ir a "Tienda online > Diseño" y hacer clic en "Editar el código".
3. Leer el aviso de la ventana lateral y, si estás de acuerdo, hacer clic en "Abrir FTP".
4. Esperar a que se habilite el acceso, lo que puede tardar algunos minutos.
5. Copiar las credenciales que aparecen en la ventana, que son el Host, el Usuario y la contraseña.
¡Listo!
El acceso al código está abierto y las credenciales están listas para usar en la herramienta de edición.
Helpjuice Info Callout Title
Con estas credenciales, la forma indicada de editar los archivos es el CLI de Tiendanube, que sincroniza los cambios y evita depender de un cliente FTP de terceros. Para el paso a paso, consultá cómo instalar y usar el CLI de Tiendanube para editar diseños.
Para saber qué es posible modificar por este camino, consultá qué tipo de cambios se pueden hacer sobre el diseño vía código.
En diseños con secciones (Fork)
En los diseños con secciones, como Ipanema, es el fork el que libera ese código para edición cuando la personalización va más allá de lo que ofrece el editor de diseño.
El fork se hace por el CLI de Tiendanube. Después de aplicarlo, el diseño aparece identificado como "Forked" en la lista de diseños.
Helpjuice Warning Callout Title
Con el fork, el diseño sigue conectado a las actualizaciones de Tiendanube. La diferencia es que dejan de aplicarse solas y pasan a llegar como aviso para que las revises antes de publicar.
Para el paso a paso del fork y de la edición de los archivos, consultá el tutorial del CLI: ¿Cómo instalar y usar el CLI de Tiendanube para editar diseños?
Y para entender cómo aplicar las versiones nuevas después del fork, consultá cómo testear las actualizaciones de mi diseño en Tiendanube sin perder las personalizaciones.
Para el resto de los contenidos de personalización avanzada, ingresá a la sección personalización avanzada del diseño.
Preguntas frecuentes sobre la edición de código del diseño
¿Cómo cierro el acceso al código en un diseño clásico legacy?
Para volver al diseño estándar o cambiar de diseño, primero es necesario cerrar el acceso al código. Para eso, seguí estos pasos:
1. Acceder al administrador de tu tienda.
2. Ir a "Tienda online > Diseño" y hacer clic en "Cerrar FTP".
3. Hacer clic en "Cerrar" para confirmar.
4. Esperar a que se desactive el acceso, lo que puede tardar algunos minutos.
¡Listo!
El acceso al código está cerrado y la tienda vuelve al diseño estándar de Tiendanube.
Helpjuice Success Callout Title
Al cerrar el acceso, se pierden todos los cambios hechos directamente en el código, y Tiendanube no guarda backup de diseño personalizado. Guardá una copia de los archivos antes si querés volver a aplicar la personalización en la tienda en el futuro.
Después de esto, para elegir otro modelo, consultá cómo elegir otro diseño.
¿Cómo sé si el diseño de mi tienda es clásico o con secciones?
Los diseños con secciones son los más recientes de la tienda de diseños, como Ipanema, y traen el editor por secciones. En "Tienda online > Diseño", la tarjeta del diseño muestra su nombre y su versión.
Si en la tarjeta de tu diseño la opción que aparece es "Editar el código" con apertura de FTP, el diseño es clásico legacy.
¿Necesito abrir el FTP para editar un diseño con secciones?
No. En diseño con secciones, la liberación del código es el fork, que se hace por el CLI de Tiendanube, y no pasa por el botón de abrir FTP en el panel.
El acceso por FTP sigue existiendo para los diseños clásicos legacy.
¿Puedo cambiar de diseño con la edición de código liberada?
En diseño clásico legacy, no. Mientras el acceso al código esté abierto, el cambio de diseño queda bloqueado, y es necesario cerrar el acceso antes.
Como cerrar el acceso borra los cambios hechos en el código, guardá una copia de los archivos antes de hacerlo.