Probleemoplossing voor je webshopthema

Afbeeldingen worden mogelijk anders weergegeven dan je verwacht, maar dit kan komen doordat de afbeelding zelf niet compatibel is met het doel waarvoor je deze in je thema gebruikt. Controleer of de afbeeldingsafmetingen correct zijn in de afbeelding die je gebruikt. Bekijk de volgende lijst met veelvoorkomende weergaveproblemen die kunnen optreden bij het uploaden van een incompatibele afbeelding:

• Als je koptekst groter en je logoafbeelding kleiner wordt weergegeven dan verwacht, kan dit te wijten zijn aan witruimte in het logobestand. Witruimte in het logobestand kan ervoor zorgen dat het logo kleiner wordt weergegeven en je koptekst groter wordt weergegeven. Bewerk het afbeeldingsbestand om te controleren of het rond het logo is bijgesneden en er geen witruimte is.
• Als de afbeelding in je diavoorstelling wordt bijgesneden, is dit bewust zo ontworpen om ervoor te zorgen dat de afbeeldingen op mobiele apparaten hetzelfde worden weergegeven als op een desktop. Omdat content veel kleiner wordt weergegeven op een mobiel scherm, kunnen er veel details verloren gaan door de content te verkleinen. In plaats daarvan wordt de content bijgesneden om te zorgen dat de details niet verloren gaan. Een staande afbeelding, die hoger is dan breed, kan ook veel ruimte in beslag nemen op een desktop. Daarom hebben afbeeldingen van diavoorstellingen een maximale hoogte. Je kunt een focuspunt toevoegen aan de afbeeldingen in je diavoorstelling om ervoor te zorgen dat het focuspunt altijd het midden van de afbeelding is.

  Optie voor adaptieve hoogte: veel Shopify-thema's hebben een instelling voor adaptieve hoogte voor diavoorstellingen die de hoogte van de diavoorstelling aanpast aan de eerste afbeeldingsdia, waardoor er minder wordt bijgesneden op verschillende schermgroottes. Deze functie is beschikbaar in alle momenteel ondersteunde thema's die door Shoify zijn ontwikkeld.

• Als een GIF-afbeelding niet correct wordt weergegeven en deze is toegevoegd aan je webshop met de editor voor tekst met opmaak, zoals in de productbeschrijving of in een blogpost, dan kan dit te wijten zijn aan de afbeeldingsgrootte. Je kunt dit corrigeren door in de editor voor tekst met opmaak op de GIF te klikken en vervolgens op Afbeelding bewerken te klikken. Selecteer in de vervolgkeuzelijst Afbeeldingsgrootte de optie Origineel. Je kunt de grootte van de GIF vervolgens aanpassen door de hoeken van de afbeelding naar binnen te klikken en te slepen om deze kleiner te maken of naar buiten om deze groter te maken.
• Als je afbeeldingen in je webshop een aanzienlijke kleurverandering hebben ten opzichte van je originele afbeelding, zijn je afbeeldingen mogelijk niet in de standaard Red Green Blue-kleuren (sRGB). Om deze kleurverandering te verhelpen, sla je je bestand op in een fotobewerkingsprogramma als sRGB. Veelgebruikte termen hiervoor zijn ‘Optimaliseren voor web’, ‘Afbeelding aanpassen voor web’ of ‘Opslaan voor web’. Meer informatie over kleurprofielen.
• Als je productafbeeldingen op je collectiepagina's niet op één lijn staan, moet je mogelijk de beeldverhouding in de productafbeeldingsbestanden aanpassen zodat ze dezelfde hoogte-breedteverhouding hebben, en vervolgens de productafbeelding opnieuw uploaden. Je kunt ook een app voor het bewerken van afbeeldingen uit de Shopify App Store gebruiken.

Bekijk de volgende onderwerpen voor je specifieke probleem en de stappen die je helpen het probleem op te lossen:

