Redigering af temakode

Vigtigt

Hvis de ændringer, du har foretaget i et temas kode, er inkompatible med en temaopdatering, fjernes alle dine kodeændringer i den opdaterede kopi. Du bør kun redigere din temakode, hvis du ikke kan foretage de nødvendige ændringer ved hjælp af en Shopify-app eller temaeditoren.

Du kan redigere din temakode for at foretage detaljerede ændringer i din webshop ved hjælp af kodeeditoren. De fleste filer, som et tema består af, indeholder Liquid, der er Shopifys skabelonsprog. Temafiler indeholder også HTML, CSS, JSON og JavaScript. Du bør kun redigere et temas kode, hvis du har kendskab til HTML og CSS og har en grundlæggende forståelse af Liquid.

Du kan først redigere et temas kode, når du har købt det. Dette omfatter brug af AI-kodegeneratoren i temaeditoren. Hvis du bruger en prøveversion af et betalt tema, skal du købe det, før du kan foretage kodeændringer.

Få din virksomhed til at vokse

Hvis du vil tilføje tilpassede funktioner eller kode, men ikke har erfaring med at udvikle websites med HTML, CSS og JavaScript, kan du overveje at hyre en Shopify Partner.

Vigtigt

Som forberedelse til tilpasning af dit tema bør du udføre følgende anbefalede opgaver:

• Dupliker dit tema for at oprette en sikkerhedskopi. På den måde kan du nemt kassere dine ændringer og starte forfra, hvis det bliver nødvendigt.
• Sørg for, at du forstår, hvilket supportniveau der er tilgængeligt.
• Få mere at vide om kravene og de bedste fremgangsmåder for upload af billeder.

Kodeeditoren viser en mappe med dit temas filer og et område, hvor du kan få vist og redigere filerne. Når du klikker på en fil i mappen, åbnes den i kodeeditoren. Du kan åbne og redigere flere filer på samme tid. Du kan også åbne og gennemse flere filer på samme tid.

Rediger din temakode

Du kan bruge kodeeditoren til at redigere dit temas filer.

Trin:

Computer

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

Mobil

1. Gå til Shopify app, og tryk på ikonet .

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Tryk på > Rediger kode.

Gemme ændringer

Når du redigerer en fil, vises der en prik ud for fanens navn for at angive, at der er ugemte ændringer. Klik på knappen Gem for at gemme dine ændringer. Du kan også trykke på ⌘ + S på Mac eller Ctrl + S på Windows for at gemme dine ændringer.

Formatering af temakode

Du kan rette kodens indrykning ved at åbne kommandopaletten med ⌘ + Shift + P på Mac eller Ctrl + Shift + P på Windows, skrive format og derefter vælge Formatér dokument.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Åbn den fil, du vil formatere.

4. Tryk på ⌘ + P på Mac eller Ctrl + P på Windows.

5. Skriv format i kommandopaletten, og tryk derefter på Enter på dit tastatur.

6. Gem filen.

Sporing af filændringer

Brug visningen Tidslinje for filen, hvis du vil gendanne en tidligere version af en ændret temafil.

Visningen Tidslinje gendanner én eksisterende fil ad gangen. Den gendanner ikke et helt tema, og den kan ikke gendanne slettede temafiler. Tidslinjens historik er begrænset, så ældre versioner er muligvis ikke tilgængelige.

Gendannelsen erstatter hele filens indhold, herunder eventuelle ændringer, du vil beholde. Inden du gendanner en fil, skal du kopiere filens nuværende indhold til et sikkert sted, hvis der er ændringer, du gerne vil beholde.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Åbn den eksisterende fil, du vil gennemgå eller gendanne.

4. Valgfrit: Hvis der er aktuelle ændringer, du vil beholde, skal du kopiere filens nuværende indhold til et sikkert sted inden gendannelsen.

5. Klik på en post på tidslinjen i visningen Tidslinje for at sammenligne forskellene.

6. Hvis du vil erstatte hele filens indhold med den valgte tidligere version, skal du højreklikke på posten på tidslinjen og derefter vælge Gendan indhold.

7. Klik på Gendan.

Theme Check

Kodeeditoren indeholder Theme Check, en funktion, der hjælper med at forhindre fejl ved at give øjeblikkelig feedback, mens koden skrives, i stedet for at du opdager fejl i dit anvendte tema.

I kodeeditoren kan Theme Check identificere følgende fejl i redigeret kode:

• Parserblokerende scripts, som kan gøre et butikslayout langsommere
• Uoverensstemmelser mellem oversættelsesfiler, f.eks. manglende oversættelsesnøgler eller oversættelser, der ikke stemmer overens i en fil til landestandard
• Manglende skabeloner

Fejl markeres med en rød streg under koden. Du kan se fejlen ved at holde musen over den markerede linje.

Søg og erstat i kodeeditoren

Du kan søge i kodeeditoren på en af følgende måder:

• Søg i koden i en bestemt fil.
• Søg i koden i alle filer i temaet.

Du kan også erstatte kode i en bestemt fil eller flere forekomster på tværs af alle temafiler. Du kan også søge efter en fil efter navn for at open a file.

Søgning i en fil

Du kan søge i koden i en bestemt fil og erstatte koden. Brug piletasterne til at gennemgå hver forekomst af koden.

Når du har søgt efter kode, kan du erstatte koden i en fil.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Åbn den fil, du vil søge i.

4. Tryk på ⌘ + F på en Mac eller Ctrl + F på Windows.

5. Indtast dit søgeord i feltet Søg.

