Edició del codi del tema

Precaució

Si els canvis que has fet al codi d'un tema són incompatibles amb una actualització del tema, tots els canvis del codi s'eliminaran a la còpia actualitzada. Només hauries d'editar el codi del teu tema si no pots fer els canvis que necessites utilitzant una aplicació de Shopify o mitjançant l'editor de temes.

Pots editar el codi del tema per fer canvis detallats a la teva botiga en línia amb l'editor de codi. La majoria dels fitxers que formen un tema contenen Liquid, el llenguatge de plantilles de Shopify. Els fitxers del tema també contenen HTML, CSS, JSON i JavaScript. Edita el codi d'un tema només si tens coneixements d'HTML i CSS, i nocions bàsiques de Liquid.

Pots editar el codi del tema només després d'haver-lo comprat. Això inclou l'ús del generador de codi per IA de l'editor de temes. Si fas servir una versió d'un període de prova d'un tema de pagament, l'hauràs de comprar abans de poder fer canvis al codi.

Fes créixer el teu negoci

Si vols afegir funcions o codi personalitzat però no tens experiència en el desenvolupament de llocs web amb HTML, CSS i JavaScript, planteja't contractar un Partner de Shopify.

Precaució

Com a preparació abans de personalitzar el teu tema, completa les tasques recomanades següents:

• Duplica el tema per crear una còpia de seguretat. D'aquesta manera serà més fàcil descartar els canvis i tornar a començar si cal.
• Assegura't que entens quin nivell de suport hi ha disponible.
• Informa't sobre els requisits i les bones pràctiques per pujar imatges.

L'editor de codi mostra un directori amb els fitxers del teu tema i un espai per visualitzar-los i editar-los. Quan fas clic a un fitxer del directori, s'obre a l'editor de codi. Pots obrir i editar diversos fitxers a la vegada. També pots obrir i revisar diversos fitxers alhora.

Edita el codi del tema

Pots utilitzar l'editor de codi per modificar els fitxers del teu tema.

Passos:

Escriptori

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

Mòbil

1. A l'aplicació de Shopify, toca la icona .

2. A la secció Canals de venda, toca Botiga en línia.

3. Toca Gestiona els temes.

4. Toca > Edita el codi.

Desar els canvis

Quan edites un fitxer, es mostra un punt al costat del nom de la pestanya per indicar que hi ha canvis sense desar. Fes clic al botó Desa per desar els canvis. També pots prémer ⌘ + S al Mac o Ctrl + S al Windows per desar-los.

Donar format al codi del tema

Per corregir la sagnia del codi, obre la paleta d'ordres amb ⌘ + Maj + P al Mac o Ctrl + Maj + P al Windows, tecleja format i, a continuació, selecciona Formata el document.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Obre el fitxer a què vulguis donar format.

4. Prem ⌘ + P al Mac o Ctrl + P al Windows.

5. A la paleta d'ordres, escriu format i prem Intro al teclat.

6. Desa el fitxer.

Seguiment dels canvis en els fitxers

Per restaurar un fitxer de tema modificat a una versió anterior, utilitza la visualització de Cronologia del fitxer corresponent.

La visualització de Cronologia restaura els fitxers existents d'un en un. No restaura un tema complet ni pot recuperar fitxers de tema eliminats. L'historial de la cronologia és limitat, de manera que pot ser que les versions més antigues no estiguin disponibles.

En restaurar, se substitueix tot el contingut del fitxer, inclosos els canvis que potser vols conservar. Abans de restaurar un fitxer, copia'n el contingut actual en un lloc segur per si vols conservar-ne algun canvi.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Obre el fitxer existent que vulguis revisar o restaurar.

4. Opcional: si vols conservar algun canvi actual, copia el contingut del fitxer en un lloc segur abans de restaurar-lo.

5. A la visualització de Cronologia, fes clic a una entrada de la cronologia per comparar-ne les diferències.