• Ontbrekende producten: 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. Controleer of de productstatus Actief is en of het product beschikbaar is voor de Webshop.
• Ontbrekende collecties: als je collecties ontbreken in je webshop, moet je mogelijk de Verkoopkanalen controleren in de sectie Publiceren van de collectie in het Shopify-beheercentrum. Controleer of de collectie beschikbaar is voor de Webshop en is toegevoegd aan je menu's.
• Collecties weergegeven, maar producten ontbreken: als je collecties worden weergegeven maar er producten ontbreken, moet je mogelijk de tagfilters voor de collectie controleren in je instellingen voor Menu's. Controleer of er geen tags in het veld Collectie filteren op tag staan die ervoor kunnen zorgen dat producten niet worden weergegeven.
• Valuta niet correct: als je valuta niet correct wordt weergegeven voor producten of in je collecties, kun je de Valutaweergave controleren in de sectie Standaardinstellingen voor winkel in Instellingen > Algemeen om te verifiëren dat er geen extra code is. Meer informatie over het opmaken van de valutaweergave voor je klanten.
• Sommige producten worden anders weergegeven: als sommige producten of collecties anders worden weergegeven dan de andere, controleer dan de thematemplate die is toegewezen aan de producten of collecties in je Shopify-beheercentrum.
• Kan product- of collectietemplates niet bewerken: als de standaardproduct- of collectietemplates grijs en niet-selecteerbaar zijn in de themabewerker, moet je ten minste één product of collectie beschikbaar maken voor het verkoopkanaal Webshop. Je kunt deze standaardtemplates niet bewerken zonder producten of collecties beschikbaar te hebben om de wijzigingen in een voorbeeld te bekijken. Meer informatie over het wijzigen van de beschikbaarheid van een collectie en het instellen van productbeschikbaarheid in je verkoopkanalen.

Als je vertaalde content niet goed wordt weergegeven of ontbreekt in je webshop, zijn er mogelijk verouderde of ontbrekende vertalingen voor de content. De content kan zich ook in een specifieke template voor een markt bevinden. Telkens wanneer je nieuwe content toevoegt in je standaardtaal, 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: de content heeft beschikbare vertalingen.
• Verouderd: de content in de standaardtaal is bijgewerkt, maar de vertalingen weerspiegelen geen updates.
• Onvertaald: er zijn geen vertalingen voor dit contenttype.

Wanneer je je vertaalde content controleert, werk dan alle onvertaalde of verouderde content bij. Je vertaalde content zou dan correct moeten worden weergegeven.

Meer informatie over je winkel vertalen en lokaliseren.

Als je webshop en je themabewerker niet dezelfde informatie weergeven, controleer dan de thema-template die je bewerkt. Mogelijk moet je je thema-templates bewerken om de juiste informatie weer te geven.

Met marktoverschrijvingen kun je verschillende webshops voor verschillende markten aanmaken en vertaalde content weergeven. Mogelijk heb je bij het doorvoeren van updates per ongeluk binnen een specifieke markt of B2B gewerkt. Zoek de content met de vervolgkeuzelijst Markt in je themabewerker om er zeker van te zijn dat deze in de juiste markten staat.

Meer informatie over marktoverschrijvingen.

Alle thema's die beschikbaar zijn in de Shopify Theme Store zijn responsieve thema's, wat betekent dat het thema zich aanpast aan de grootte van het scherm. In de themabewerker kun je tijdens het bewerken van het thema wisselen van schermgrootte om te controleren of je pagina's en afbeeldingen correct worden weergegeven. Meer informatie over het bekijken van verschillende schermgroottes in de themabewerker.

Veel van de secties en blokken hebben mobiele instellingen die je kunt aanpassen. Je kunt bijvoorbeeld het Aantal kolommen op mobiel instellen in de sectie Gerelateerde producten. Je kunt de sectie-instellingen voor mobiel voor elke template controleren om weergaveproblemen op mobiele schermgroottes op te lossen.

Sommige themafuncties worden op mobiel mogelijk anders weergegeven dan op desktop om te garanderen dat het thema toegankelijk is op alle schermgroottes. Op een desktopscherm kan je diavoorstelling bijvoorbeeld een tekstoverlay hebben, waarbij de tekst boven op de afbeelding wordt weergegeven, vaak met een dekkende afbeeldingskleur of tekstschaduw. Op mobiele schermen kan de tekst echter onder de diavoorstelling worden weergegeven. Dit is bewust een toegankelijkheidsfunctie, zodat de tekst op elke schermgrootte leesbaar is. Als de tekst in plaats daarvan een overlay was, zou deze op mobiel erg klein worden weergegeven, waardoor hij moeilijk te lezen is.

