Felsökning av ditt webbshopstema

Bilder kan visas annorlunda än du förväntar dig, men det kan bero på att själva bilden inte är kompatibel med hur du använder den i ditt tema. Kontrollera att bildmåtten är korrekta i bilden du använder. Granska följande lista över vanliga visningsproblem som kan uppstå när du laddar upp en inkompatibel bild:

• Om ditt sidhuvud visas större och din logotypbild visas mindre än du förväntar dig, kan det bero på tomrum i logotypbildfilen. Tomrum i logotypbildfilen kan göra att logotypen visas mindre och att sidhuvudet visas större på grund av tomrummet. Redigera bildfilen för att kontrollera att den är beskuren runt logotypen och att det inte finns något tomrum.
• Om din bildspelsbild beskärs är detta avsiktligt för att säkerställa att bilderna visas på samma sätt på mobila enheter som på datorer. Eftersom innehåll visas mycket mindre på en mobilskärm kan många detaljer gå förlorade när innehållet krymps. Istället beskärs innehållet för att säkerställa att detaljerna inte går förlorade. En bild i stående format, som är högre än den är bred, kan också ta upp betydande utrymme på en dator. Det är därför bildspelsbilder 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 bildspelsbilden.

  Alternativ för anpassningsbar höjd: Många Shopify-teman har en inställning för anpassningsbar höjd för bildspel, som justerar bildspelshöjden så att den matchar den första bildspelsbilden, vilket minskar beskärningen på olika skärmstorlekar. Den här funktionen är tillgänglig i alla teman som för närvarande stöds och som har utvecklats av Shoify.

• Om en GIF-bild inte visas korrekt och den har lagts till i ditt digitala skyltfönster 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-bilden i RTF-redigeraren och sedan klicka på Redigera bild. Välj Original i rullgardinsmenyn Bildstorlek. Du kan sedan ändra storlek på GIF-bilden genom att klicka och dra i bildens hörn inåt för att göra den mindre eller utåt för att göra den större.
• Om dina bilder har en betydande färgförändring i ditt digitala skyltfönster jämfört med din originalbild kanske dina bilder inte är i standardfärgerna Röd Grön Blå (sRBG). För att åtgärda denna färgförändring, spara din fil i ett fotoredigeringsprogram som en sRBG. Vanliga termer för detta är ”Webboptimera”, ”Justera bild för webb” eller ”Spara för webb”. Mer information om färgprofiler.
• Om dina produktbilder på dina produktseriesidor inte är justerade kan du behöva justera bildförhållandet i produktbildfilerna så att de har samma förhållande mellan höjd och bredd, och sedan ladda upp produktbilden igen. Du kan även använda en bildredigeringsapp från Shopify App Store.

Granska följande problem för att hitta ditt specifika problem och steg som hjälper dig att felsöka:

• Produkter saknas: Om dina produkter saknas i ditt digitala skyltfönster kan du behöva granska Status och dina Försäljningskanaler i avsnittet Publicering för din produkt i din Shopify admin. Kontrollera att produktstatusen är Aktiv och att produkten är tillgänglig för Webbshop.
• Produktserier saknas: Om dina produktserier saknas i ditt digitala skyltfönster kan du behöva granska Försäljningskanaler i avsnittet Publicering för produktserien i din Shopify admin. Kontrollera att produktserien är tillgänglig för Webbshop och att din produktserie har lagts till i dina menyer.
• Produktserier visas men produkter saknas: Om dina produktserier visas men det saknas produkter, kan du behöva granska eventuella taggfilter för produktserien i dina inställningar för Menyer. Kontrollera att det inte finns några taggar i fältet Filtrera produktserie med taggar som kan leda till att produkter inte visas.
• Valutan är inte korrekt: Om din valuta inte visas korrekt för produkter eller i dina produktserier kan du granska Valutavisning i avsnittet Butiksstandard under Inställningar > Allmänt för att verifiera att det inte finns någon ytterligare kod. Mer information om att formatera hur valuta visas för dina kunder.
• Vissa produkter visas annorlunda: Om vissa produkter eller produktserier visas annorlunda än de andra, granska den Temamall som har tilldelats produkterna eller produktserierna i din Shopify admin.
• Kan inte redigera produkt- eller produktseriemallar: Om standardmallarna för produkter eller produktserier är nedtonade och inte kan väljas i temaredigeraren måste du göra minst 1 produkt eller produktserie tillgänglig för försäljningskanalen Webbshop. Du kan inte redigera dessa standardmallar utan att ha produkter eller produktserier tillgängliga för att förhandsgranska ändringarna. Mer information om att ändra tillgängligheten för en produktserie och att ställa in produkttillgänglighet i dina försäljningskanaler.

