Språkväxlare för Shopify-teman: Anpassning och felsökning

Shopifys språkomkopplare är en utmärkt visuell trigger som ger dina användare mer kontroll. Om den saknas, flyter på fel plats eller vägrar att visas sedan du bytte eller uppdaterade ditt tema, kommer du att vara glad att du hittade den här artikeln!

Först och främst, drabbas inte av panik. Språkomkopplaren innehåller inga översättningsdata, så det handlar bara om att göra enheten synlig igen på din webbplats. Läs vidare och på mindre än 10 minuter kommer du att kunna identifiera vilken av de tre vanligaste orsakerna – temauppdateringar, opublicerade språk eller problem med lazy loading – som är skyldig, och implementera den lösning som behövs.

Viktiga slutsatser

• Shopifys språkväxlare är bara visuella utlösare som inte påverkar webbplatsens översättningsdata eller SEO.
• De flesta problem med "switcher som försvinner" kan härledas till temauppdateringar, opublicerade språk eller headers som laddar för långsamt.
• Det som ser bra ut på desktop döljs ofta på mobilen, så testa alltid vid vanliga brytpunkter.
• Om det inte räcker med visuella knep ger Weglotmetod dig verklig flexibilitet för placering och stil utan att offra översättningskvaliteten.

Konfigurera språk och översättningsmetoder

Först och främst – innan en språkomkopplare ens visas måste din Shopify -butik faktiskt erbjuda mer än ett språk. Om du redan har konfigurerat dina översättningar kan du gå vidare till nästa avsnitt. Annars kan du börja så här...

Gå till Inställningar > Språk > Lägg till språk. Välj bland över 20 alternativ som stöds, med allt från spanska till japanska tillgängligt. Kom ihåg att du måste klicka på Publicera bredvid varje språk för att översättningarna ska bli live för kunderna. Om du missar det här steget kommer din nya switcher inte att ha något att byta.

Shopifys inbyggda Translate & Adapt-app är ett alternativ för en flerspråkig butik. Den översätter automatiskt ditt kärninnehåll till två språk gratis, direkt från avsnittet Inställningar > Appar efter att du har lagt till dina språk.

För masskontroll kan du exportera webbplatsens språkdata som en CSV-fil från Inställningar > Språk > Exportera. Redigera översättningar i bulk och importera sedan igen - nyckeln är att aldrig röra Liquid-koden inuti de lockiga {{ }} eller {% %} parenteserna. Det är Shopifys temamotor, inte vanlig text.

Om du föredrar full manuell kontroll låter Shopify butiker hantera upp till 20 språk. Titta under Inställningar > Språk > Åtgärder > Beställ översättningar för att beställa professionella översättningstjänster direkt från din Shopify-instrumentpanel.

När dina språk har publicerats och översättningarna har tillämpats är du redo att ta itu med switchen.

Hitta och konfigurera den inbyggda switchen i ditt tema

Shopifys temaväxlare är lätt att hitta – men bara om du vet var du ska leta!

För teman som Dawn, Craft och Refresh finns omkopplaren undangömd i Online Store > Teman > Anpassa > Sidfot.

Vrid på knappen Aktivera språkväljare så dyker den upp längst ner på din webbplats. Dessa teman låser växlaren till sidfoten, så det krävs extra kod för att placera den i sidhuvudet - det finns ingen inbyggd växling för placering högst upp på sidan.(Tips: Vi visar dig hur du gör detta i avsnittet Hur lägger jag till en språkväljare i min Shopify-header? nedan).

Sense och Studio håller saker och ting lika okomplicerade. Deras Theme Customizer erbjuder endast växlaren i sidfotens inställningar. Leta efter "Language selector" eller "Localization" - det är där växlingen sker. Återigen är det inte möjligt att placera rubriker om du inte är säker på att du kan lägga till anpassade kodavsnitt.

Premiumteman som Prestige, Impulse och Motion inkluderar ofta placering av sidhuvud i temainställningarna > Sidhuvud eller i avsnitten "Språk och valuta". Det är värt att undersöka redigeringsmöjligheterna i både sidhuvud och sidfot - vissa teman erbjuder mer kreativa alternativ än andra.