6. Per substituir tot el contingut del fitxer per la versió anterior seleccionada, fes clic amb el botó dret a l'entrada de la cronologia i, a continuació, selecciona Restaura el contingut.

7. Fes clic a Restaura.

Theme Check

L'editor de codi inclou el Theme Check, una funció que t'ajuda a prevenir errors proporcionant-te comentaris immediats mentre s'escriu el codi, en comptes de descobrir-los al teu tema actiu.

A l'editor de codi, el Theme Check pot identificar els errors següents en el codi editat:

• Scripts que bloquegen l'anàlisi, els quals poden alentir un aparador
• Incoherències entre els fitxers de traducció, com ara claus de traducció que falten o traduccions que no coincideixen en un fitxer de configuració regional
• Plantilles que falten

Els errors s'indiquen amb una línia vermella a sota del codi. Per veure l'error, passa el ratolí per sobre de la línia ressaltada.

Cerca i substitució a l'editor de codi

Pots cercar dins de l'editor de codi d'una de les maneres següents:

• Cerca el codi d'un fitxer específic.
• Cerca el codi de tots els fitxers del tema.

També pots substituir el codi en un fitxer específic o múltiples instàncies a tots els fitxers del tema. A més, pots cercar un fitxer per nom per obrir-lo.

Cerca dins d'un fitxer

Pots cercar el codi d'un fitxer específic i substituir-lo. Utilitza les tecles de fletxa per revisar cada instància del codi.

Un cop hagis cercat el codi, el pots substituir en un fitxer.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Obre el fitxer on vulguis fer la cerca.

4. Prem ⌘ + F al Mac o Ctrl + F al Windows.

5. Al camp Cerca, introdueix el teu terme de cerca.

6. Opcional: per substituir el codi, fes les accions següents:

• Al quadre de diàleg modal de cerca, fes clic a la icona .
• Al camp Substitueix, introdueix el codi de substitució. Pots fer clic a Conserva les majúscules/minúscules per fer coincidir l'ús de majúscules del codi de substitució amb la instància existent.
• Fes clic a la icona Substitueix per substituir les instàncies d'una en una, o fes clic a la icona Substitueix-ho tot per substituir totes les instàncies alhora.

Cerca a tots els fitxers

Fes clic al botó de cerca de la barra lateral esquerra per cercar a tots els fitxers del tema. Els resultats mostren cada instància del terme de cerca i en quin fitxer apareix.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Fes clic a la icona per obrir el tauler de cerca.

4. Al camp Cerca, introdueix el teu terme de cerca.

5. Opcional: per substituir el codi, fes les accions següents:

• Al quadre de diàleg modal de cerca, fes clic a la icona .
• Al camp Substitueix, introdueix el codi de substitució.
• Substitueix les instàncies d'una en una, o totes alhora.

Opcions de cerca avançada

Per acotar els resultats de la cerca, utilitza una o diverses de les opcions de cerca següents:

• Distingeix entre majúscules i minúscules retorna els termes de cerca que coincideixen en majúscules i minúscules. Per exemple, si introdueixes product, la cerca ressalta les instàncies de "product" o "Product". Si selecciones Distingeix entre majúscules i minúscules, la cerca només ressalta les instàncies de product.
• Fes coincidir paraules senceres retorna els termes de cerca que coincideixen amb la paraula exacta i exclou les coincidències parcials. Per exemple, si introdueixes cart, la cerca ressalta les instàncies de "cart", però no pas les de "carton".
• Utilitza l'expressió regular retorna els resultats de cerca que coincideixen amb una expressió regular (regex). Una regex és una cadena de caràcters que especifica un patró de coincidència al text.

Precaució

L'ús d'una regex és una tècnica de personalització avançada. Pots utilitzar una eina de tercers, com ara regex101 o RegExr, per obtenir orientació sobre com crear una cadena de regex.

Al tauler Cerca, també pots seleccionar els fitxers i les carpetes que vols incloure o excloure dels resultats de cerca.

