Editar el código del tema

Con el editor de código puedes editar el código del tema para hacer cambios detallados en la tienda online. La mayoría de los archivos que componen un tema contienen Liquid, el lenguaje de plantilla de Shopify. Los archivos del tema también contienen HTML, CSS, JSON y JavaScript. Edita el código de un tema solo si sabes HTML y CSS, y tienes un conocimiento básico de Liquid.

Solo puedes editar el código de un tema después de comprarlo. Esto incluye usar el generador de código con IA en el editor de temas. Si usas una versión de prueba de un tema pago, debes comprarlo antes de poder hacer cambios en el código.

El editor de código muestra un directorio de los archivos del tema y un espacio para verlos y editarlos. Cuando haces clic en un archivo del directorio, se abre en el editor de código. Puedes abrir y editar varios archivos al mismo tiempo. También puedes abrir y revisar varios archivos al mismo tiempo.

Editar el código del tema

Con el editor de código puedes modificar los archivos del tema.

Pasos:

Guardar cambios

Cuando editas un archivo, aparece un punto junto al nombre de la pestaña para indicar cambios sin guardar. Haz clic en el botón Guardar para guardar los cambios. También puedes presionar ⌘ + S en Mac o Ctrl + S en Windows.

Dar formato al código del tema

Para corregir la indentación del código, abre la paleta de comandos con ⌘ + Shift + P en Mac o Ctrl + Shift + P en Windows, escribe format y luego selecciona Formatear documento.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Abre el archivo al que quieres dar formato.

4. Presiona ⌘ + P en Mac o Ctrl + P en Windows.

5. En la paleta de comandos, ingresa format y presiona Enter en el teclado.

6. Guarda el archivo.

Seguimiento de cambios en archivos

Para revertir los cambios en los archivos del tema, usa la vista Cronología para revisar el historial del archivo y volver a una versión anterior. Ten en cuenta que los cambios realizados en otros dispositivos no aparecen en la vista Cronología.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Abre el archivo que quieres revisar.

4. En la vista Cronología, haz clic en una entrada para comparar las diferencias.

5. Para restaurar el archivo a un estado anterior, haz clic derecho en la entrada de la cronología y luego selecciona Restaurar contenido.

6. Haz clic en Restaurar.

Theme Check

El editor de código incluye Theme Check, una función que ayuda a prevenir errores porque ofrece comentarios inmediatos mientras se escribe el código, en lugar de descubrirlos en el tema activo.

En el editor de código, Theme Check puede identificar los siguientes errores en el código editado:

• Scripts que bloquean el análisis (parser), lo que puede ralentizar la tienda online
• Inconsistencias entre archivos de traducción, como claves de traducción faltantes o traducciones que no coinciden en un archivo de configuración regional
• Plantillas que faltan

Los errores se indican con una línea roja debajo del código. Para ver el error, coloca el cursor sobre la línea resaltada.

Buscar y reemplazar en el editor de código

En el editor de código, puedes buscar de cualquiera de estas formas:

• Buscar en el código de un archivo específico.
• Buscar en el código de todos los archivos del tema.

También puedes reemplazar código en un archivo específico o en varias apariciones a lo largo de todos los archivos del tema. También puedes buscar un archivo por nombre para open a file.

Buscar dentro de un archivo

Puedes buscar y reemplazar código en un archivo específico. Usa las teclas de flecha para revisar cada aparición del código.

Después de buscar código, puedes reemplazarlo en un archivo.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Abre el archivo donde quieres buscar.

4. Presiona ⌘ + F en Mac o Ctrl + F en Windows.

5. En el campo Buscar, ingresa el término de búsqueda.

6. Opcional: para reemplazar código, realiza las siguientes acciones:

• En la ventana modal de búsqueda, haz clic en el ícono .
• En el campo Reemplazar, ingresa el código de reemplazo. Puedes hacer clic en Conservar mayúsculas y minúsculas para que las mayúsculas y minúsculas del código de reemplazo coincidan con la instancia existente.
• Haz clic en el ícono Reemplazar para reemplazar una instancia a la vez, o haz clic en el ícono Reemplazar todo para reemplazar todas las instancias de una sola vez.

Buscar en todos los archivos

Haz clic en el botón de búsqueda en la barra lateral izquierda para buscar en todos los archivos del tema. Los resultados muestran cada aparición del término de búsqueda y en qué archivo aparece.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Haz clic en el ícono para abrir el panel de búsqueda.

4. En el campo Buscar, ingresa el término de búsqueda.

