Språkvelgere for Shopify-temaer: Tilpasning og feilsøking

Shopifys språkvelger er en flott visuell trigger som gir brukerne dine mer kontroll. Hvis den mangler, flyter på feil sted, eller nekter å vises etter at du har byttet eller oppdatert temaet ditt, vil du være glad for at du fant denne artikkelen!

Først og fremst, ikke få panikk. Språkvelgeren lagrer ingen oversettelsesdata, så det handler bare om å få enheten synlig igjen på nettstedet ditt. Les videre, og på under 10 minutter vil du kunne finne ut nøyaktig hvilken av de tre vanlige mistenkte – temaoppdateringer, upubliserte språk eller særegenheter ved lat lasting – som har skylden, og implementere løsningen som trengs.

Hovedpunkter

• Shopifys språkvelgere er bare visuelle utløsere som ikke påvirker nettstedets oversettelsesdata eller SEO.
• De fleste problemer med «forsvinnende språkbrytere» kan spores tilbake til temaoppdateringer, upubliserte språk eller late lasting av overskrifter.
• Det som ser bra ut på datamaskiner skjules ofte på mobil, så test alltid ved vanlige bruddpunkter.
• Hvis visuelle triks ikke er nok, gir Weglot tilnærming deg reell fleksibilitet for plassering og stil uten at det går på bekostning av oversettelseskvaliteten.

Konfigurere språk og oversettelsesmetoder

Først og fremst – før en språkvelger i det hele tatt vises, må Shopify- butikken din faktisk tilby mer enn ett språk. Hvis du allerede har konfigurert oversettelsene dine, kan du gjerne gå videre til neste del. Ellers er det slik du kommer i gang ...

Gå til Innstillinger > Språk > Legg til språk . Velg mellom over 20 støttede alternativer , med alt fra spansk til japansk tilgjengelig. Husk at du må klikke på Publiser ved siden av hvert språk for å gjøre oversettelser tilgjengelige for kundene. Gå glipp av dette trinnet, så vil den nye veksleren ikke ha noe å bytte til.

Shopifys innebygde Translate & Adapt-app er ett alternativ for en flerspråklig butikk. Den oversetter automatisk kjerneinnholdet ditt til to språk gratis, rett fra Innstillinger > Apper -delen etter at du har lagt til språkene dine.

For massekontroll, eksporter nettstedets språkdata som en CSV-fil fra Innstillinger > Språk > Eksporter . Rediger oversettelser samtidig, og importer deretter på nytt – nøkkelen er å aldri berøre Liquid-koden inni de krøllete {{ }}- eller {% %}-parentesene. Det er Shopifys temamotor, ikke ren tekst.

Hvis du foretrekker full manuell kontroll, lar Shopify butikker administrere opptil 20 språk. Se under Innstillinger > Språk > Handlinger > Bestill oversettelser for å bestille profesjonelle oversettelsestjenester direkte fra Shopify-dashbordet ditt.

Når språkene dine er publisert og oversettelsene er implementert, er du klar til å bytte språk.

Finne og konfigurere temaets innebygde bryter

Shopifys temaspråkvelger gjemmer seg lett tilgjengelig – men bare hvis du vet hvor du skal lete!

For temaene Dawn , Craft og Refresh er bryteren gjemt bort i Nettbutikk > Temaer > Tilpass > Bunntekst .

Slå av/på-knappen for å aktivere språkvelger, så dukker den opp nederst på nettstedet ditt. Disse temaene låser bryteren til bunnteksten, så det krever ekstra kode å plassere den i overskriften – det er ingen innebygd bryter for plassering øverst på siden. ( Hint: Vi viser deg hvordan du gjør dette i delen Hvordan legger jeg til en språkvelger i Shopify-overskriften min? nedenfor.)

Sense og Studio holder ting like enkelt. Deres Theme Customizer tilbyr bare bryteren i bunntekstinnstillingene. Se etter «Språkvelger» eller «Lokalisering» – det er der vekslingen skjer. Igjen, plassering av topptekst er ikke mulig med mindre du er trygg på å legge til tilpassede kodebiter.

Premium-temaer som Prestige , Impulse og Motion inkluderer ofte plassering av topptekst i Temainnstillinger > Topptekst eller i delene «Språk og valuta». Det er verdt å skanne både topptekst- og bunntekstpanelene for redigeringsmuligheter – noen temaer tilbyr flere kreative alternativer enn andre.