Om ditt översatta innehåll inte visas korrekt eller saknas i ditt digitala skyltfönster kan det finnas inaktuella översättningar eller saknade översättningar för innehållet. Innehållet kan även finnas i en specifik mall för en marknad. Kom ihåg att köra automatisk översättning igen, eller manuellt lägga till nya översättningar, när du lägger till nytt innehåll på ditt standardspråk.

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

• Översatt: Innehållet har tillgängliga översättningar.
• Inaktuellt: Innehållet på standardspråket har uppdaterats, men översättningarna återspeglar inte uppdateringarna.
• Oöversatt: Det finns inga översättningar för den här innehållstypen.

När du granskar ditt översatta innehåll, uppdatera allt oöversatt eller inaktuellt innehåll så bör ditt översatta innehåll visas korrekt.

Mer information om att översätta och lokalisera din butik.

Om ditt digitala skyltfönster och din temaredigerare inte visar samma information, granska temamallen som du redigerar. Du kan behöva göra ändringar för att uppdatera dina temamallar så att de visar rätt information.

Marknadsåsidosättningar gör att du kan skapa olika digitala skyltfönster för olika marknader och visa översatt innehåll. Du kan oavsiktligt ha arbetat inom en specifik marknad eller B2B när du gjorde uppdateringar. Hitta innehållet med rullgardinsmenyn Marknad i din temaredigerare för att se till att det finns på rätt marknader.

Mer information om marknadsåsidosättningar.

Alla teman som är tillgängliga i Shopifys temabutik är responsiva teman, vilket innebär att temat anpassar sig efter skärmstorleken. I temaredigeraren kan du byta skärmstorleksvy under temaredigeringen för att verifiera att dina sidor och bilder visas korrekt. Mer information om att visa olika skärmstorlekar i temaredigeraren.

Många av sektionerna och blocken har mobilinställningar som du kan anpassa. Du kan till exempel ställa in Antal kolumner på mobilen i sektionen Relaterade produkter. Du kan granska sektionsinställningarna för mobil för varje mall för att felsöka eventuella visningsproblem på mobila skärmstorlekar.

Vissa temafunktioner kan visas annorlunda på mobilen än på datorn för att verifiera att temat är tillgängligt på alla skärmstorlekar. På en datorskärm kan ditt bildspel till exempel ha en textöverlagring, där texten visas ovanpå bilden, ofta med opacitet för bildfärg eller med textskugga. På mobila skärmstorlekar kan texten dock visas under bildspelet. Detta är en avsiktlig tillgänglighetsfunktion för att texten ska vara läsbar på alla skärmstorlekar. Om texten istället var en överlagring skulle den visas väldigt liten på mobilen, vilket gör den svår att läsa.

Om din sektion med utvalda produktserier eller dina produktseriesidor visar inkonsekventa storlekar eller inte justeras när du visar ditt digitala skyltfönster på mobilen kan det bero på inkonsekventa bildförhållanden. Bildrutnät, såsom produktbilder som visas i en produktserie eller utvald produktserie, är byggda för att vara responsiva för skärmstorleken. Om du har inkonsekventa bildförhållanden för dina bilder i bildrutnätet kan de visas olika beroende på skärmstorleken. Kvadratiska produktbilder som är 2 048 px × 2 048 px fungerar vanligtvis bäst i produktrutnät. Uppdatera dina bilder så att de har ett konsekvent bildförhållande för optimering på alla skärmstorlekar. Mer information om bildförhållande.

Ibland hamnar HTML-kod som läggs till i RTF-redigeraren i konflikt med temakoden. Om problemet finns på en enskild sida, till exempel en produktsida, sida eller bloggpost, kan det bero på överflödig HTML. Den kan ibland läggas till när man kopierar och klistrar 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 adminpanel.
2. Klicka på knappen Visa HTML för att granska HTML-koden.
3. Leta reda på all HTML-kod som kan orsaka visningsproblem och ta bort den.
4. Klicka på Spara.

Rensa formateringen

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

Steg:

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

Mer information om RTF-redigeraren.

Om ditt digitala skyltfönster innehåller kod som omdirigerar användare till URL:er som inte är kopplade till din butik, kontrollera att omdirigeringen har inaktiverats när du besöker temaredigeraren.

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

För att verifiera att din omdirigering inte stör redigeringsupplevelsen, använd en referens till variabeln window.Shopify.designMode i JavaScript för att avaktivera omdirigeringen när du besöker temaredigeraren. Den här variabeln är inställd på true när det digitala skyltfönstret läses in i redigeraren och false när det inte gör det.

Om du har fällbara block eller andra temablock som visar samma innehåll på alla produktsidor måste du konfigurera dynamiska källor med metafält. Detta inträffar vanligtvis när handlare lägger till produktspecifik information, såsom ingredienser eller skötselråd för en produkt, men informationen visas på alla produkter.

Fällbara block visar samma text på alla produkter

