Felsökning av ditt webbshopstema

Det finns många olika omständigheter som kan leda till att ditt tema inte visas som förväntat, vilket leder till att element försvinner eller inte fungerar som förväntat och olika andra visningsproblem. Det kan bero på att tredjeparts- eller appkod står i konflikt med temat eller anpassade kodanpassningar. Det kan också finnas inställningar i din Shopify-admin som måste justeras. Du kan till exempel behöva granska ditt översatta innehåll, dina produkter, produktserier, navigering eller dina marknader.

Om du fortfarande har problem med ditt tema efter att ha granskat stegen i den här vägledningen kan du behöva kontakta temats supportteam. Läs mer om hur kan få support för teman.

Hitta orsaken till problemet

Att lokalisera orsaken till problemet i ditt tema är det första steget för att lösa det. Försök med följande steg för att hitta orsaken till problemet:

1. Du kan besöka Shopify-statussidan för att se kända problem som kan påverka skyltfönstret. Om det inte finns något liknande problem listat kan du undersöka problemet ytterligare.

2. Problemet kan vara lokalt för din enhet. Lokala problem är vanligtvis ett resultat av enhets- eller webbläsarinställningar eller problem med internetanslutning. Försök med följande steg för att säkerställa att problemet inte är lokalt och kan replikeras på andra enheter, webbläsare eller internetanslutningar:

   • Rensa webbläsarens cacheminne och cookies. Om du är inloggad på Shopifys hjälpcenter med ditt Shopify-konto så blir du utloggad från kontot om du rensar webbläsarens cacheminne och cookies. Om du använder den virtuella hjälpcenterassistenten så återställs chatthistoriken om du rensar webbläsarens cacheminne och cookies och du loggas ut från kontot. Du måste starta en ny chatt med den virtuella hjälpcenterassistenten.
   • Testa med inkognitoläge, en annan enhet eller Shopify-appen.
   • Försök använda mobildata eller en annan internetanslutning.
   • Se till att din webbläsare är uppdaterad.
   • Se till att webbläsaren inte är inställd på att blockera alla cookies, eftersom vissa appar kanske inte visas på rätt sätt utan cookies.
   • Se till att du inte använder ett virtuellt privat nätverk (VPN) eller en aktiverad brandvägg som blockerar Shopify.

3. Om du fortfarande upplever problemet på andra enheter, webbläsare eller internetanslutningar är problemet inte ett lokalt problem och det kan replikeras. Att replikera problemet till ett annat tema är nästa steg i att lokalisera orsaken till problemet. Besök Theme Store. Installera en ny version av temat och testa om problemet fortfarande finns med i den senaste versionen av temat. Att installera ett annat tema, till exempel ett gratis Shopify-tema, är också bra praxis, eftersom du kan avgöra om problemet beror på det specifika temat eller om alla teman uppvisar samma problem. Efter att ha testat andra teman är följande steg bra att testa beroende på hur problemet presenteras:

   • Om problemet endast finns med i ditt aktuella tema och i en uppdaterad och icke-anpassad version av temat, kan du behöva support för temat.
   • Om problemet endast finns med i det aktuella temat kan det finnas en temakod som orsakar problem. Om du nyligen har uppdaterat temakoden kan du gå tillbaka till en äldre version av temakoden. Om du inte har modifierat koden i temat kanske du vill granska dina temainställningar. Om knappen Lägg till i varukorg till exempel inte visas, kan du granska färgerna för Knappar i temainställningarna och se till att de har olika och kontrasterande färger.
   • Om problemet finns med i alla teman kan det bero på inställningarna i Shopify-admin, appar eller andra problem.

4. Problemet kan komma från en app. Om du nyligen har installerat eller uppdaterat en app som påverkar ditt skyltfönster kan du tillfälligt avinstallera appen. Om problemet försvinner efter att du har avinstallerat appen kan du kontakta apputvecklarens supportteam för mer hjälp med att få den att visas korrekt i ditt skyltfönster. Läs mer om att få hjälp med dina appar. Om problemet fortfarande finns kvar efter att du har avinstallerat appen är det inte appen som är orsaken till problemet.

Bilder visas inte korrekt

Bilder kan se annorlunda ut än vad du förväntar dig, men det kan bero på att bilden i sig inte är kompatibel med det du använder bilden till i ditt tema. Se till att bildmåtten är korrekta i den bild du använder. Gå igenom följande lista med vanliga visningsproblem som kan uppstå när du laddar upp en inkompatibel bild:

• Om sidhuvudet visas bredare på datorn och logotypbilden visas mindre på mobilen än du förväntar dig kan det bero på tomt utrymme i bildfilen för logotypen. Redigera bildfilen för att säkerställa att den är beskuren runt logotypen och att det inte finns något tomt utrymme.
• Om bildspelsbilden har beskurits är detta avsiktligt för att säkerställa att bilderna visas på samma sätt på mobila enheter som på datorer. Eftersom innehållet visas mycket mindre på en mobilskärm finns det många detaljer som kan försvinna genom att minska innehållet. Istället beskärs innehållet för att säkerställa att detaljerna inte går förlorade. En stående bild, som är högre än vad den är bred, kan också ta upp betydande utrymme på datorn. Det är anledningen till att bilder i ett bildspel har en maximal höjd. Du kan lägga till en fokuspunkt i dina bildspelsbilder för att säkerställa att fokuspunkten alltid är i mitten av bildspelet. Om det inte hjälper att lägga till en fokuspunkt kan du försöka hitta en bild som fungerar med alla skärmstorlekar. Läs mer om bästa praxis för bildspel.
• Om en GIF-bild inte visas korrekt och den har lagts till i skyltfönstret med RTF-redigeraren, till exempel i produktbeskrivningen eller i en bloggpost, kan det bero på bildstorleken. Du kan korrigera detta genom att klicka på GIF:en i RTF-redigeraren och sedan klicka på Redigera bild. Välj Original i rullgardinsmenyn Bildstorlek. Du kan sedan ändra storlek på GIF:en genom att klicka på och dra hörnen på bilden inåt för att göra den mindre eller utåt för att göra den större.
• Om det är stor färgskillnad mellan bilderna i skyltfönstret och originalbilden kanske bilderna inte är i standardfärgerna Röd Grön Blå (sRGB). Spara filen som sRBG i ett fotoredigeringsprogram för att åtgärda denna färgskillnad. Vanliga termer för detta är ”Webboptimering”, ”Justera bild för webben” eller ”Spara för webben”. Läs mer om färgprofiler.
• Om produktbilderna på dina produktseriesidor inte stämmer kan du behöva justera aspektförhållandet i produktbildfilerna så att de har samma höjd-bredd-förhållande och sedan ladda upp produktbilden igen. Du kan även använda en bildredigeringsapp från Shopify App Store.

Produkter eller produktserier visas inte korrekt

Om produkter saknas i ditt skyltfönster kan du behöva granska produktens Status och Försäljningskanaler i avsnittet Publicering i Shopify-admin. Se till att produktstatusen är Aktiv och att produkten är tillgänglig för Webbshopen.

Om produktserierna saknas i ditt skyltfönster kan du behöva granska produktseriernas Försäljningskanaler i avsnittet Publicering i Shopify-admin. Se till att produktserien är tillgänglig för Webbshopen. Du kan också se till att produktserien läggs till i din Navigering.

Om produktserierna visas men produkter saknas kan du behöva granska alla taggfilter för produktserien i Navigeringsinställningar. Se till att det inte finns några taggar i fältet Filtrera produktserie med taggar som kan leda till att produkter inte visas.

Om valutan inte visas korrekt för produkter eller i produktserier, kan du granska Visad valuta i avsnittet Butiksstandarder i Inställningar > Allmänt för att säkerställa att det inte finns någon ytterligare kod. Läs mer om hur du formaterar hur valuta visas för dina kunder.

Om vissa produkter eller produktserier visas på ett annat sätt än de andra kan du behöva granska Temamallen som tilldelats produkterna eller produktserierna i Shopify-admin.

Översatt innehåll visas inte korrekt

Om översatt innehåll inte visas korrekt eller saknas från skyltfönstret kan det hända att det finns gamla översättningar eller översättningar som saknas från innehållet. Innehållet kan också finnas i en specifik mall för en marknad. Kom ihåg att köra automatisk översättning igen eller lägga till nya översättningar manuellt när du lägger till nytt innehåll på ditt standardspråk.

Följande status kan gälla för översatt innehåll:

• Översatt: Det finns tillgängliga översättningar för innehållet.
• Föråldrad: Innehållet i standardspråket har uppdaterats men inga uppdateringar reflekteras i översättningarna.
• Ej översatt: Det finns inga översättningar för den här innehållstypen.