Als je sectie voor uitgelichte collecties of je collectiepagina's inconsistente formaten weergeven of niet goed worden uitgelijnd wanneer je je webshop op een mobiel apparaat bekijkt, kan dit te wijten zijn aan inconsistente beeldverhoudingen. Afbeeldingsgrids, zoals productafbeeldingen die worden weergegeven in een collectie of uitgelichte collectie, zijn gebouwd om responsief te zijn voor de schermgrootte. Als je afbeeldingen in het afbeeldingsgrid inconsistente beeldverhoudingen hebben, kunnen ze anders worden weergegeven afhankelijk van de schermgrootte. Vierkante productafbeeldingen van 2048 x 2048 pixels werken meestal het beste in productgrids. Werk je afbeeldingen bij zodat ze een consistente beeldverhouding hebben voor optimalisatie op alle schermgroottes. Meer informatie over de beeldverhouding van afbeeldingen.

Soms is HTML-code die in je editor voor tekst met opmaak is 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. Deze kan soms worden toegevoegd door tekst van een andere site te kopiëren en te plakken.

De HTML-code controleren

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

Stappen:

1. Navigeer naar de pagina in je beheerpaneel.
2. Klik op de knop HTML weergeven om de HTML-code te controleren.
3. Zoek de HTML-code die weergaveproblemen kan veroorzaken en verwijder deze.
4. Klik op Opslaan.

De opmaak wissen

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

Stappen:

1. Navigeer naar de pagina in je beheerpaneel.
2. Markeer de tekst met de opmaakproblemen.
3. Klik op de knop 🚫.
4. Klik op Opslaan.

Meer informatie over de editor voor tekst met opmaak.

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

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

Gebruik een verwijzing naar de variabele window.Shopify.designMode in JavaScript om de omleiding te deactiveren wanneer je de themabewerker bezoekt, en zo te controleren of de omleiding de editor-ervaring niet verstoort. Deze variabele wordt ingesteld op true wanneer de webshop in de editor wordt geladen en op false wanneer dat niet het geval is.

Als je inklapbare blokken of andere themablokken hebt die op alle productpagina's dezelfde content weergeven, moet je dynamische bronnen met metavelden instellen. Dit gebeurt vaak wanneer merchants productspecifieke informatie, zoals ingrediënten of onderhoudsinstructies, aan één product toevoegen, maar deze op alle producten wordt weergegeven.

Inklapbare blokken geven op alle producten dezelfde tekst weer

Wanneer je content rechtstreeks toevoegt aan een inklapbaar blok in de themabewerker, wordt die content op alle productpagina's weergegeven. Als je productspecifieke content wilt weergeven, moet je dynamische bronnen met metavelden gebruiken:

1. Ga in het Shopify-beheercentrum naar Instellingen > Metavelden > Producten.
2. Klik op Definitie toevoegen.
3. Voer een naam in voor je metaveld en klik vervolgens op Contenttype selecteren.
4. Selecteer Tekst en Tekst met meerdere regels.
5. Klik op Opslaan.
6. Ga naar een productpagina in je beheerpaneel en scrol naar de sectie met metavelden onderaan de pagina.
7. Voeg je productspecifieke content toe aan het metaveld dat je hebt aangemaakt.
8. Ga in de themabewerker naar de producttemplate en zoek je sectie Inklapbare rij.
9. Klik in de instelling Rij-content op de knop .
10. Selecteer je metaveld uit de beschikbare opties.
11. Sla je wijzigingen op.

Nu geeft elk product zijn eigen content weer wanneer het metaveld is ingevuld, en wordt er geen content weergegeven als het metaveld voor dat product leeg is.

Meer informatie over het weergeven van metavelden in je onlinewinkel en het gebruik van metavelden en metaobjecten met dynamische bronnen.