När du lägger till innehåll direkt i ett hopfällbart block i din temaredigerare visas det innehållet på alla produktsidor. För att visa produktspecifikt innehåll måste du använda dynamiska källor med metafält:

1. Gå till Inställningar > Metafält > Produkter i din Shopify admin.
2. Klicka på Lägg till definition.
3. Ange ett namn för ditt metafält och klicka sedan på Välj innehållstyp.
4. Välj Text och Flerradig text.
5. Klicka på Spara.
6. Gå till en produktsida i din adminpanel och bläddra till avsnittet för metafält längst ner på sidan.
7. Lägg till ditt produktspecifika innehåll i det metafält du skapade.
8. Gå till produktmallen i din temaredigerare och hitta avsnittet Hopfällbar rad.
9. I inställningen Radinnehåll klickar du på knappen .
10. Välj ditt metafält bland de tillgängliga alternativen.
11. Spara dina ändringar.

Nu kommer varje produkt att visa sitt eget innehåll när metafältet är ifyllt, och inget innehåll visas om metafältet är tomt för den produkten.

Mer information om att visa metafält i din webbshop och att använda metafält och metaobjekt med dynamiska källor.

Om det finns ett syntaxfel i din temakod visas varningsmeddelandet HTML-fel hittades eller Temafel i din temaredigerare. Felmeddelandet visar vilken Liquid-fil som innehåller felet.

Varningsmeddelandet Temat du letar efter kunde inte hittas kan visas när det finns skadad HTML. En sida kan misslyckas med att läsas in i temaredigeraren av många anledningar, till exempel följande:

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

Du kan hitta kodändringarna i din temakod och korrigera koden. Om du kan identifiera den påverkade befintliga filen kan du återställa den till en tillgänglig tidigare version i kodredigerarens vy Tidslinje.

Steg:

1. Klicka på .liquid-sektionsfilen som är länkad i felmeddelandet eller granska filerna för de senaste ändringarna. Detta tar dig till sidan Redigera HTML/Cascading Style Sheets (CSS) och filen öppnas i kodredigeraren.
2. Gå igenom koden i filen och försök att hitta ogiltig HTML eller Liquid. Kodredigeraren visar potentiella syntaxfel i rött. Vanliga problem är bland annat:
   • Extra stängande HTML-taggar, till exempel en stängande </div> utan en öppnande <div>
   • Extra ostängda HTML-taggar, till exempel en öppnande <div> utan en stängande </div>
   • Felaktigt formaterade HTML-taggar, till exempel <div class="my-class" utan >
   • Felaktigt formaterad Liquid-kod
   • Felaktig HTML i en inkluderad temafragmentfil
3. När du har hittat problemet korrigerar du koden i temafilen. Om du använder kodredigerarens vy Tidslinje för att välja en tidigare version och Återställ innehåll ersätts hela filens innehåll. Kopiera först det aktuella filinnehållet till en säker plats om du vill behålla några ändringar.
4. Klicka på Spara.
5. Klicka på Redigera tema för att återgå till temaredigeraren och bekräfta att felmeddelandet är borta.
6. Gå till ditt digitala skyltfönster för att verifiera att det visas som förväntat.

Felmeddelandet ”Exceeded maximum number of unique handles”

Om ett Liquid-felmeddelande som ”Exceeded maximum number of unique handles for all_products” visas på din startsida, innebär det vanligtvis att du har lagt till för många sektioner med utvalda produkter på din startsida (vanligtvis fler än 20 sektioner i de flesta teman).

Lös problemet så här:

1. I din Shopify-admin går du till Webbutik > Teman.
2. Leta reda på ditt nuvarande tema och klicka på Redigera tema.
3. Gå till din startsida.
4. Ta bort några sektioner med utvalda produkter för att hålla dig inom temats gränser.
5. Överväg att i stället använda sektioner med utvalda produktserier, som kan visa flera produkter mer effektivt och förbättra din butiks prestanda.

Betalningsikoner ingår vanligtvis som standard i de flesta temans sidfötter för att visa kunder vilka betalningsmetoder du accepterar. Om betalningsikoner inte visas i ditt temas sidfot kan du kontrollera följande:

1. I din temaredigerare navigerar du till avsnittet Sidfot och verifierar att inställningen Visa betalningsikoner är aktiverad.
2. I din Shopify-admin går du till Inställningar > Betalningar och verifierar att det finns minst en aktiv betalningsmetod. Vissa betalningsmetoder kan kräva att kontokonfigureringen slutförs innan deras ikoner visas.
3. Om du använder en betalnings-gateway från en tredjepart kanske betalningsikonerna inte visas på grund av plattformsbegränsningar.

Om du har verifierat dessa inställningar och betalningsikonerna fortfarande inte visas kan du behöva få support för ditt tema.