Problemen oplossen met het thema van je webshop

Je thema kan om verschillende redenen niet zoals verwacht worden weergegeven, waardoor elementen verdwijnen of niet naar behoren werken. Ook kunnen er verschillende andere weergaveproblemen ontstaan. Dit kan komen doordat een externe code of app-code in strijd is met het thema of met aangepaste code-aanpassingen. Het kan ook zijn dat je instellingen in het Shopify-beheercentrum moet aanpassen. Zo kan het bijvoorbeeld nodig zijn om je vertaalde content, producten, collecties, menu's of je markten te controleren.

Als je nog steeds problemen hebt met je thema nadat je de stappen in deze handleiding hebt doorlopen, kan het zijn dat je contact op moet nemen met het ondersteuningsteam van je thema. Meer informatie over ondersteuning krijgen voor thema's.

Op deze pagina

De bron van het probleem identificeren

Dit is de eerste stap voor het identificeren van het probleem met je thema. Probeer de volgende stappen om de bron van het probleem te vinden:

Bezoek de Shopify-statuspagina voor bekende problemen die van invloed kunnen zijn op je webshop. Als er geen vergelijkbaar probleem wordt vermeld, kun je het probleem verder onderzoeken.
Het kan misschien een lokaal probleem op je apparaat zijn. Lokale problemen zijn meestal het gevolg van apparaat- of browserinstellingen of problemen met de internetverbinding. Probeer de volgende stappen om uit te sluiten dat het probleem lokaal is en kan worden gerepliceerd op andere apparaten, browsers of internetverbinding:
- Wis je browsercache en cookies. Als je met je Shopify-account bent aangemeld bij het Shopify-helpcentrum, worden je browsercache en cookies verwijderd uit je account. Als je de virtuele Helpcentrum-assistent gebruikt, wordt je chatgeschiedenis gereset als je je browsercache en cookies wist en word je afgemeld bij je account. Je moet dan een nieuwe chat starten met de virtuele Helpcentrum-assistent.
- Probeer de incognitomodus, een ander apparaat of de Shopify-app.
- Probeer mobiele data of een andere internetverbinding te gebruiken.
- Controleer of je browser up-to-date is.
- Controleer dat je browser niet is ingesteld om alle cookies te blokkeren. Sommige apps worden zonder cookies namelijk niet goed weergegeven.
- Controleer of je een Virtual Private Netwerk (VPN) hebt gebruikt of een firewall hebt geactiveerd die Shopify blokkeert.
Als dit probleem zich blijft voordoen op andere apparaten, browsers of internetverbindingen, is het geen lokaal probleem en kan het worden gerepliceerd. De volgende stap in het vinden van de oorzaak van het probleem, is het probleem repliceren naar een ander thema. Ga naar de Theme Store, installeer een nieuwe versie van het thema en test of het probleem nog steeds voorkomt in de nieuwste versie van het thema. Een ander thema installeren, zoals een gratis Shopify-thema, is ook verstandig, omdat je zo kunt achterhalen of het probleem het gevolg is van dat specifieke thema of dat alle thema's hetzelfde probleem ondervinden. Na het testen van andere thema's zijn de volgende stappen een goed idee, afhankelijk van de aard van het probleem:
- Als het probleem alleen aanwezig is op je huidige thema en een bijgewerkte en niet-aangepaste versie van het thema, moet je mogelijk ondersteuning vragen voor je thema.
- Als je probleem zich alleen voordoet bij het huidige thema, kan het zijn dat een themacode die problemen veroorzaakt. Als je je themacode onlangs hebt bijgewerkt, kun je teruggaan naar een oudere versie van je themacode. Als je de code in het thema niet hebt aangepast, kun je de thema-instellingen controleren. Als de knop Toevoegen aan winkelwagen bijvoorbeeld niet wordt weergegeven, controleer je de kleuren voor Knoppen in je thema-instellingen en zorg je ervoor dat ze anders en contrasterend zijn.
- Als het probleem zich bij alle thema's voordoet, kan dit komen door je Shopify-beheercentruminstellingen, apps of andere problemen.
Het probleem kan afkomstig zijn van een app. Als je onlangs apps hebt geïnstalleerd of bijgewerkt die van invloed zijn op je webshop, is het een optie om de app tijdelijk te verwijderen. Als het probleem zich niet meer voordoet als de app eenmaal is verwijderd, kun je contact opnemen met het ondersteuningsteam van de app-ontwikkelaar voor meer hulp om ervoor te zorgen dat alles correct wordt weergegeven in je webshop. Meer informatie over hulp krijgen bij je apps. Als het probleem zich nog steeds voordoet als de app eenmaal is verwijderd, is de app niet de bron van het probleem.