Fes clic a per obrir el menú avançat. Pots introduir qualsevol camí de fitxer o de carpeta als camps fitxers a incloure o fitxers a excloure. Per afegir més d'un fitxer o carpeta, separa'ls amb una coma i un espai. Per exemple, per cercar fitxers a la carpeta sections, introdueix ./sections al camp fitxers a incloure.

També pots fer cerques dins d'una carpeta específica des de la visualització del directori de fitxers. Fes clic amb el botó dret a una carpeta i, a continuació, selecciona Cerca a la carpeta... al menú desplegable.

Gestió dels fitxers del tema

Pots gestionar fitxers al codi del teu tema. Pots suprimir fitxers, afegir-ne de nous, canviar-ne el nom i restaurar fitxers de codi ja existents modificats des de la visualització Cronologia quan hi hagi una versió anterior disponible. Els fitxers d'actius com ara imatges, CSS, JavaScript i tipus de lletra de la carpeta assets no tenen historial a la cronologia.

Obrir un fitxer del tema

Per obrir un fitxer del tema, fes clic a una carpeta i, tot seguit, fes clic al nom del fitxer a l'explorador. També pots cercar fitxers pel nom o per l'extensió de fitxer, i després obrir-los.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Prem ⌘ + P al Mac o Ctrl + P al Windows.

4. Introdueix el nom del fitxer a la barra de cerca i selecciona'l, o bé tria un fitxer de la llista Oberts recentment.

Afegir un fitxer de tema nou

Per afegir un fitxer, selecciona una carpeta, fes clic a la icona Fitxer nou i introdueix-ne el nom i l'extensió de fitxer.

Els noms de fitxer poden incloure els caràcters de l'A a la Z i els números del 0 al 9, però no poden contenir espais. Separa les paraules amb guions normals o baixos. L'extensió de fitxer es defineix amb un punt . seguit del tipus d'extensió. Per exemple, .liquid o .css.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Fes clic a la carpeta on vulguis afegir un fitxer nou.

4. Fes clic amb el botó dret al nom de la carpeta i selecciona Fitxer nou... al menú desplegable.

5. Introdueix un nom nou per al fitxer.

6. Prem la tecla Enter al teu teclat.

Carregar un actiu nou

Pots carregar un actiu nou, com ara una icona o un fitxer d'imatge, a la carpeta assets de l'editor de codi.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Fes clic amb el botó dret a la carpeta assets.

4. Fes clic a Carrega....

5. Selecciona el fitxer que vulguis carregar.

6. Fes clic a Obre.

Canviar el nom d'un fitxer de tema

Pots fer clic amb el botó dret a un fitxer per canviar-ne el nom. Assegura't de no editar ni eliminar l'extensió de fitxer. L'extensió de fitxer es defineix amb un punt . i el tipus d'extensió. Per exemple, .liquid o .css. Els noms de fitxer poden incloure els caràcters de l'A a la Z i els números del 0 al 9, però no poden contenir espais. Separa les paraules amb guions normals o baixos. Si el nom de fitxer no és vàlid, el nou nom no es desarà.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Fes clic amb el botó dret en un fitxer i selecciona Canvia el nom... al menú desplegable.

4. Introdueix un nom nou per al fitxer.

5. Prem la tecla Enter al teu teclat.

Suprimir un fitxer de tema

Precaució

Si suprimeixes un fitxer de tema, aquest es podria fer malbé. Abans de suprimir qualsevol fitxer, assegura't de fer un duplicat del teu tema.

Pots suprimir qualsevol fitxer del teu tema. Els fitxers de tema suprimits no es poden recuperar.

Passos:

1. Des del panell d'administració de Shopify, ves a Botiga en línia.

2. Fes clic a > Edita el codi.

3. Fes clic amb el botó dret en un fitxer i selecciona Suprimeix permanentment al menú desplegable.

4. Fes clic a Suprimeix.