Themacode bewerken

Let op

Als je wijzigingen hebt aangebracht aan de code van een thema die niet compatibel zijn met een update, worden alle wijzigingen verwijderd in de geüpdatete kopie. Bewerk de themacode alleen als je de benodigde wijzigingen niet kunt aanbrengen met een Shopify-app of met de themabewerker.

Je kunt je themacode bewerken om gedetailleerde wijzigingen aan je webshop aan te brengen. De meeste bestanden die deel uitmaken van een thema bevatten Liquid, de templatetaal van Shopify. Themabestanden bevatten ook HTML, CSS, JSON en JavaScript. Bewerk de code voor een thema alleen als je HTML en CSS kent en een basiskennis hebt van Liquid.

Je bedrijf laten groeien

Als je aangepaste functies of code wilt toevoegen, maar geen ervaring hebt met het ontwikkelen van websites met HTML, CSS en JavaScript, overweeg dan om een Shopify-partner in te huren.

Voordat je het thema aanpast

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

• Dupliceer je thema om een back-up te maken. Dit maakt het eenvoudig om je wijzigingen te annuleren en opnieuw te beginnen als dat nodig is.
• Zorg ervoor dat je weet welk ondersteuningsniveau beschikbaar is.
• Leer alles over de vereisten en best practices voor het uploaden van afbeeldingen.

De themacode bewerken

Je kunt de code voor je thema bewerken.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Klik op ... > Code bewerken.

iPhone

1. Tik in de Shopify-app op de knop ….
2. Tik in het gedeelte Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Klik op ... > Code bewerken.

Android

1. Tik in de Shopify-app op de knop ….
2. Tik in het gedeelte Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Klik op ... > Code bewerken.

De code-editor toont een map met themabestanden aan de linkerkant en een ruimte om de bestanden te bekijken en te bewerken aan de rechterkant.

Wanneer je op een bestand in de map aan de linkerkant klikt, wordt dit in de code-editor geopend. Je kunt meerdere bestanden tegelijk openen en bewerken. Alle bestanden die je wijzigt, hebben een stip naast de bestandsnaam:

Dit kan je helpen bij te houden waar je wijzigingen hebt aangebracht.

Teruggaan naar een oudere versie van je thema

Als je themabestanden hebt gewijzigd en deze moet terugdraaien, kun je .liquid-bestanden afzonderlijk terugdraaien naar een tijd en datum voordat je de wijzigingen hebt aangebracht.

Opmerking

Voor bestanden die zich bevinden in de map Activa in de codebewerker, inclusief de bestanden theme.scss.liquid en theme.js, worden eerder bewerkte versies niet opgeslagen. Als je wijzigingen wilt aanbrengen in bestanden in de map Activa, is het mogelijk nodig dat je contact opneemt met thema-ondersteuning of een Shopify-partner inhuurt.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
3. Klik onder de koptekst Templates op een van de .liquid-bestanden die je onlangs hebt bewerkt.
4. Klik op Huidige versie onder de .liquid-bestandsnaam.
5. Klik op de vervolgkeuzelijst om een oudere versie te selecteren. Als je op een datumstempel klikt, wordt de code teruggedraaid naar die opgeslagen versie.
6. Optioneel: Klik op Voorbeeld van winkel om te verifiëren of de fout is opgelost.

iPhone

1. Tik in de Shopify-app op de knop ….
2. Tik in het gedeelte Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
5. Klik onder de koptekst Templates op een van de .liquid-bestanden die je onlangs hebt bewerkt.
6. Klik op Huidige versie onder de .liquid-bestandsnaam.
7. Klik op de vervolgkeuzelijst om een oudere versie te selecteren. Als je op een datumstempel klikt, wordt de code teruggedraaid naar die opgeslagen versie.
8. Optioneel: Klik op Voorbeeld van winkel om te verifiëren of de fout is opgelost.

Android

1. Tik in de Shopify-app op de knop ….
2. Tik in het gedeelte Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
5. Klik onder de koptekst Templates op een van de .liquid-bestanden die je onlangs hebt bewerkt.
6. Klik op Huidige versie onder de .liquid-bestandsnaam.
7. Klik op de vervolgkeuzelijst om een oudere versie te selecteren. Als je op een datumstempel klikt, wordt de code teruggedraaid naar die opgeslagen versie.
8. Optioneel: Klik op Voorbeeld van winkel om te verifiëren of de fout is opgelost.

Theme Check

De code-editor bevat Theme Check, een functie die je helpt fouten te voorkomen door onmiddellijk feedback te geven als je de code schrijft en niet pas fouten te ontdekken als je thema live is.

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

• een parser die scripts blokkeert, waardoor een webshop trager wordt;
• tegenstrijdigheden tussen vertaalbestanden, zoals ontbrekende vertaalsleutels of vertalingen die niet overeenkomen in een bestand met landinstellingen;
• ontbrekende templates.

Fouten worden aangeduid met een rode streep onder de code. Beweeg je muis over de rode onderstreping als je de fout wilt bekijken.

Tutorials voor het aanpassen van themacode

Met de tutorials voor het aanpassen van themacode leer je hoe je wijzigingen in je webshop aanbrengt. De tutorials zijn geordend op basis van het type pagina of functie dat wordt gewijzigd.

Tutorials voor het aanpassen van thema's worden gedeeld door de versie van thema-architectuur die ze gebruiken. Ontdek hoe je je versie van je thema-architectuur kunt identificeren.

• Online Store 2.0-thema aanpassen
• Aanpassingen van vintage thema

Hulp bij aanpassingen

Als je hulp nodig hebt bij het wijzigen van je thema, kun je contact opnemen met de ontwikkelaar van je thema voor ondersteuning.

Zie Aanvullende bronnen voor ondersteuning van thema's om te zien welke andere bronnen beschikbaar zijn om je te helpen bij het aanpassen van thema's.