Afbeeldingen worden niet correct weergegeven

Afbeeldingen kunnen anders worden weergegeven dan je verwacht, maar dat kan komen doordat de afbeelding zelf niet compatibel is met waarvoor je de afbeelding in je thema gebruikt. Zorg ervoor dat de afmetingen van de afbeelding correct zijn in de afbeelding die je gebruikt. Bekijk de volgende lijst met veelvoorkomende weergaveproblemen die kunnen optreden bij het uploaden van een niet-compatibele afbeelding:

Als je koptekst groter wordt weergegeven en je logo-afbeelding kleiner is dan verwacht, kan dit komen door witruimte in het bestand met de logo-afbeelding. Witruimte in het bestand met de logo-afbeelding kan ervoor zorgen dat het logo kleiner wordt weergegeven en je koptekst groter wordt weergegeven als gevolg van die witruimte. Bewerk het afbeeldingsbestand om ervoor te zorgen dat de afbeelding rond het logo is bijgesneden en dat er geen witruimte is.
Als je diavoorstellingsafbeelding wordt bijgesneden, is dit normaal, want het zorgt ervoor dat de afbeeldingen er op een mobiel hetzelfde uitzien als op een desktop. Omdat content veel kleiner wordt weergegeven op het scherm van een mobiel, kunnen veel details verloren gaan doordat de content krimpt. In plaats daarvan wordt de content bijgesneden om ervoor te zorgen dat de gegevens niet verloren gaan. Een staande afbeelding die hoger is dan dat deze breed is, kan ook veel ruimte in beslag nemen op desktop. Daarom hebben afbeeldingen van diavoorstellingen een maximale hoogte. Je kunt een focuspunt toevoegen aan je diavoorstellingsafbeeldingen om ervoor te zorgen dat het focuspunt altijd het midden van de diavoorstellingsafbeelding is. Als het toevoegen van een focuspunt niet helpt, kun je proberen een afbeelding te vinden die werkt op alle schermgroottes. Meer informatie over best practices voor diavoorstellingen.
Als een GIF-afbeelding niet correct wordt weergegeven en deze met tekst met opmaak aan je webshop is toegevoegd, zoals in de productbeschrijving of in een blogpost, kan dit komen door het afbeeldingsformaat. Je kunt dit corrigeren door op de GIF in de tekst met opmaak te klikken en vervolgens op Afbeelding bewerken. Selecteer Origineel in de vervolgkeuzelijst Afbeeldingsgrootte. Je kunt de GIF vervolgens aanpassen door op de hoeken van de afbeelding te klikken en ze naar binnen te slepen om ze kleiner te maken of naar buiten te slepen om ze groter te maken.
Als de afbeeldingen in je webshop duidelijk een andere kleur hebben dan je oorspronkelijke afbeelding, hebben je afbeeldingen mogelijk niet de standaardkleuren rood, groen, blauw (sRBG). Sla je bestand in een toepassing voor fotobewerking op als een sRBG om dit verschil in kleur te verhelpen. Veelgebruikte termen hiervoor zijn 'Web optimaliseren', 'Afbeelding aanpassen voor web' of 'Opslaan voor web'. Meer informatie over kleurprofielen.
Als je productafbeeldingen op je collectiepagina's niet worden uitgelijnd, moet je mogelijk de beeldverhouding in de productafbeeldingen aanpassen zodat ze dezelfde hoogte-breedteverhouding hebben, en vervolgens de productafbeelding opnieuw uploaden. Je kunt ook een beeldbewerkingsapp uit de Shopify App Store gebruiken.

Producten of collecties worden niet correct weergegeven

Als je producten ontbreken in je webshop, moet je mogelijk de Status en je Verkoopkanalen controleren in de sectie Publiceren van je product in het Shopify-beheercentrum. Zorg ervoor dat de productstatus op Actief staat en dat het product beschikbaar is voor de Webshop.

Als je collecties ontbreken in je webshop, moet je mogelijk de verkoopkanalen controleren in de sectie Publiceren van je collectie in het Shopify-beheercentrum. Zorg ervoor dat de collectie beschikbaar is voor de webshop. Het is misschien ook handig je collectie toe te voegen aan je menu's.