5. Opcional: para reemplazar código, realiza las siguientes acciones:

• En la ventana modal de búsqueda, haz clic en el ícono .
• En el campo Reemplazar, ingresa el código de reemplazo.
• Reemplaza una instancia a la vez o todas las instancias de una sola vez.

Opciones de búsqueda avanzada

Para acotar los resultados de búsqueda, usa una o más de las siguientes opciones de búsqueda:

• Coincidir mayúsculas y minúsculas devuelve coincidencias que respetan las mayúsculas y minúsculas. Por ejemplo, si ingresas product, la búsqueda resalta cualquier instancia de "product" o "Product". Si seleccionas Coincidir mayúsculas y minúsculas, la búsqueda resalta solo las instancias de product.
• Coincidir palabra completa devuelve coincidencias de la palabra exacta y excluye coincidencias parciales. Por ejemplo, si ingresas cart, la búsqueda resalta las instancias de "cart" pero no de "carton".
• Usar expresión regular devuelve resultados que coinciden con una expresión regular (regex). Una regex es una cadena de caracteres que especifica un patrón de coincidencia en el texto.

En el panel Buscar, también puedes seleccionar archivos y carpetas para incluir o excluir de los resultados de la búsqueda.

Haz clic en para abrir el menú avanzado. Puedes ingresar cualquier ruta de archivo o carpeta en los campos archivos para incluir o archivos para excluir. Para agregar más de un archivo o carpeta, sepáralos con un espacio y una coma. Por ejemplo, para buscar archivos en la carpeta sections, ingresa ./sections en el campo archivos para incluir.

También puedes buscar dentro de una carpeta específica desde la vista del directorio de archivos. Haz clic derecho en una carpeta y selecciona Buscar en la carpeta... en el menú desplegable.

Administrar archivos del tema

Puedes administrar los archivos en el código del tema. Desde el directorio de archivos puedes eliminar, agregar, cambiar el nombre y restaurar versiones anteriores de archivos modificados.

Abrir un archivo del tema

Para abrir un archivo del tema, haz clic en una carpeta y luego en el nombre del archivo en el explorador. También puedes buscar archivos por nombre o extensión y abrir el archivo.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Presiona ⌘ + P en Mac o Ctrl + P en Windows.

4. Ingresa el nombre del archivo en la barra de búsqueda y selecciona el archivo, o selecciona uno de la lista Abiertos recientemente.

Agregar un archivo nuevo al tema

Para agregar un archivo, selecciona una carpeta, haz clic en el ícono Nuevo archivo y luego ingresa el nombre y la extensión del archivo.

Los nombres de archivo pueden incluir los caracteres A-Z y 0-9, y no pueden incluir espacios. Separa las palabras con guiones o guiones bajos. Una extensión de archivo se define por un punto . y el tipo de extensión. Por ejemplo, .liquid o .css.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Haz clic en la carpeta a la que quieres agregar un archivo nuevo.

4. Haz clic derecho en el nombre de la carpeta y selecciona Nuevo archivo... en el menú desplegable.

5. Ingresa un nombre nuevo para el archivo.

6. Presiona Enter en el teclado.

Subir un recurso nuevo

Puedes subir un recurso nuevo, como un ícono o un archivo de imagen, a la carpeta assets del editor de código.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Haz clic derecho en la carpeta assets.

4. Haz clic en Subir....

5. Selecciona el archivo que quieres subir.

6. Haz clic en Abrir.

Cambiar el nombre de un archivo del tema

Puedes hacer clic derecho en un archivo para cambiarle el nombre. Asegúrate de no editar ni quitar la extensión del archivo. La extensión del archivo está compuesta por un punto . y el tipo de extensión. Por ejemplo, .liquid o .css. Los nombres de archivo pueden incluir caracteres de la A a la Z y del 0 al 9, y no pueden incluir espacios. Separa las palabras con guiones o guiones bajos. Si el nombre de archivo no es válido, no se guardará el nuevo nombre de archivo.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Haz clic derecho en un archivo y selecciona Cambiar nombre... en el menú desplegable.

4. Ingresa un nombre nuevo para el archivo.

5. Presiona Enter en el teclado.

Eliminar un archivo del tema

Puedes eliminar cualquier archivo del tema. Los archivos del tema eliminados no se pueden recuperar.

Pasos:

1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

2. Haz clic en > Editar código.

3. Haz clic derecho en un archivo y selecciona Eliminar permanentemente en el menú desplegable.

4. Haz clic en Eliminar.