Hvis du fortsatt bruker et eldre tema, er disse eldre enn Shopifys oppgraderinger til nettbutikk 2.0. Å legge til eller flytte språkvelgeren betyr å gå inn i koden, vanligvis i footer.liquid. Språkvelgeren er ofte hardkodet, så tilpasset plassering betyr å redigere HTML- og Liquid-markup direkte.

Visuelle justeringer avhenger av temaet ditt. De fleste brytere viser enten flagg, språknavn eller begge deler. Skrifter og farger følger nettstedets stil med mindre de overstyres manuelt.

Mobilkunder får en litt annerledes opplevelse. De fleste temaer skjuler språkvelgeren under 768 piksler for å holde handlekurven og navigasjonen oversiktlig, og noen ganger lar de den være synlig gjennom bunntekster eller utvidbare menyer.

Når Weglot Blir ditt beste alternativ

Når Shopifys innebygde alternativer begynner å føles trange, tilbyr Weglot all friheten du trenger!

« Hvis du ønsker mer enn to ekstra språk, ønsker å tilpasse språkvelgeren din til merkevaren din, ønsker automatisk bytting av geolokasjon eller trenger språkutløsere i både topptekst og bunntekst, gir Weglot deg friheten til å gjøre dette, og mye mer. »

– Eugène Ernoult, markedsføringssjef hos Weglot

Oppsettet er raskt. Installer appen, velg språk, og Weglot s språkveksler vises umiddelbart. Hvis du vil gjøre den svært tilgjengelig, kan du bare bruke # Weglot -menyhåndtaket . Sett Weglot inn i en hvilken som helst navigasjonslenke for å lage en klikkbar språkveksler hvor du vil, på kortere tid enn det tar å si « et voila» .

Visuell tilpasning er enkelt når du først har fått det til Weglot på teamet ditt. Dashbordet vårt lar deg forhåndsvise endringer i bryteren din i sanntid, og hoppe over all kompleksitet. Juster plassering, stil eller ikoner, og det du ser er det kundene får.

Dessuten, Weglot laster inn med et asynkront skript som er mindre enn 100 KB, så det vil ikke ødelegge Core Web Vitals . Sørg for å kjøre nettstedet ditt etter PageSpeed ​​Insights for å se selv.

{{ai-banner}}

Hvordan legger jeg til en språkvelger i Shopify-headeren min?

Gå til Tematilpasser > Overskrift > Legg til blokk > Tilpasset væske .

Hvis du vil ha Shopifys innebygde språkvelger i overskriften, kopierer du lokaliseringsskjemakoden fra temaets footer.liquid-fil. Dette skjemaet starter vanligvis med en lokaliseringstag og endrer språkparameteren i URL-en din når kunder velger et nytt språk.

Pakk denne koden inn i en beholder med unike klassenavn for styling. For å sørge for at bryteren din plasseres over faste menyer eller popup-vinduer, legg til CSS som z-index: 10000. Dette lille trinnet holder den synlig og problemfri.

For Weglot -brukere er oppsettet enda enklere. Slett denne koden:

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

i din tilpassede væskeblokk. Weglot oppdager denne beholderen umiddelbart og setter den pent inn i switcheren din.

Test alltid betalingsprosessen etter oppsettet. Temaer bruker noen ganger separate headerfiler eller oppsett under betaling, så veksleren din vises kanskje ikke med mindre disse filene får samme oppdatering.

Vanlige problemer og raske løsninger

Språkvelgere forsvinner noen ganger etter en temaoppdatering, appinstallasjon eller layoutjustering. Ikke bekymre deg – dette er vanligvis bare visuelle problemer, snarere enn noen større feil. La oss feilsøke de fire vanligste hindringene.

1. Hvorfor har jeg to språkvelgere?

Å se to brytere betyr vanligvis både Shopifys innebygde bryter og appens versjon (for eksempel Weglot ) er aktive samtidig. For å rydde opp, gå til bunntekstdelen i tematilpasseren og deaktiver språkvelgeren.

Hvis temaet ditt bruker en lazy-loaded header, Weglot s-bryteren kan vises eller forsvinne etter hvert som elementer lastes inn. For temaer der elementer som overskrifter lastes inn dynamisk, Weglot anbefaler å initialisere switcheren manuelt når headeren er til stede. Dette kan gjøres ved å legge til Weglot -skriptet ditt og deretter kalle:

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

Dette gjøres når headeren er fullstendig lastet inn (for eksempel via en DOM ready-hendelse eller etter en kort forsinkelse). Dette sikrer at bryteren dukker opp på riktig sted hver gang.