Om du fortfarande använder ett äldre tema är dessa äldre än Shopifys uppgraderingar av Online Store 2.0. För att lägga till eller flytta växlaren måste du gå in i koden, vanligtvis i footer.liquid. Språkväxlaren är ofta hårdkodad, så för att placera den på ett anpassat sätt måste du redigera HTML- och Liquid-markeringen direkt.

Visuella justeringar beror på ditt tema. De flesta växlare visar antingen flaggor, språknamn eller båda. Typsnitt och färger följer webbplatsens stil om de inte åsidosätts manuellt.

Mobila kunder får en något annorlunda upplevelse. De flesta teman döljer språkomkopplaren under 768px för att hålla kundvagnen och navigeringen tydlig, men ibland är den synlig i sidfoten eller i utdragbara menyer.

När Weglot blir ditt bästa alternativ

När Shopify's inbyggda alternativ börjar kännas trånga, Weglot erbjuder all den frihet du behöver!

"Om du siktar på mer än två ytterligare språk, vill utforma din switcher för att matcha ditt varumärke, längtar efter automatisk växling av geolokalisering eller behöver språktriggers i både sidhuvud och sidfot, ger Weglot dig friheten att göra detta och mycket mer."

- Eugène Ernoult, CMO på Weglot

Installationen går snabbt. Installera appen, välj språk, så visas Weglotspråkväxlare direkt. Om du vill göra den extra tillgänglig använder du bara Weglot. Lägg till Weglot i valfri navigeringslänk för att skapa en klickbar språkväxlare där du vill, pånolltid.

Visuell anpassning är lätt när du har Weglot i ditt team. Vår instrumentpanel låter dig förhandsgranska ändringar i din switcher i realtid och hoppa över all komplexitet. Justera placering, stil eller ikoner, och det du ser är vad kunderna får.

Dessutom laddas Weglot med ett asynkront skript som är mindre än 100 kB, så det kommer inte att påverka dina Core Web Vitals. Var noga med att köra din webbplats förbi PageSpeed Insights för att se själv.

{{ai-banner}}

Hur lägger jag till en språkväljare i min Shopify-header?

Gå till Theme Customizer > Header > Add block > Custom Liquid.

Om du vill ha Shopifys inbyggda växlare i ditt huvud kopierar du koden för lokaliseringsformuläret från ditt temas footer.liquid-fil. Det här formuläret börjar vanligtvis med en lokaliseringstagg och ändrar locale-parametern i din URL när kunderna väljer ett nytt språk.

Packa in den här koden i en behållare med unika klassnamn för styling. För att se till att din switcher sitter ovanför klibbiga menyer eller popup-fönster, lägg till CSS som z-index: 10000. Detta lilla steg håller den synlig och problemfri.

För Weglot är installationen ännu enklare. Släpp den här koden:

<div id="weglot_here"></div>

i ditt anpassade vätskeblock. Weglot upptäcker omedelbart denna behållare och släpper snyggt in din switcher.

Efter installationen ska du alltid testa ditt kassaflöde. Teman använder ibland separata header-filer eller layouter under utcheckningen, så din switcher kanske inte visas om inte dessa filer får samma uppdatering.

Vanliga problem och snabba lösningar

Språkväxlare försvinner ibland efter en temauppdatering, appinstallation eller layoutjustering. Oroa dig inte - det här är vanligtvis bara visuella problem, snarare än något större fel. Låt oss felsöka de fyra vanligaste vägspärrarna.

1. Varför har jag två språkväxlar?

Att se två växlare betyder vanligtvis att både Shopifys inbyggda växlare och din apps version (t.ex. Weglot) är aktiva samtidigt. För att städa upp saker och ting, gå till Theme Customizer's Footer-sektion och inaktivera den inbyggda språkväljaren.

Om ditt tema använder en lazy-loaded header kan Weglotswitcher dyka upp eller försvinna när element laddas. För teman där element som rubriker laddas dynamiskt rekommenderar Weglot att man initierar switchen manuellt när rubriken är närvarande. Detta kan göras genom att lägga till ditt Weglot och sedan anropa:

javascript
Weglot.initialize({
	api_key: 'YOUR_API_KEY',  
    // other options
});