När du granskar översatt innehåll ska du uppdatera det som inte är översatt eller är gammalt och sedan bör det översatta innehållet visas korrekt.

Läs mer om att översätta och lokalisera din butik.

Uppdateringar i temaredigeraren visas inte i skyltfönstret

Granska temamallen som du redigerar om skyltfönstret och temaredigeraren inte visar samma information. Du kan behöva göra ändringar för att uppdatera temamallarna för att visa rätt information. Butikskontextualisering gör det möjligt för dig att skapa olika skyltfönster för olika marknader och visa översatt innehåll. Du kan ha haft ett tillfälligt arbete på en specifik marknad eller B2B när du gjorde uppdateringar. Leta reda på innehållet med rullgardinsmenyn Sammanhang i temaredigeraren för att se till att det finns på rätt marknader.

Läs mer om butikskontextualisering.

RTF-redigeraren

Ibland står HTML-kod som läggs till i RTF-redigeraren i konflikt med temakoden. Om problemet finns på en enda sida, till exempel en produktsida, en sida eller en bloggpost, kan det vara på grund av extra HTML. Det kan ibland läggas till genom att kopiera och klistra in text från en annan webbplats.

Granska HTML-koden

Du kan granska HTML-koden i RTF-redigeraren.

Steg:

1. Navigera till sidan i din admin.
2. Klicka på knappen </> Visa HTML för att granska HTML-koden.
3. Leta reda på HTML-koderna som kan orsaka visningsproblem och ta bort dem.
4. Klicka på Spara.

Rensa formateringen

Du kan markera en del av texten och rensa HTML-formateringen.

Steg:

1. Navigera till sidan i din admin.
2. Markera texten med formateringsproblemen.
3. Klicka på knappen 🚫.
4. Klicka på Spara.

Läs mer om RTF-redigeraren.

Sidan omdirigeras till en URL som inte stöds

Verifiera att omdirigeringen har inaktiverats när du går till temaredigeraren om din webbutik innehåller kod som omdirigerar användare till URL:er som inte är kopplade till din butik.

Denna typ av omdirigering kan till exempel läggas till i ett skyltfönster för att leda kunder till olika Shopify-butiker beroende på deras plats. Denna typ av omdirigeringskod kan finnas i ditt tema eller i en app som du har installerat.

Säkerställ att din omdirigering inte stör redigeringsupplevelsen genom att använda en referens till variabeln window.Shopify.designMode i JavaScript för att inaktivera omdirigeringen när du besöker temaredigeraren. Variabeln är inställd på true när skyltfönstret läses in i redigeraren och på false när det inte gör det.

Kodfelmeddelanden

Om det finns ett syntaxfel i din temakod visas varningsmeddelandet HTML error found eller Theme error i temaredigeraren. Felmeddelandet visar den Liquid-fil som innehåller felet.

Varningsmeddelandet The theme you're looking for couldn't be found kan visas när det finns bruten HTML. Det kan finnas många orsaker till att en sida inte kan laddas i temaredigeraren, till exempel följande:

• problem med nätverksanslutning
• ogiltig Liquid-kod i ditt tema

Du kan hitta kodändringarna i din temakod och korrigera koden, eller återställa filen till innan kodändringen.

Steg

1. Klicka på avsnittsfilen .liquid som är länkad i felmeddelandet eller granska filerna för de senaste ändringarna. Detta tar dig till sidan Redigera HTML/CSS och filen öppnas i kodredigeraren.

2. Leta igenom koden i filen och försök hitta ogiltig HTML eller Liquid. Kodredigeraren visar potentiella syntaxfel i rött. Vanliga problem är följande:

   • Extra avslutande HTML-taggar, till exempel en avslutande </div> utan en inledande <div>
   • Extra ej avslutade HTML-taggar, till exempel en inledande <div> utan en avslutande </div>
   • Missformade HTML-taggar, till exempel <div class="my-class" utan en >
   • Missformad Liquid-kod
   • Trasig HTML i en inkluderad fil med temafragment

3. När du har hittat problemet korrigerar du koden i temafilen eller återställer koden genom att välja en tidigare version under Senaste ändringarna.

4. Klicka på Spara.

5. Klicka på Anpassa för att återgå till temaredigeraren och bekräfta att felmeddelandet är borta.

6. Navigera till ditt skyltfönster för att säkerställa att den visas som förväntat.