Als je collecties worden weergegeven, maar er producten ontbreken, moet je mogelijk de tagfilters voor de collectie controleren in je Menu-instellingen. Zorg ervoor dat er geen tags in het veld Filtercollectie met tags zijn die ervoor kunnen zorgen dat producten niet worden weergegeven.

Als je valuta niet correct wordt weergegeven voor producten of in je collecties, is het verstandig de Weergave valuta in de sectie Winkelstandaarden in Instellingen > Algemeen te controleren om ervoor te zorgen dat er geen extra code is. Meer informatie over de valutanotatie voor je klanten instellen.

Als sommige producten of collecties anders worden weergegeven dan de andere, moet je mogelijk de Thematemplate bekijken die is toegewezen aan de producten of collecties in het Shopify-beheercentrum.

Vertaalde content wordt niet correct weergegeven

Als je vertaalde content niet correct wordt weergegeven of ontbreekt in je webshop, zijn er mogelijk verouderde vertalingen of ontbrekende vertalingen voor de content. De content kan zich ook in een specifieke template voor een markt bevinden. Wanneer je nieuwe content in je standaardtaal toevoegt, vergeet dan niet om de automatische vertaling opnieuw uit te voeren of handmatig nieuwe vertalingen toe te voegen.

De volgende statussen kunnen van toepassing zijn op vertaalde content:

Vertaald: er zijn vertalingen beschikbaar voor de content.
Verouderd: de content in de standaardtaal is bijgewerkt, maar de vertalingen geven geen updates weer.
Niet vertaald: er zijn geen vertalingen voor dit contenttype.

Werk bij het controleren van je vertaalde content je niet-vertaalde of verouderde content bij. Dan zou je vertaalde content correct moeten worden weergegeven.

Meer informatie over je winkel vertalen en lokaliseren.

Updates in de themabewerker worden niet weergegeven in de webshop

Controleer als je webshop en je themabewerker niet dezelfde gegevens laten zien de thematemplate die je bewerkt. Mogelijk moet je bewerkingen doorvoeren om je thematemplates bij te werken zodat ze de juiste informatie weergeven. Met contextualisatie van de winkel kun je verschillende webshops maken voor verschillende markten en vertaalde content weergeven. Mogelijk heb je onbedoeld binnen een specifieke markt of B2B gewerkt bij het maken van updates. Zoek de content met de vervolgkeuzelijst Context in je themabewerker om zeker te stellen dat die zich op de juiste markten bevindt.

Meer informatie over contextualisatie van winkels.

Verschillen in je thema tussen mobiele en desktopweergaven

Alle thema's die beschikbaar zijn in de Shopify Theme Store zijn responsieve thema's. Dit betekent dat het thema zich aanpast aan de grootte van het scherm. In de themabewerker kun je de schermgrootte wijzigen terwijl je het thema bewerkt. Zo zorg je ervoor dat je pagina's en afbeeldingen correct worden weergegeven. Lees meer over het verschillende schermgrootten bekijken in de themabewerker.

Veel secties en blokken hebben mobiele instellingen die je kunt aanpassen. Je kunt bijvoorbeeld het aantal kolommen op mobiel instellen in de sectieGerelateerd producten. Je kunt de sectie Instellingen voor mobiel voor elk paginatype raadplegen om eventuele weergaveproblemen op mobiele schermgrootte op te lossen.

Sommige themafuncties worden mogelijk anders weergegeven op mobiele apparaten dan op desktops. Dit doen we om ervoor te zorgen dat het thema op alle schermformaten zichtbaar is. Op een desktopscherm kan je diavoorstelling bijvoorbeeld een overlay hebben. Hierbij wordt de tekst over de afbeelding heen weergegeven, vaak met een bepaalde kleurdoorzichtigheid of tekstschaduw. Op een mobiel schermformaat kan de tekst echter onder de diavoorstelling verschijnen. Dit is een toegankelijkheidsfunctie om te zorgen dat de tekst op elke schermgrootte leesbaar is. Als de tekst in plaats daarvan een overlay zou zijn, zou deze op mobiele apparaten erg klein worden weergegeven en daardoor niet goed leesbaar zijn.