Detta görs när sidhuvudet har laddats helt (t.ex. via en DOM ready-händelse eller efter en kort fördröjning). Detta säkerställer att switchen dyker upp på rätt plats varje gång.

För ytterligare vägledning om anpassad placering och initialisering av växlaren, se den officiella dokumentationen för Weglot -språkväxlaren.

{{quote-image-banner}}

2. Varför saknas min språkomkopplare efter en temauppdatering?

Switchers försvinner ibland under en temauppdatering, men det är sällan fel på översättningarna.

Dubbelkolla först att dina extra språk fortfarande är publicerade under Inställningar > Språk. Om de inte är markerade som Publicerade kommer de inte att visas någonstans.

Öppna sedan Online Store > Themes > Customize > Footer för att kontrollera att reglaget Aktivera språkväljare är aktiverat. Vissa teman, som Dawn, återställer den här inställningen till OFF efter uppdateringar.

För det tredje ska du lägga till /fr/ eller /es/ i din butiks webbadress. Översatta sidor innebär att dina språkdata är säkra och att du bara felsöker ett visningsproblem.

Slutligen, visa alltid din webbplats på flera enheter - en saknad switcher på mobilen är vanligtvis en CSS-displaykonflikt, inte ett översättningsfel.

3. Varför visas inte språkomkopplaren på mobilen?

Om din språkomkopplare saknas på mobilen är det troligtvis avsiktligt. De flesta Shopify-teman använder CSS för att dölja extra widgets under 768px för att göra plats för varukorgs- och menyikoner. Apples riktlinjer för användargränssnitt kräver 44x44 pixlar stora pekmål för att det ska gå att trycka på små skärmar.

För att åtgärda detta kan du lägga till en mediafråga i din CSS som placerar switchen i det nedre högra hörnet för mobila enheter, med ett högt z-indexvärde för att hålla den överst. Om du har ont om utrymme i sidhuvudet kan du placera switchen i hamburgermenyn på din mobil.

4. Switcher fungerar efter uppdatering men inte på första sidladdningen?

Weglotswitcher visas ibland först efter en manuell uppdatering när teman använder lazy-loaded headers. I Dawn 15+ och liknande teman ritas sidhuvudet av JavaScript efter att huvudsidan har laddats. Weglot injicerar sin switcher så snart som möjligt, så om sidhuvudet inte är klart landar switcher på sin reservplats - ofta längst ner till höger - eller blinkar bort efter en sekund.

Lös detta genom att ställa in flaggan WGNOTINITIALIZED innan ditt Weglot laddas (i theme.liquid). Anropa sedan Weglot.initialize() manuellt efter att sidhuvudet har renderats (med setTimeout eller en DOM ready-händelse).

Alternativt kan du ställa in en reservposition i Weglot instrumentpanel, som rubrik först, sedan sidfot. På så sätt visas din switcher alltid någonstans, även om rubriken är sen att komma fram!

Din kompletta Checklist för implementering

Först och främst, innan du påbörjar några ändringar, duplicera ditt tema med Online Store > Teman > Åtgärder > Duplicera. Detta ger dig en säker sandlåda för testning och korrigeringar.

Kontrollera sedan att alla målspråk visas som Publicerade under Inställningar > Språk. Se till att språkväxlaren är synlig – vissa teman har växlar i sidhuvudet, andra i sidfoten, så kontrollera båda platserna.

Prova direkt URL-åtkomst genom att lägga till /es/ eller /fr/ till din butiksadress. Om dessa sidor laddas är dina översättningar klara och det är bara placeringen av switcher som behöver åtgärdas. Förhandsgranska din butik i genombrottsstorlekar - 375px, 768px och 1920px - med hjälp av faktiska enheter för att fånga upp eventuella responsiva konstigheter.

Öppna Chrome DevTools för att mäta laddningstider för skript. En laggig switcher innebär problem för kunderna. Kör alltid ett testköp på alla språk, eftersom kassamallar älskar att överraska dig. Slutligen, dokumentera alla dina inställningar innan du uppdaterar temat. På så sätt återhämtar du dig snabbt från en överraskande återställning.

Om du är redo för en omedelbar, frustrationsfri växling, med Weglot är språkbyten ett klick bort. Prova vår 14-dagars gratisversion och se hur enkelt det kan vara att sälja på flera språk.