Als er een syntaxisfout in je themacode zit, wordt er een waarschuwingsbericht HTML-fout gevonden of Themafout weergegeven in je themabewerker. Het foutbericht geeft het Liquid-bestand weer dat de fout bevat.

Er wordt mogelijk een waarschuwingsbericht Het gezochte thema is niet gevonden weergegeven als er ongeldige HTML is. Een pagina kan om verschillende redenen niet in de themabewerker worden geladen, bijvoorbeeld:

• problemen met de netwerkverbinding
• ongeldige Liquid-code in je thema

Je kunt de codewijzigingen in je themacode opzoeken en de code corrigeren. Als je het desbetreffende, bestaande bestand kunt identificeren, kun je dit naar een beschikbare eerdere versie herstellen in de weergave Tijdlijn van de code-editor.

Stappen:

1. Klik op het .liquid-sectiebestand waarnaar in het foutbericht wordt gelinkt of controleer de bestanden op recente wijzigingen. Je wordt dan naar de pagina HTML/Cascading Style Sheets (CSS) bewerken gebracht en het bestand wordt geopend in de code-editor.
2. Doorloop de code in het bestand en probeer ongeldige HTML of Liquid te vinden. De code-editor geeft mogelijke syntaxisfouten in het rood weer. Veelvoorkomende problemen zijn onder andere:
   • Extra afsluitende HTML-tags, bijvoorbeeld een afsluitende </div> zonder een openende <div>
   • Extra niet-afgesloten HTML-tags, bijvoorbeeld een openende <div> zonder een afsluitende </div>
   • Onjuist opgemaakte HTML-tags, bijvoorbeeld <div class="my-class" zonder een >
   • Onjuist opgemaakte Liquid-code
   • Foutieve HTML in een opgenomen fragmentbestand van het thema
3. Corrigeer de code in je themabestand nadat je het probleem hebt gevonden. Als je de weergave Tijdlijn van de code-editor gebruikt om een eerdere versie te selecteren en Inhoud herstellen kiest, wordt de volledige bestandsinhoud vervangen. Kopieer eerst de huidige bestandsinhoud naar een veilige locatie als je eventuele wijzigingen wilt behouden.
4. Klik op Opslaan.
5. Klik op Thema bewerken om terug te keren naar de themabewerker en controleer of de foutmelding is verdwenen.
6. Ga naar je webshop om te controleren of deze wordt weergegeven zoals verwacht.

Foutmelding ‘Exceeded maximum number of unique handles’

Als je een Liquid-foutmelding zoals ‘Exceeded maximum number of unique handles for all_products’ op je homepage ziet, betekent dit meestal dat je te veel secties met uitgelichte producten hebt toegevoegd aan je homepage (meestal meer dan 20 secties in de meeste thema's).

Je kunt dit als volgt oplossen:

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
2. Zoek je huidige thema en klik op Thema bewerken.
3. Ga naar je homepage.
4. Verwijder enkele secties met uitgelichte producten om binnen de limieten van het thema te blijven.
5. Overweeg in plaats daarvan secties met uitgelichte collecties te gebruiken. Daarmee kun je meerdere producten efficiënter weergeven en de prestaties van je winkel verbeteren.

Betalingspictogrammen zijn meestal standaard opgenomen in de voettekst van de meeste thema's om klanten te laten zien welke betaalmethoden je accepteert. Als er geen betalingspictogrammen in de voettekst van je thema worden weergegeven, kun je het volgende controleren:

1. Ga in de themabewerker naar de sectie Voettekst en controleer of de instelling Betalingspictogrammen weergeven is geactiveerd.
2. Ga in het Shopify-beheercentrum naar Instellingen > Betalingen en controleer of er ten minste één actieve betaalmethode is. Voor sommige betaalmethoden moet mogelijk de accountinstallatie worden voltooid voordat de bijbehorende pictogrammen worden weergegeven.
3. Als je een externe betalingsgateway gebruikt, worden de betalingspictogrammen mogelijk niet weergegeven vanwege platformbeperkingen.

Als je deze instellingen hebt gecontroleerd en de betalingspictogrammen nog steeds niet worden weergegeven, moet je mogelijk ondersteuning voor je thema krijgen.