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 sjabloontaal 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 de sectie 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 de sectie 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 dit moet terugdraaien, kun je .liquid- en .json-bestanden afzonderlijk terugzetten naar een tijd en datum voordat je de wijzigingen hebt aangebracht.

Je kunt themabestanden in elke map in de directory terugzetten, met uitzondering van bestanden in de map assets. Bestanden in de map assets , waaronder de bestanden theme.scss.liquid en theme.js , slaan geen eerder bewerkte versies op. Als je wijzigingen aanbrengt in bestanden in de map assets , moet je mogelijk contact opnemen met Thema ondersteuning of een Shopify Partner inhuren.

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 in de map met themabestanden op een van de .liquid of .json bestanden die je onlangs hebt bewerkt.
4. Klik boven in de code-editor op Huidig.
5. Gebruik de vervolgkeuzelijst om een oudere versie te selecteren. Als je een datumstempel selecteert, wordt de code teruggedraaid naar die opgeslagen versie.
6. Optioneel: Klik op Voorbeeld van winkel om te verifiëren of de fout is opgelost.
7. Om terug te keren naar de oudere versie, klik je op Opslaan.

iPhone

1. Tik in de Shopify-app op de knop ….
2. Tik in de sectie Verkoopkanalen op webshop.
3. Tik op Alle thema's beheren.
4. Zoek het thema dat je wil bewerken, tik op de knop … om het actiemenu te openen en tik dan op Code bewerken.
5. Tik in de map met themabestanden op een van de .liquid- of .json-bestanden die je recent bewerkt hebt.
6. Tik boven in de code-editor op Huidig.
7. Gebruik de vervolgkeuzelijst om een oudere versie te selecteren. Als je een datumstempel selecteert, wordt de code teruggedraaid naar die opgeslagen versie.
8. Optioneel: tik op Voorbeeld van winkel om te verifiëren of de fout is opgelost.
9. Tik vervolgens op Opslaan om terug te gaan naar de oudere versie.

Android

1. Tik in de Shopify-app op de knop ☰.
2. Tik in de sectie Verkoopkanalen op webshop.
3. Tik op Thema's beheren.
4. Zoek het thema dat je wil bewerken, tik op de knop … om het actiemenu te openen en tik vervolgens op Code bewerken.
5. Tik in de map met themabestanden op een van de .liquid- of .json-bestanden die je recent bewerkt hebt.
6. Tik boven in de code-editor op Huidig.
7. Gebruik de vervolgkeuzelijst om een oudere versie te selecteren. Als je een datumstempel selecteert, wordt de code teruggedraaid naar die opgeslagen versie.
8. Optioneel: tik op Voorbeeld van winkel om te verifiëren of de fout is opgelost.
9. Tik vervolgens op Opslaan om terug te gaan naar de oudere versie.

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 maken van wijzigingen in 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.