Themacode bewerken

Let op

Als de wijzigingen die je in de code van een thema hebt aangebracht niet compatibel zijn met een thema-update, worden al je codewijzigingen verwijderd in de bijgewerkte kopie. Je kunt de code van je thema het beste alleen bewerken als je de benodigde wijzigingen niet kunt aanbrengen met een Shopify-app of de themabewerker.

Je kunt de themacode bewerken om gedetailleerde wijzigingen in je webshop aan te brengen met de code-editor. De meeste bestanden waaruit een thema bestaat, bevatten Liquid, de templatetaal van Shopify. Themabestanden bevatten ook HTML, CSS, JSON en JavaScript. Bewerk de code van een thema alleen als je bekend bent met HTML en CSS en een basiskennis van Liquid hebt.

Je kunt de code van je thema pas bewerken nadat je het hebt gekocht. Dit omvat het gebruik van de AI-codegenerator in de themabewerker. Als je een proefversie van een betaald thema gebruikt, moet je het thema kopen voordat je codewijzigingen kunt aanbrengen.

Laat je bedrijf groeien

Als je aangepaste functies of code wilt toevoegen, maar geen ervaring hebt met het ontwikkelen van websites met HTML, CSS en JavaScript, kun je overwegen een Shopify Partner in te huren.

Let op

Voer de volgende aanbevolen taken uit om je voor te bereiden op het aanpassen van je thema:

• Dupliceer je thema om een back-up te maken. Zo kun je je wijzigingen eenvoudig verwerpen en opnieuw beginnen als dat nodig is.
• Zorg ervoor dat je begrijpt welk ondersteuningsniveau beschikbaar is.
• Lees meer over de vereisten en best practices voor het uploaden van afbeeldingen.

De code-editor geeft een directory van je themabestanden weer en een ruimte om de bestanden weer te geven en te bewerken. Wanneer je op een bestand in de directory klikt, wordt het geopend in de code-editor. Je kunt meerdere bestanden tegelijk openen en bewerken. Je kunt ook meerdere bestanden tegelijk openen en bekijken.

Je themacode bewerken

Je kunt de code-editor gebruiken om de bestanden van je thema aan te passen.

Stappen:

Desktop

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

Mobiel

1. Tik in de Shopify-app op het pictogram .

2. Tik in de sectie Verkoopkanalen op Webshop.

3. Tik op Thema's beheren.

4. Tik op > Code bewerken.

Wijzigingen opslaan

Wanneer je een bestand bewerkt, verschijnt er een stip naast de naam van het tabblad om aan te geven dat er niet-opgeslagen wijzigingen zijn. Klik op de knop Opslaan om je wijzigingen op te slaan. Je kunt ook ⌘ + S op een Mac of Ctrl + S op Windows gebruiken om je wijzigingen op te slaan.

Themacode opmaken

Om de inspringing van de code te corrigeren, open je het opdrachtenpalet met ⌘ + Shift + P op een Mac of Ctrl + Shift + P op Windows, format, en selecteer je vervolgens Document opmaken.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Open het bestand dat je wilt opmaken.

4. Voer ⌘ + P in op een Mac of Ctrl + P op Windows.

5. Voer in het opdrachtenpalet format in en druk vervolgens op Enter op je toetsenbord.

6. Sla het bestand op.

Wijzigingen in bestanden bijhouden

Gebruik de weergave Tijdlijn voor dat bestand om een gewijzigd themabestand naar een eerdere versie te herstellen.

In de weergave Tijdlijn kun je één bestaand bestand per keer herstellen. Je kunt er geen compleet thema mee herstellen en verwijderde themabestanden niet mee terughalen. De tijdlijngeschiedenis is beperkt, waardoor oudere versies mogelijk niet meer beschikbaar zijn.

Door te herstellen vervang je de volledige bestandsinhoud, inclusief wijzigingen die je misschien wilt behouden. Als je eventuele wijzigingen wilt behouden, kopieer je de huidige bestandsinhoud naar een veilige locatie voordat je het bestand herstelt.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Open het bestaande bestand dat je wilt bekijken of herstellen.

