Editar o código do tema

Precaución

Se os cambios que fixeches no código dun tema son incompatibles cunha actualización do tema, todos os cambios de código eliminaranse na copia actualizada. Só deberías editar o código do tema se non podes facer os cambios que necesitas mediante unha aplicación de Shopify ou o editor de temas.

Podes editar o código do teu tema para facer cambios detallados na túa tenda en liña co editor de código. A maioría dos ficheiros que compoñen un tema conteñen Liquid, a linguaxe de modelos de Shopify. Os ficheiros do tema tamén conteñen HTML, CSS, JSON e JavaScript. Edita o código dun tema só se coñeces HTML e CSS, e tes uns coñecementos básicos de Liquid.

Só podes editar o código do teu tema despois de compralo. Isto inclúe usar o xerador de código con IA no editor de temas. Se estás usando unha versión de proba dun tema de pago, tes que compralo antes de poder facer cambios no código.

Fai medrar o teu negocio

Se queres engadir funcións personalizadas ou código, pero non tes experiencia no desenvolvemento de sitios web con HTML, CSS e JavaScript, considera a posibilidade de contratar un Partner de Shopify.

Precaución

Para prepararte para personalizar o teu tema, completa as seguintes tarefas recomendadas:

• Duplica o teu tema para crear unha copia de seguranza. Isto facilita descartar os teus cambios e comezar de novo se o necesitas.
• Asegúrate de entender que nivel de soporte está dispoñible.
• Obtén información sobre os requisitos e as boas prácticas para cargar imaxes.

O editor de código amosa un directorio cos ficheiros do tema e un espazo para visualizar e editar os ficheiros. Cando fas clic nun ficheiro no directorio, ábrese no editor de código. Podes abrir e editar varios ficheiros á vez. Tamén podes abrir e revisar varios ficheiros á vez.

Editar o código do teu tema

Podes usar o editor de código para modificar os ficheiros do teu tema.

Pasos:

Escritorio

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

Móbil

1. Desde a aplicación de Shopify, toca a icona .

2. Na sección Canles de vendas, toca Tenda en liña.

3. Toca Xestionar temas.

4. Toca > Editar código.

Gardar os cambios

Cando editas un ficheiro, móstrase un punto xunto ao nome da lapela para indicar que hai cambios sen gardar. Fai clic no botón Gardar para gardar os teus cambios. Tamén podes premer ⌘ + S en Mac ou Ctrl + S en Windows para gardar os teus cambios.

Dar formato ao código do tema

Para corrixir a sangría do código, abre a paleta de comandos con ⌘ + Maiús + P en Mac ou Ctrl + Maiús + P en Windows, escribe format e, a continuación, selecciona Formatar documento.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Abre o ficheiro ao que lle queres dar formato.

4. Preme ⌘ + P en Mac ou Ctrl + P en Windows.

5. Na paleta de comandos, escribe format e despois preme Intro no teu teclado.

6. Garda o ficheiro.

Seguimento dos cambios nos ficheiros

Para restaurar un ficheiro modificado do tema a unha versión anterior, utiliza a vista Cronoloxía dese ficheiro.

A vista Cronoloxía restaura un ficheiro existente cada vez. Non restaura un tema completo nin pode recuperar ficheiros do tema eliminados. O historial da cronoloxía é finito, polo que é posible que as versións máis antigas non estean dispoñibles.

A restauración substitúe todo o contido do ficheiro, incluídos os cambios que quizais queiras manter. Antes de restaurar un ficheiro, copia o contido actual a un lugar seguro se pensas que vas querer conservar algún cambio.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Abre o ficheiro existente que queres revisar ou restaurar.

4. Opcional: se pensas que vas querer conservar algún cambio actual, copia o contido do ficheiro a un lugar seguro antes de restauralo.

5. Na vista Cronoloxía, fai clic nunha entrada da cronoloxía para comparar as diferenzas.

6. Para substituír todo o contido do ficheiro pola versión anterior seleccionada, fai clic co botón dereito na entrada da cronoloxía e despois selecciona Restaurar contido.

7. Fai clic en Restaurar.

Theme Check

O editor de código inclúe Theme Check, unha función que axuda a evitar erros ao proporcionar comentarios inmediatos mentres se escribe o código, no canto de descubrir os erros no teu tema activo.

No editor de código, Theme Check pode identificar os seguintes erros no código editado:

• Scripts que bloquean o analizador, o que pode retardar un escaparate
• Incoherencias entre os ficheiros de tradución, como claves de tradución que faltan ou traducións que non coinciden nun ficheiro de configuración rexional
• Modelos que faltan

Os erros indícanse cunha liña vermella debaixo do código. Para ver o erro, pasa o rato sobre a liña resaltada.

Buscar e substituír no editor de código

Podes buscar no editor de código de calquera das seguintes maneiras:

• Buscar no código dun ficheiro específico.
• Buscar no código de todos os ficheiros do tema.

Tamén podes substituír o código nun ficheiro específico ou en varias instancias de todos os ficheiros do tema. Ademais, podes buscar un ficheiro polo seu nome para abrir un ficheiro.

Buscar dentro dun ficheiro

Podes buscar o código nun ficheiro específico e substituílo. Utiliza as teclas de frecha para revisar cada instancia do código.

Despois de buscar o código, podes substituílo nun ficheiro.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Abre o ficheiro no que queres buscar.

4. Preme ⌘ + F en Mac ou Ctrl + F en Windows.

5. No campo Buscar, escribe o teu termo de busca.

6. Opcional: para substituír o código, realiza as seguintes accións:

