Redigere temakode

Forsiktig

Hvis endringer du har gjort i et temas kode er inkompatible med en temaoppdatering, fjernes alle kodeendringene i den oppdaterte kopien. Du bør bare redigere temakoden hvis du ikke kan gjøre de nødvendige endringene med en Shopify-app eller ved hjelp av temaredigeringsprogrammet.

Du kan redigere temakoden for å gjøre detaljerte endringer i nettbutikken med koderedigeringsprogrammet. De fleste filene som utgjør et tema inneholder Liquid, Shopifys malspråk. Temafiler inneholder også HTML, CSS, JSON og JavaScript. Rediger koden for et tema bare hvis du kan HTML og CSS, og har en grunnleggende forståelse av Liquid.

Du kan bare redigere koden for et tema etter at du har kjøpt det. Dette inkluderer bruk av kodegeneratoren med kunstig intelligens i temaredigeringsprogrammet. Hvis du bruker en prøveversjon av et betalt tema, må du kjøpe det før du kan gjøre kodeendringer.

Få bedriften til å vokse

Hvis du vil legge til egendefinerte funksjoner eller kode, men ikke har erfaring med å utvikle nettsteder med HTML, CSS og JavaScript, bør du vurdere å leie inn en Shopify-partner.

Forsiktig

Fullfør følgende anbefalte oppgaver for å forberede tilpasningen av temaet:

• Dupliser temaet for å opprette en sikkerhetskopi. Dette gjør det enkelt å forkaste endringene og starte på nytt hvis du må.
• Sørg for at du forstår hvilket støttenivå som er tilgjengelig.
• Lær om kravene og beste praksis for opplasting av bilder.

Koderedigeringsprogrammet viser en katalog med temafilene og et område for å vise og redigere filene. Når du klikker på en fil i katalogen, åpnes den i koderedigeringsprogrammet. Du kan åpne og redigere flere filer samtidig. Du kan også åpne og se gjennom flere filer samtidig.

Redigere temakoden

Du kan bruke koderedigeringsprogrammet til å endre temafilene.

Trinn:

Stasjonær datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

Mobil

1. Fra Shopify app, trykk på -ikonet.

2. I seksjonen Salgskanaler trykker du på Nettbutikk.

3. Trykk på Administrer temaer.

4. Trykk på > Rediger kode.

Lagre endringer

Når du redigerer en fil, vises en prikk ved siden av fanenavnet for å angi ulagrede endringer. Klikk på Lagre-knappen for å lagre endringene. Du kan også trykke ⌘ + S på Mac eller Ctrl + S på Windows for å lagre endringene.

Formatere temakode

For å fikse kodeinnrykk kan du åpne Kommandopaletten med ⌘ + Shift + P på Mac eller Ctrl + Shift + P på Windows, skrive format og deretter velge Formater dokument.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Åpne filen du vil formatere.

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

5. I kommandopaletten skriver du inn format, og trykker deretter på Enter på tastaturet.

6. Lagre filen.

Spore filendringer

For å gjenopprette en endret temafil til en tidligere versjon, bruker du Tidslinje-visningen for denne filen.

Tidslinje-visningen gjenoppretter én eksisterende fil om gangen. Den gjenoppretter ikke et helt tema, og den kan ikke gjenopprette slettede temafiler. Tidslinje-loggen er begrenset, så eldre versjoner er kanskje ikke tilgjengelige.

Gjenoppretting erstatter hele filinnholdet, inkludert endringer du kanskje vil beholde. Før du gjenoppretter en fil, bør du kopiere det gjeldende filinnholdet til et trygt sted hvis du vil beholde noen av endringene.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Åpne den eksisterende filen du vil se gjennom eller gjenopprette.

4. Valgfritt: Hvis du vil beholde gjeldende endringer, kopierer du det gjeldende filinnholdet til et trygt sted før du gjenoppretter.

5. I Tidslinje-visningen klikker du på en oppføring på tidslinjen for å sammenligne forskjellene.

6. For å erstatte hele filinnholdet med den valgte tidligere versjonen, høyreklikker du på tidslinjeoppføringen og velger Gjenopprett innhold.

7. Klikk på Gjenopprett.

Temasjekk

Kodeditor inneholder Theme Check, en funksjon som bidrar til å forhindre feil ved å gi umiddelbare tilbakemeldinger mens koden skrives, i stedet for å oppdage feil i live-temaet.

I kodeditor kan Theme Check identifisere følgende feil i redigert kode:

• Parserblokkerende skript, som kan gjøre utstillingsvinduet tregere
• Uoverensstemmelser mellom oversettelsesfiler, som manglende oversettelsesnøkler eller oversettelser som ikke stemmer overens i en nasjonal innstillingsfil
• Manglende maler

Feil markeres med en rød linje under koden. For å se feilen kan du holde musepekeren over den uthevede linjen.

Søke og erstatte i kodeditor

Du kan søke i kodeditor på en av følgende måter:

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

Du kan også erstatte kode i en bestemt fil eller flere forekomster på tvers av alle temafiler. Du kan også søke etter en fil etter navn for å åpne en fil.

Søke i en fil

Du kan søke i koden i en bestemt fil og erstatte koden. Bruk piltastene for å se gjennom hver forekomst av koden.

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

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Åpne filen du vil søke i.

4. Trykk på ⌘ + F på Mac eller Ctrl + F på Windows.

5. Skriv inn søkeordet i Søk-feltet.

6. Valgfritt: For å erstatte kode gjør du følgende:

• Klikk på -ikonet i søkemodalen.
• Skriv inn erstatningskoden i Erstatt-feltet. Du kan klikke på Bevar store/små bokstaver for å matche erstatningskodens bruk av store og små bokstaver med den eksisterende forekomsten.
• Klikk på Erstatt-ikonet for å erstatte én forekomst av gangen, eller klikk på Erstatt alle-ikonet for å erstatte alle forekomster samtidig.

Søke på tvers av alle filer

Klikk på søkeknappen i venstre sidefelt for å søke på tvers av alle temafiler. Resultatene viser hver forekomst av søkeordet og hvilken fil den vises i.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Klikk på -ikonet for å åpne søkepanelet.

4. Skriv inn søkeordet i Søk-feltet.

5. Valgfritt: For å erstatte kode gjør du følgende:

• Klikk på -ikonet i søkemodalen.
• Skriv inn erstatningskoden i Erstatt-feltet.
• Erstatt én forekomst av gangen, eller alle forekomster samtidig.

Avanserte søkealternativer

For å begrense søkeresultatene kan du bruke ett eller flere av følgende søkealternativer:

• Skill mellom store og små bokstaver returnerer søkeord som samsvarer med bruk av store og små bokstaver. Hvis du for eksempel skriver inn produkt, vil søket utheve alle forekomster av «produkt» eller «Produkt». Hvis du velger Skill mellom store og små bokstaver, vil søket bare utheve forekomster av produkt.
• Bare hele ord returnerer søkeord som samsvarer nøyaktig med ordet, og ekskluderer delvise treff. Hvis du for eksempel skriver inn handlekurv, vil søket utheve forekomster av «handlekurv», men ikke «kartong».
• Bruk regulære uttrykk returnerer søkeresultater som samsvarer med et regulært uttrykk (regex). Et regex er en streng med tegn som angir et samsvarsmønster i tekst.

Forsiktig

Bruk av regex er en avansert tilpasningsteknikk. Du kan bruke et tredjepartsverktøy som regex101 eller RegExr for veiledning om hvordan du bygger en regex-streng.

I Søk-panelet kan du også velge filer og mapper som skal inkluderes i eller ekskluderes fra søkeresultatene.

Klikk på for å åpne den avanserte menyen. Du kan angi en hvilken som helst fil- eller mappebane i feltene filer som skal inkluderes eller filer som skal ekskluderes. For å legge til mer enn én fil eller mappe skiller du dem med et mellomrom og et komma. For eksempel, for å søke etter filer i sections-mappen, skriver du inn ./sections i feltet filer som skal inkluderes.

Du kan også søke i en bestemt mappe fra filkatalogvisningen. Høyreklikk på en mappe, og velg deretter Finn i mappe… fra rullegardinmenyen.

Administrere temafiler

Du kan administrere filer i temakoden. Du kan slette filer, legge til nye filer, endre navn på filer, og gjenopprette endrede, eksisterende kodefiler fra tilhørende tidslinje-visning når en tidligere versjon er tilgjengelig. Ressursfiler, som bilder, CSS, JavaScript og skrifttyper i assets-mappen, har ikke tidslinjelogg.

Åpne en temafil

For å åpne en temafil, klikker du på en mappe og deretter på filnavnet i utforskeren. Du kan også søke etter filer etter navn eller filtype, og deretter åpne filen.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

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

4. Skriv inn filnavnet i søkefeltet og velg filen, eller velg en fil fra listen Nylig åpnet.

Legge til en ny temafil

For å legge til en fil velger du en mappe, klikker på Ny fil-ikonet, og skriver deretter inn filnavn og filtype.

Filnavn kan inneholde tegnene A–Z og 0–9, og kan ikke inneholde mellomrom. Skill ord med bindestreker eller understreker. En filtype defineres av et punktum . og filtypen. For eksempel .liquid eller .css.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Klikk på mappen du vil legge til en ny fil i.

4. Høyreklikk på mappenavnet og velg Ny fil… fra rullegardinmenyen.

5. Skriv inn et nytt navn for filen.

6. Trykk på Enter på tastaturet.

Laste opp en ny ressurs

Du kan laste opp en ny ressurs, som et ikon eller en bildefil, til assets-mappen i kodeditor.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Høyreklikk på assets-mappen.

4. Klikk på Last opp ….

5. Velg filen du vil laste opp.

6. Klikk på Åpne.

Gi nytt navn til en temafil

Du kan høyreklikke på en fil for å gi den nytt navn. Pass på at du ikke redigerer eller fjerner filtypen. En filtype er endelsen som kommer etter et punktum, for eksempel .liquid eller .css. Filnavn kan inneholde tegnene A–Z og 0–9, og kan ikke inneholde mellomrom. Skill ord fra hverandre med bindestreker eller understreker. Hvis filnavnet ikke er gyldig, lagres ikke det nye filnavnet.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Høyreklikk på en fil og velg Gi nytt navn ... fra rullegardinmenyen.

4. Skriv inn et nytt navn for filen.

5. Trykk på Enter på tastaturet.

Slette en temafil

Forsiktig

Sletting av en temafil kan ødelegge temaet ditt. Før du sletter en fil, må du sørge for å opprette en kopi av temaet ditt.

Du kan slette alle filer i temaet ditt. Slettede temafiler kan ikke gjenopprettes.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Klikk på > Rediger kode.

3. Høyreklikk på en fil og velg Slett permanent fra rullegardinmenyen.

4. Klikk på Slett.