Als de sectie met uitgelichte collectie of de collectiepagina's inconsistente formaten weergeven of niet goed uitgelijnd zijn wanneer je je webshop op een mobiel apparaat bekijkt, kan dit komen door inconsistente beeldverhoudingen. Afbeeldingsrasters, zoals productafbeeldingen die binnen een collectie of uitgelichte collectie worden weergegeven, zijn zo gemaakt dat ze responsief zijn voor de schermgrootte. Als je inconsistente beeldverhoudingen voor je afbeeldingen in het raster hebt, kunnen ze afhankelijk van de schermgrootte anders worden weergegeven Vierkante productafbeeldingen van 2048 bij 2048 px komen doorgaans het beste tot hun recht in productrasters. Werk je afbeeldingen bij met een consistente beeldverhouding voor optimalisatie op alle schermformaten. Meer informatie over beeldverhouding.

Tekst met opmaak-editor

Soms is een HTML-code die in je tekst met opmaak-editor wordt toegevoegd in strijd met je themacode. Als het probleem zich op één pagina voordoet, zoals een productpagina, pagina of blogpost, kan dit komen door extra HTML. Die kan soms worden toegevoegd door het kopiëren en plakken van tekst vanaf een andere site.

Controleer de HTML-code

Je kunt de HTML-code controleren in de tekst met opmaak-editor.

Stappen:

Navigeer naar de pagina in het beheercentrum.
Klik op </> HTML-knop weergeven om de HTML-code te bekijken.
Zoek een HTML-code die weergaveproblemen kan veroorzaken en verwijder deze.
Klik op Opslaan.

Opmaak wissen

Je kunt een deel van de tekst markeren en HTML-opmaak wissen.

Stappen:

Navigeer naar de pagina in het beheercentrum.
Markeer de tekst met de opmaakproblemen.
Klik op de 🚫-knop.
Klik op Opslaan.

Lees meer over de RTF-editor.

Pagina wordt omgeleid naar een niet-ondersteunde URL

Als je webshop code bevat die gebruikers omleidt naar URL's die niet zijn gekoppeld aan je winkel, controleer je of de omleiding is gedeactiveerd wanneer je naar de themabewerker gaat.

Dit type omleiding kan bijvoorbeeld worden toegevoegd aan een webshop om klanten naar verschillende Shopify-winkels te leiden, afhankelijk van hun locatie. Dit type omleidingscode kan voorkomen in je thema of in een app die je hebt geïnstalleerd.

Gebruik een verwijzing naar de window.Shopify.designMode-variabele in JavaScript om de omleiding te deactiveren wanneer je de themabewerker bezoekt. Zo zorg je ervoor dat de omleiding geen effect heeft op de editorervaring. Deze variabele wordt ingesteld op true wanneer de webshop in de editor is geladen en op false wanneer dat niet zo is.

Codefoutberichten

Als er een syntaxisfout is opgetreden in je themacode, wordt de waarschuwing HTML error found of Theme error weergegeven in je themabewerker. De foutmelding toont het Liquid-bestand dat de fout bevat.

De waarschuwingThe theme you're looking for couldn't be found kan verschijnen wanneer er een verbroken HTML is. Een pagina kan om verschillende redenen niet worden geladen in de themabewerker, zoals:

problemen met netwerkverbindingen
Ongeldige Liquid-code in je thema

Je kunt de codewijzigingen in je themacode vinden en de code corrigeren of het bestand terugdraaien voordat je de code wijzigt.

Stappen

Klik op het sectiebestand .liquid dat is gekoppeld in de foutmelding, of controleer de bestanden op recente wijzigingen. Ga daarvoor naar de pagina HTML/CSS bewerken. Het bestand wordt geopend in de code-editor.
Doorzoek de code in het bestand en probeer ongeldige HTML of Liquid te vinden. In de code-editor worden potentiële syntaxisfouten in rood weergegeven. Veelvoorkomende problemen zijn:
- Extra sluitende HTML-tags, bijvoorbeeld een sluiting </div> zonder een opening <div>
- Extra niet-gesloten HTML-tags, bijvoorbeeld een opening <div> zonder dat je de tags sluit </div>
- Html-tags met een afwijking, bijvoorbeeld <div class="my-class" zonder een >
- Verkeerd ingedeeld liquid-code
- Verbroken HTML-code in een opgenomen themafragmentbestand
Nadat je het probleem hebt gevonden, corrigeer je de code in je themabestand of draai je de code terug door een eerdere versie in Recente wijzigingen te selecteren.
Klik op Opslaan.
Klik op Aanpassen om terug te gaan naar de themabewerker en bevestig dat het foutbericht is verdwenen.
Navigeer naar je webshop om ervoor te zorgen dat alles wordt weergegeven zoals verwacht.