• No modal de busca, fai clic na icona .
• No campo Substituír, escribe o código de substitución. Podes facer clic en Preservar maiúsculas/minúsculas para facer coincidir as maiúsculas do código de substitución coa instancia existente.
• Fai clic na icona Substituír para substituír as instancias dunha nunha ou fai clic na icona Substituír todo para substituílas todas á vez.

Buscar en todos os ficheiros

Fai clic no botón de busca na barra lateral esquerda para buscar en todos os ficheiros do tema. Os resultados mostran todas as instancias do termo de busca e en que ficheiro aparecen.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Fai clic na icona para abrir o panel de busca.

4. No campo Buscar, escribe o teu termo de busca.

5. Opcional: para substituír o código, realiza as seguintes accións:

• No modal de busca, fai clic na icona .
• No campo Substituír, escribe o código de substitución.
• Substitúe as instancias dunha nunha ou todas á vez.

Opcións avanzadas de busca

Para acoutar os teus resultados de busca, utiliza unha ou máis das seguintes opcións:

• Diferenciar maiúsculas e minúsculas devolve os termos de busca que coinciden con elas. Por exemplo, se introduces product, a busca destacará calquera caso de "product" ou "Product". Se seleccionas Diferenciar maiúsculas e minúsculas, a busca destacará unicamente os casos de product.
• Coincidir coa palabra completa devolve os termos de busca que coinciden coa palabra exacta e exclúe as coincidencias parciais. Por exemplo, se introduces cart, a busca destacará os casos de "cart", pero non de "carton".
• Usar expresión regular devolve resultados de busca que coinciden cunha expresión regular (regex). Unha regex é unha cadea de caracteres que especifica un padrón de coincidencia no texto.

Precaución

O uso de regex é unha técnica de personalización avanzada. Podes utilizar unha ferramenta de terceiros como regex101 ou RegExr para guiarte á hora de crear unha cadea regex.

No panel Buscar tamén podes seleccionar os ficheiros e cartafoles para incluír ou excluír dos resultados de busca.

Fai clic en para abrir o menú avanzado. Podes introducir calquera camiño de ficheiro ou cartafol nos campos ficheiros para incluír ou ficheiros para excluír. Para engadir máis dun ficheiro ou cartafol, sepáraos cunha coma e un espazo. Por exemplo, para buscar ficheiros no cartafol sections, introduce ./sections no campo ficheiros para incluír.

Tamén podes buscar dentro dun cartafol específico na visualización do directorio de ficheiros. Fai clic co botón dereito nun cartafol e, a continuación, selecciona Buscar no cartafol... no menú despregable.

Xestionar ficheiros de temas

Podes xestionar os ficheiros no código do tema. Podes eliminar ficheiros, engadir novos ficheiros, cambiar o nome dos ficheiros e restaurar os ficheiros de código modificados desde a súa visualización Cronoloxía cando haxa unha versión anterior dispoñible. Os ficheiros de recursos, como imaxes, CSS, JavaScript e tipos de letras do cartafol assets non teñen un historial de Cronoloxía.

Abrir un ficheiro de tema

Para abrir un ficheiro de tema, fai clic nun cartafol e despois fai clic no nome do ficheiro desde o explorador. Tamén podes buscar ficheiros polo nome ou extensión e logo abrir o ficheiro.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Preme ⌘ + P en Mac ou Ctrl + P en Windows.

4. Introduce o nome do ficheiro na barra de busca e selecciona o ficheiro ou ben selecciona un ficheiro da lista Abertos recentemente.

Engadir un ficheiro de tema novo

Para engadir un ficheiro, selecciona un cartafol, fai clic na icona Novo ficheiro e, por último, introduce o nome e a extensión de ficheiro.

Os nomes dos ficheiros poden incluír os caracteres do A ao Z e do 0 ao 9 e non poden conter espazos. Separa as palabras con guións ou guións baixos. Unha extensión de ficheiro defínese cun punto . e o tipo de extensión; por exemplo, .liquid ou .css.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Fai clic no cartafol onde queiras engadir un novo ficheiro.

4. Fai clic co botón dereito no nome do cartafol e selecciona Novo ficheiro... no menú despregable.

5. Introduce un nome novo para o ficheiro.

6. Preme a tecla Intro no teu teclado.

Cargar un recurso novo

Podes cargar un novo recurso (como unha icona ou un ficheiro de imaxe) ao cartafol assets do editor de código.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Fai clic co botón dereito no cartafol assets.

4. Fai clic en Cargar....

5. Selecciona o ficheiro que desexas cargar.

6. Fai clic en Abrir.

Cambiar o nome dun ficheiro de tema

Podes facer clic co botón dereito sobre un ficheiro para cambiarlle o nome. Asegúrate de non editar nin eliminar a extensión de ficheiro. Unha extensión de ficheiro defínese por un punto . e o tipo de extensión; por exemplo, .liquid ou .css. Os nomes dos ficheiros poden incluír os caracteres do A ao Z e do 0 ao 9 e non poden conter espazos. Separa as palabras con guións ou guións baixos. Se o nome do ficheiro non é válido, o novo nome non se gardará.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Fai clic co botón dereito nun ficheiro e selecciona Cambiar o nome... no menú despregable.

4. Introduce un nome novo para o ficheiro.

5. Preme a tecla Intro no teu teclado.

Eliminar un ficheiro de tema

Precaución

A eliminación dun ficheiro de tema pode danar o teu tema. Antes de eliminar calquera ficheiro, asegúrate de duplicar o teu tema.

Podes eliminar calquera ficheiro do teu tema. Os ficheiros de tema eliminados non se poden recuperar.

Pasos:

1. Desde o teu administrador de Shopify, vai a Tenda en liña.

2. Fai clic en > Editar código.

3. Fai clic co botón dereito nun ficheiro e selecciona Eliminar permanentemente no menú despregable.

4. Fai clic en Eliminar.