6. Valgfrit: Udfør følgende handlinger for at erstatte kode:

• Klik på ikonet i søgedialogboksen.
• Indtast erstatningskoden i feltet Erstat. Du kan klikke på Bevar store/små bogstaver for at matche erstatningskodens brug af store og små bogstaver med den eksisterende forekomst.
• Klik på ikonet Erstat for at erstatte én forekomst ad gangen, eller klik på ikonet Erstat alle for at erstatte alle forekomster på én gang.

Søgning på tværs af alle filer

Klik på søgeknappen i det venstre sidepanel for at søge på tværs af alle temafiler. Resultaterne viser alle forekomster af dit søgeord, og hvilken fil de vises i.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Klik på ikonet for at åbne søgepanelet.

4. Indtast dit søgeord i feltet Søg.

5. Valgfrit: Udfør følgende handlinger for at erstatte kode:

• Klik på ikonet i søgedialogboksen.
• Indtast erstatningskoden i feltet Erstat.
• Erstat én forekomst ad gangen eller alle forekomster på én gang.

Avancerede søgeindstillinger

Brug en eller flere af følgende søgeindstillinger for at indsnævre dine søgeresultater:

• Forskel på store og små bogstaver finder søgeord, der matcher brugen af store og små bogstaver. Hvis du f.eks. indtaster produkt, fremhæver søgningen alle forekomster af “produkt” eller “Produkt”. Hvis du vælger Forskel på store og små bogstaver, fremhæver søgningen kun forekomster af produkt.
• Match kun hele ord finder søgeord, der matcher det præcise ord, og udelukker delvise match. Hvis du f.eks. indtaster ord, fremhæver søgningen forekomster af “ord”, men ikke “ordre”.
• Brug regulært udtryk finder søgeresultater, der matcher et regulært udtryk (regex). En regex er en streng af tegn, der angiver et matchmønster i tekst.

Vigtigt

Brug af regex er en avanceret tilpasningsteknik. Du kan bruge et tredjepartsværktøj som regex101 eller RegExr som hjælp til at opbygge en regex-streng.

I panelet Søg kan du også vælge filer og mapper, der skal medtages eller udelades fra søgeresultaterne.

Klik på for at åbne den avancerede menu. Du kan angive en fil- eller mappesti i felterne filer, der skal medtages eller filer, der skal udelades. Hvis du vil tilføje mere end én fil eller mappe, skal du adskille dem med et mellemrum og et komma. Hvis du f.eks. vil søge efter filer i mappen sections, skal du angive ./sections i feltet filer, der skal medtages.

Du kan også søge i en bestemt mappe fra filoversigten. Højreklik på en mappe, og vælg derefter Find i mappe... i rullemenuen.

Administration af temafiler

Du kan administrere filer i din temakode. Du kan slette filer, tilføje nye filer, omdøbe filer og gendanne ændrede, eksisterende kodefiler fra visningen Tidslinje, når der findes en tidligere version. Aktivfiler, såsom billeder, CSS, JavaScript og skrifttyper i mappen assets, har ingen Tidslinje-historik.

Åbning af en temafil

Hvis du vil åbne en temafil, skal du klikke på en mappe og derefter klikke på filnavnet i stifinderen. Du kan også søge efter filer efter navn eller filtype og derefter åbne filen.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Tryk på ⌘ + P på Mac eller Ctrl + P på Windows.

4. Indtast filnavnet i søgefeltet, og vælg filen, eller vælg en fil fra listen Senest åbnede.

Tilføjelse af en ny temafil

Hvis du vil tilføje en fil, skal du vælge en mappe, klikke på ikonet Ny fil og derefter angive filnavnet og filtypen.

Filnavne kan indeholde tegnene A-Z, 0-9 og må ikke indeholde mellemrum. Adskil ord med bindestreger eller understregninger. En filtype defineres af et punktum . og filtypen. F.eks. .liquid eller .css.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Klik på den mappe, du vil føje en ny fil til.

4. Højreklik på mappenavnet, og vælg Ny fil... i rullemenuen.

5. Angiv et nyt navn til filen.

6. Tryk på Enter på dit tastatur.

Upload af et nyt aktiv

Du kan uploade et nyt aktiv, f.eks. en ikon- eller billedfil, til mappen assets i kodeeditoren.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Højreklik på mappen assets.

4. Klik på Upload....

5. Vælg den fil, du vil uploade.

6. Klik på Åbn.

Omdøbning af en temafil

Du kan højreklikke på en fil for at omdøbe den. Sørg for ikke at redigere eller fjerne filtypen. En filtype defineres af et punktum . efterfulgt af en typebetegnelse, f.eks. .liquid eller .css. Filnavne kan indeholde bogstaverne A-Z, tallene 0-9 og må ikke indeholde mellemrum. Adskil ord med bindestreger eller understregninger. Hvis filnavnet ikke er gyldigt, gemmes det nye filnavn ikke.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Højreklik på en fil, og vælg Omdøb ... i rullemenuen.

4. Angiv et nyt navn til filen.

5. Tryk på Enter på dit tastatur.

Sletning af en temafil

Vigtigt

Hvis du sletter en temafil, kan det ødelægge dit tema. Inden du sletter en fil, skal du sørge for at lave en kopi af dit tema.

Du kan slette alle filer i dit tema. Slettede temafiler kan ikke gendannes.

Trin:

1. Gå til Webshop > Temaer fra din Shopify-administrator.

2. Klik på > Rediger kode.

3. Højreklik på en fil, og vælg Slet permanent i rullemenuen.

4. Klik på Slet.