Editar código de tema
Puedes editar el código de tu tema para realizar cambios específicos en tu tienda online. La mayoría de los archivos que componen un tema contienen Liquid, el lenguaje de plantillas de Shopify. Los archivos de los temas también contienen HTML, CSS, JSON y JavaScript. Edita el código de un tema solo si sabes utilizar HTML y CSS y tienes conocimientos básicos de Liquid.
En esta página
Antes de personalizar tu tema
Para prepararte para personalizar el tema, completa las siguientes tareas recomendadas:
- Duplica tu tema para crear una copia de seguridad. Así será fácil descartar tus cambios y comenzar nuevamente si fuese necesario.
- Asegúrate de comprender qué nivel de soporte está disponible.
- Leer más sobre los requerimientos y las prácticas correctas para subir imágenes.
Editar el código del tema
Puedes editar el código de tu tema.
Pasos:
- Desde el panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en ... > Editar código.
- En la aplicación de Shopify, toca el botón ….
- En la sección Canales de ventas, toca Tienda online.
- Toca Administrar temas.
- Haz clic en ... > Editar código.
- En la aplicación de Shopify, toca el botón ….
- En la sección Canales de ventas, toca Tienda online.
- Toca Administrar temas.
- Haz clic en ... > Editar código.
El editor de código muestra un directorio de archivos de temas a la izquierda y un espacio para ver y editar los archivos a la derecha.
Cuando haces clic en un archivo en el directorio de la izquierda, se abre en el editor de código. Puedes abrir y editar varios archivos al mismo tiempo. Los archivos que modifiques tendrán un punto junto a su nombre:
Esto puede ayudarte a hacer un seguimiento de los cambios realizados.
Volver a una versión anterior del archivo de tu tema
Si has cambiado los archivos de temas y necesitas restaurarlos, puedes volver a los archivos .liquid uno por uno a una hora y fecha anteriores a los cambios.
Pasos:
- Desde el panel de control de Shopify, ve a Tienda online > Temas.
- Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
- Bajo el encabezado Plantillas, haz clic en uno de los archivos .liquid que editaste recientemente.
- Haz clic en Versión actual bajo el nombre del archivo
.liquid. - Haz clic en el menú desplegable para seleccionar una versión anterior. Al hacer clic en una fecha, el código volverá a esa versión guardada.
- Opcional: haz clic en Vista previa de la tienda para verificar que se solucionó el error.
- En la aplicación de Shopify, toca el botón ….
- En la sección Canales de ventas, toca Tienda online.
- Toca Administrar temas.
- Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
- Bajo el encabezado Plantillas, haz clic en uno de los archivos .liquid que editaste recientemente.
- Haz clic en Versión actual bajo el nombre del archivo
.liquid. - Haz clic en el menú desplegable para seleccionar una versión anterior. Al hacer clic en una fecha, el código volverá a esa versión guardada.
- Opcional: haz clic en Vista previa de la tienda para verificar que se solucionó el error.
- En la aplicación de Shopify, toca el botón ….
- En la sección Canales de ventas, toca Tienda online.
- Toca Administrar temas.
- Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
- Bajo el encabezado Plantillas, haz clic en uno de los archivos .liquid que editaste recientemente.
- Haz clic en Versión actual bajo el nombre del archivo
.liquid. - Haz clic en el menú desplegable para seleccionar una versión anterior. Al hacer clic en una fecha, el código volverá a esa versión guardada.
- Opcional: haz clic en Vista previa de la tienda para verificar que se solucionó el error.
Theme Check
El editor de código incluye Theme Check, una función que ayuda a evitar errores proporcionando comentarios inmediatos a medida que se escribe el código, en lugar de descubrir errores en tu tema activo.
En el editor de código, Theme Check puede identificar los siguientes errores en el código editado:
- Los scripts de bloqueo de parser pueden ralentizar la tienda online
- Inconsistencias entre los archivos de traducción, como claves de traducción faltantes o traducciones que no coinciden en un archivo de configuración regional
- Plantillas faltantes
Los errores se indican con una línea roja que indica el código para corregir errores. Para ver el error, desplaza el mouse sobre la línea resaltada.
Tutoriales de personalización de códigos de temas
Puedes utilizar los tutoriales de personalización del código de temas como guía para realizar cambios en tu tienda online. Los tutoriales están organizados según el tipo de página o función que modifican.
Los tutoriales de personalización de temas se dividen por la versión de la arquitectura temática que utilizan. Aprende cómo identificar la versión de tu arquitectura temática.
Obtén ayuda para personalizaciones
Si necesitas ayuda para realizar cambios en tu tema, puedes contactar al desarrollador de tu tema para recibir ayuda.
Para ver qué otros recursos están disponibles para ayudarte con las personalizaciones de temas, dirígete a la sección Recursos adicionales para soporte de temas.