4. Optioneel: als je eventuele huidige wijzigingen wilt behouden, kopieer je de huidige bestandsinhoud naar een veilige locatie voordat je deze herstelt.

5. Klik in de weergave Tijdlijn op een vermelding in de tijdlijn om de verschillen te vergelijken.

6. Als je de volledige bestandsinhoud wilt vervangen door de geselecteerde eerdere versie, klik je met de rechtermuisknop op de vermelding in de tijdlijn en selecteer je Inhoud herstellen.

7. Klik op Herstellen.

Theme Check

De code-editor bevat Theme Check, een functie die fouten helpt voorkomen door onmiddellijk feedback te geven terwijl de code wordt geschreven, in plaats van dat je fouten pas in je huidige thema ontdekt.

In de code-editor kan Theme Check de volgende fouten in bewerkte code identificeren:

• Parser-blokkerende scripts, die een webshop kunnen vertragen
• Inconsistenties tussen vertaalbestanden, zoals ontbrekende vertaalsleutels of vertalingen die niet overeenkomen in een bestand met landinstellingen
• Ontbrekende templates

Fouten worden aangegeven met een rode lijn onder de code. Houd je muis boven de gemarkeerde regel om de fout te bekijken.

Zoeken en vervangen in de code-editor

Je kunt op een van de volgende manieren in de code-editor zoeken:

• Zoeken in de code van een specifiek bestand.
• Zoeken in de code van alle bestanden in het thema.

Je kunt ook code vervangen in een specifiek bestand of meerdere keren in alle themabestanden. Je kunt ook op bestandsnaam zoeken om een bestand te openen.

In een bestand zoeken

Je kunt de code in een specifiek bestand doorzoeken en de code vervangen. Gebruik de pijltoetsen om elke vermelding van de code te bekijken.

Nadat je naar code hebt gezocht, kun je de code in een bestand vervangen.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Open het bestand waarin je wilt zoeken.

4. Voer ⌘ + F in op een Mac of Ctrl + F op Windows.

5. Voer in het veld Zoeken je zoekterm in.

6. Optioneel: voer de volgende acties uit om code te vervangen:

• Klik in het zoekvenster op het pictogram .
• Voer in het veld Vervangen de vervangende code in. Je kunt op Hoofdlettergebruik behouden klikken om het hoofdlettergebruik van de vervangende code af te stemmen op de bestaande vermelding.
• Klik op het pictogram Vervangen om één vermelding tegelijk te vervangen of klik op het pictogram Alles vervangen om alle vermeldingen in één keer te vervangen.

In alle bestanden zoeken

Klik op de zoekknop in de linkerzijbalk om in alle themabestanden te zoeken. De resultaten tonen elke vermelding van je zoekterm en in welk bestand deze voorkomt.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Klik op het pictogram om het zoekpaneel te openen.

4. Voer in het veld Zoeken je zoekterm in.

5. Optioneel: voer de volgende acties uit om code te vervangen:

• Klik in het zoekvenster op het pictogram .
• Voer in het veld Vervangen de vervangende code in.
• Vervang één vermelding tegelijk, of alle vermeldingen in één keer.

Geavanceerde zoekopties

Gebruik een of meer van de volgende zoekopties om je zoekresultaten te verfijnen:

• Identieke hoofd-/kleine letters geeft zoektermen als resultaat die qua hoofdlettergebruik overeenkomen. Als je bijvoorbeeld product invoert, markeert de zoekopdracht alle vermeldingen van ‘product’ of ‘Product’. Als je Identieke hoofd-/kleine letters selecteert, markeert de zoekopdracht alleen vermeldingen van product.
• Hele woord zoeken geeft zoektermen als resultaat die exact overeenkomen met het woord, en sluit gedeeltelijke overeenkomsten uit. Als je bijvoorbeeld cart invoert, markeert de zoekopdracht vermeldingen van ‘cart’, maar niet van ‘carton’.
• Reguliere expressie gebruiken geeft zoekresultaten die overeenkomen met een reguliere expressie (regex). Een regex is een tekenreeks die een zoekpatroon in tekst specificeert.

Let op