Hvis du vil ha ytterligere veiledning om plassering og initialisering av tilpassede språkvelgere, kan du se den offisielle dokumentasjonen for Weglot Shopify-språkvelgeren .

{{sitat-bilde-banner}}

2. Hvorfor mangler språkvelgeren min etter en temaoppdatering?

Byttere forsvinner noen ganger under en temaoppdatering, men oversettelser er sjelden skyld i det.

Først må du dobbeltsjekke at de ekstra språkene dine fortsatt er publisert under Innstillinger > Språk . Hvis de ikke er merket som Publisert , vil de ikke vises noe sted.

Deretter åpner du Nettbutikk > Temaer > Tilpass > Bunntekst for å sørge for at Aktiver språkvelger- bryteren er på. Noen temaer, som Dawn, tilbakestiller denne innstillingen til AV etter oppdateringer.

For det tredje, legg til /fr/ eller /es/ i nettadressen til butikken din. Oversatte sider betyr at språkdataene dine er trygge, og du feilsøker bare et visningsproblem.

Til slutt, se alltid nettstedet ditt på flere enheter – en manglende bryter på mobil er vanligvis en CSS-visningskonflikt, ikke en oversettelsesfeil.

3. Hvorfor vises ikke språkvelgeren på mobilen?

Hvis språkvelgeren din mangler på mobil, er det sannsynligvis med vilje. De fleste Shopify-temaer bruker CSS for å skjule ekstra widgeter under 768 piksler for å gi plass til handlekurv- og menyikoner. Apples retningslinjer for menneskelig grensesnitt krever berøringspunkter på 44 x 44 piksler for at ting skal være berøringsvennlige på små skjermer.

For å fikse dette, legg til en mediespørring i CSS-en din som fester bryteren til nederste høyre hjørne for mobile enheter, med en høy z-indeksverdi for å holde den øverst. Hvis du har lite plass i overskriften, plasser bryteren i mobilens hamburgermeny.

4. Fungerer bryteren etter oppdatering, men ikke ved innlasting av første side?

Weglot s-bryteren vises noen ganger bare etter en manuell oppdatering når temaer bruker lazy-loaded headers. I Dawn 15+ og lignende temaer tegnes headeren av JavaScript etter at hovedsiden lastes inn. Weglot injiserer switcheren sin så snart som mulig, så hvis headeren ikke er klar, lander switcheren på reserveplassen sin – ofte nederst til høyre – eller blinker bort etter et sekund.

Løs dette ved å sette WGNOTINITIALIZED-flagget foran din Weglot Skriptet lastes inn (i theme.liquid). Deretter kaller du det opp Weglot .initialize() manuelt, etter at headeren er gjengitt (ved hjelp av setTimeout eller en DOM ready-hendelse).

Alternativt kan du angi en reserveposisjon i Weglot dashbord, som topptekst først, deretter bunntekst. På denne måten vises bryteren din alltid et sted, selv om toppteksten kommer for sent!

Din komplette implementering Checklist

Før du starter med noen endringer, dupliserer du temaet ditt ved å bruke Nettbutikk > Temaer > Handlinger > Dupliser . Dette gir deg en trygg sandkasse for testing og rettelser.

Dobbeltsjekk deretter at alle målspråk vises som Publisert i Innstillinger > Språk . Sørg for at språkvelgeren din er synlig – noen temaer ønsker overskriftsveksling, andre plasserer den i bunnteksten, så sjekk begge stedene.

Prøv direkte URL-tilgang ved å legge til /es/ eller /fr/ i butikkadressen din. Hvis disse sidene lastes inn, er oversettelsene dine klare, og bare plasseringen av bryteren trenger oppmerksomhet. Forhåndsvis butikken din i banebrytende størrelser – 375 piksler, 768 piksler og 1920 piksler – ved hjelp av faktiske enheter for å fange opp eventuelle responsive særegenheter.

Åpne Chrome DevTools for å måle lastetider for skript. En treg veksling betyr problemer for kunder. Kjør alltid et testkjøp på alle språk, ettersom betalingsmaler elsker å overraske deg. Dokumenter til slutt alle innstillingene dine før temaoppdateringer. På denne måten vil du raskt komme deg etter en uventet tilbakestilling.

Hvis du er klar for en umiddelbar, frustrasjonsfri bytte, med Weglot , språkendringer er ett klikk unna. Prøv vår 14-dagers gratis prøveperiode og se hvor enkelt flerspråklig salg kan være.