Het gebruik van regex is een geavanceerde aanpassingstechniek. Je kunt een tool van een externe partij gebruiken, zoals regex101 of RegExr, voor hulp bij het maken van een regex-tekenreeks.

In het zoekpaneel kun je ook bestanden en mappen selecteren die je wilt opnemen in of uitsluiten van de zoekresultaten.

Klik op om het geavanceerde menu te openen. Je kunt een bestands- of mappad invoeren in de velden op te nemen bestanden of uit te sluiten bestanden. Voeg meerdere bestanden of mappen toe door ze te scheiden met een spatie en een komma. Als je bijvoorbeeld wilt zoeken naar bestanden in de map sections, voer dan ./sections in het veld op te nemen bestanden in.

Je kunt ook in een specifieke map zoeken vanuit de bestandsmapweergave. Klik met de rechtermuisknop op een map en selecteer Zoeken in map... in de vervolgkeuzelijst.

Themabestanden beheren

Je kunt bestanden in je themacode beheren. Je kunt bestanden verwijderen, nieuwe bestanden toevoegen, bestanden hernoemen en gewijzigde bestaande codebestanden herstellen vanuit de weergave Tijdlijn wanneer er een eerdere versie beschikbaar is. Assetbestanden, zoals afbeeldingen, CSS, JavaScript en lettertypen in de map assets, hebben geen Tijdlijn-geschiedenis.

Een themabestand openen

Klik op een map en vervolgens op de bestandsnaam in de verkenner om een themabestand te openen. Je kunt ook zoeken naar bestanden op naam of extensie en het bestand vervolgens openen.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Voer ⌘ + P in op een Mac of Ctrl + P op Windows.

4. Voer de bestandsnaam in de zoekbalk in en selecteer het bestand, of selecteer een bestand in de lijst Recent geopend.

Een nieuw themabestand toevoegen

Als je een bestand wilt toevoegen, selecteer je een map, klik je op het pictogram Nieuw bestand en voer je de bestandsnaam en bestandsextensie in.

Bestandsnamen kunnen de tekens A-Z en 0-9 bevatten, maar geen spaties. Scheid woorden met koppeltekens of underscores. Een bestandsextensie wordt gedefinieerd door een punt . en het extensietype. Bijvoorbeeld .liquid of .css.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Klik op de map waaraan je een nieuw bestand wilt toevoegen.

4. Klik met de rechtermuisknop op de mapnaam en selecteer Nieuw bestand... in de vervolgkeuzelijst.

5. Voer een nieuwe naam in voor het bestand.

6. Druk op Enter op je toetsenbord.

Een nieuwe asset uploaden

Je kunt een nieuwe asset, zoals een pictogram of een afbeeldingsbestand, uploaden naar de map assets van de code-editor.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Klik met de rechtermuisknop op de map assets.

4. Klik op Uploaden....

5. Selecteer het bestand dat je wilt uploaden.

6. Klik op Openen.

De naam van een themabestand wijzigen

Je kunt met de rechtermuisknop op een bestand klikken om het een andere naam te geven. Zorg ervoor dat je de bestandsextensie niet bewerkt of verwijdert. Een bestandsextensie wordt gedefinieerd door een punt . en het extensietype. Bijvoorbeeld .liquid of .css. Bestandsnamen kunnen de tekens A-Z en 0-9 bevatten en mogen geen spaties bevatten. Scheid woorden met streepjes of underscores. Als de bestandsnaam ongeldig is, wordt de nieuwe bestandsnaam niet opgeslagen.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Klik met de rechtermuisknop op een bestand en selecteer Naam wijzigen... in de vervolgkeuzelijst.

4. Voer een nieuwe naam in voor het bestand.

5. Druk op Enter op je toetsenbord.

Een themabestand verwijderen

Let op

Het verwijderen van een themabestand kan je thema beschadigen. Voordat je een bestand verwijdert, moet je een kopie van je thema maken.

Je kunt alle bestanden in je thema verwijderen. Verwijderde themabestanden kunnen niet worden hersteld.

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Webshop > Thema's.

2. Klik op > Code bewerken.

3. Klik met de rechtermuisknop op een bestand en selecteer Definitief verwijderen in de vervolgkeuzelijst.

4. Klik op Verwijderen.