Shopify Språkomkopplare: Förbättra användarupplevelsen

Shopifys språkomkopplare är en användbar inbyggd funktion för flerspråkiga butiker. Funktionen gör det möjligt för kunderna att visa din webbplats på sitt önskade språk, vilket gör att ditt varumärke kan nå ut till nya internationella marknader. Du kan också anpassa funktionen med hjälp av kod, så att den bättre passar ditt varumärkes estetik.

Den inbyggda funktionen har dock sina nackdelar, bland annat avsaknaden av automatisk växling av geolokalisering och begränsade anpassningar jämfört med tredjepartslösningar.

Genom att integrera en dedikerad Shopify-översättningsapp kan butiksägare dra nytta av ytterligare funktioner som förbättrar funktionaliteten, ökar användarengagemanget och sköter själva översättningen. Vår egen Shopify-översättningsapp Weglot erbjuder till exempel unika design- och placeringsalternativ för sin språkomkopplare, vilket gör den anpassningsbar till alla butikslayouter. Dessutom gör den så mycket mer än bara låter användarna byta språk. Men mer om det senare.

I den här artikeln visar vi dig hur du får ut mesta möjliga av Shopifys inbyggda språkomkopplare innan vi utforskar Weglot Shopify, med detaljerade beskrivningar av bästa praxis för att översätta din butik och erbjuda en optimal användarupplevelse.

Viktiga punkter

• Shopifys inbyggda språkomkopplare stöder flera språk, men saknar automatisk geolokalisering och anpassningsmöjligheter jämfört med appar från tredje part.
• Weglot automatisk översättning av webbplatser och omfattande anpassningsalternativ för sin språkväljare. Det möjliggör också helt manuell redigering och förbättrar flerspråkig SEO genom att skapa språkspecifika URL:er och implementera hreflang-taggar.

Shopify Språkomkopplare: En översikt

Först ska vi titta på Shopifys inbyggda språkomkopplare. Som vi nämnde tidigare gör den här funktionen det möjligt för butiksägare att stödja flera språk, vilket naturligtvis förbättrar användarupplevelsen (UX) för internationella kunder.

Kom ihåg att Shopifys språkomkopplare inte automatiskt identifierar och visar språket baserat på användarens inställningar utan ytterligare anpassning eller appar. Den inbyggda funktionen stöder främst manuell språkval av användaren.

För att konfigurera och anpassa Shopifys språkomkopplare måste du följa dessa steg:

1. Från din Shopify-adminsida navigerar du till Inställningar > Språk och lägger till de språk du vill stödja.
2. Gå till Online Store > Themes, välj ditt tema och klicka på Edit code. Leta reda på filen header.liquid i katalogen Sections.
3. Hitta en lämplig plats i filen header.liquid (vanligtvis nära navigeringsmenyn) och klistra in följande snippet:

<form action="{{ routes.root_url }}" method="get">  
 <select name="locale" onchange="this.form.submit()">    
  {% for locale in localization.available_locales %}      
   <option value="{{ locale | escape }}" {% if locale == localization.current_locale %}selected{% endif %}>        
    {{ locale.name }}      
   </option>    
  {% endfor %}  
 </select>
</form>

4. Nu är din switcher på plats. För att matcha din butiks design kan du lägga till anpassade CSS-regler i ditt temas stilmall. Om så krävs kan du använda specifika väljare som select [name="locale"] för att förhindra oavsiktlig styling av andra select-element på en sida.

Här är ett exempel på hur du ändrar bakgrundsfärgen:

select {    
background-color: #fff;    
 border: 1px solid #ccc;    
 padding: 5px;
}

Och så här gör du för att anpassa omkopplarens teckensnitt och textfärg:

select {    
font-family: 'Arial', sans-serif; /* Change font type */    
 font-size: 16px; /* Set font size */    
 color: #333; /* Text color */
}

select option {    
background-color: #f9f9f9; /* Background color for options */    
 color: #555; /* Text color for options */
}

Du kan också lägga till svävningseffekter och ändra storleken på dina gränser:

select {    
border-radius: 5px; /* Rounded corners */    
 border: 2px solid #007bff; /* Blue border */}

select:hover {    
border-color: #0056b3; /* Darker blue on hover */    
background-color: #e9ecef; /* Light gray background on hover */
}

5. När du har gjort dina ändringar klickar du på Spara för att tillämpa dem. Språkomkopplaren ska nu visas i din butik enligt dina inställningar.

Förbättra Shopify-butiker med Weglot språkomkopplare

Shopifys inbyggda språkomkopplare fungerar visserligen, men dedikerade Shopify-översättningsappar som Weglot erbjuder större anpassningsmöjligheter, tillsammans med ytterligare Shopify-översättningsfunktioner för dem som verkligen vill lokalisera butiksupplevelsen för sina internationella kunder.

Till skillnad från Shopifys språkomkopplare översätter Weglot 100 % av webbplatsens innehåll från ett urval av över 110 språk, inklusive kassasidor, e-postmeddelanden och SEO-metadata, och optimerar det för sökmotorer.

Med Weglot drar hela din Shopify-butik nytta av automatisk översättning, vilket påskyndar expansionsprojekt. Jämfört med att anställa enskilda översättare för varje språk, minskar Weglotautomatisering avsevärt tiden till marknaden för nya språkversioner.

Weglotkapacitet stannar dock inte vid automatiserad översättning. Med Weglot får du fullständig redigeringskontroll över det översatta innehållet på din webbplats. Du kan också anlita professionella översättare direkt via plattformen.

Du kan också omedelbart generera översättningar med Weglot AI-språkmodell. Den lär sig av dina instruktioner, ordlista och manuell översättningshistorik för att omedelbart ge dig kontextmedvetna översättningar som låter som du.

Weglot integreras också med Shopifys befintliga funktioner och populära appar från tredje part, inklusive anpassning för teman som Dawn och Prestige. Detta eliminerar besväret med att hantera flera butiker eller manuella översättningar, eftersom du kan lägga till, publicera, avpublicera eller ta bort språk efter behov.

Weglot tar Weglot hand om mer än bara översättning, med flerspråkiga SEO-fördelar i appens kärna. Plattformen skapar automatiskt underdomäner eller underkataloger för varje språkversion och implementerar hreflang-taggar, vilket optimerar din webbplats för lokala sökmotorer. Dessutom har vår Visual Editor möjliggör enkel anpassning av översättningar, vilket gör det möjligt att finjustera dem så att de matchar ditt varumärkes röst.

Det bästa av allt är att det bara tar några ögonblick att installera Weglot anpassa språkväxlaren! Låt oss ta en titt.

Ställa in Weglot på din Shopify Store

Ställa in Weglot på din Shopify butik är väldigt enkelt. Här är en guide som hjälper dig att komma igång:

1. Börja med att besöka Shopify App Store:

• I sökfältet skriver du Weglot och leta reda på Weglot .
• Klicka på Installera och följ anvisningarna för att lägga till den i din butik.

2. När du har installerat appen måste du skapa ett konto:

• Öppna Weglot från din Shopify instrumentbräda.
• Ange din e-postadress och välj ett lösenord.

3. Konfigurera dina språkinställningar:

• Därefter väljer du ditt originalspråk (språket i din Shopify-butik).
• Välj sedan de målspråk som du vill översätta ditt innehåll till.

När du har valt dina språk kommer Weglot automatiskt att skanna allt innehåll i din butik, inklusive metadata och innehåll från tredjepartsappar. Automatisk detektering innebär att du inte behöver samla in innehåll manuellt för översättning, eftersom Weglot gör allt åt dig!

Sedan översätts din webbplats omedelbart med hjälp av ledande maskinöversättning och visas under språkunderkataloger eller underdomäner, beroende på vilken struktur du har valt i Weglot Dashboard.

Anpassa Weglot språkväljare: alternativ för design och placering

Weglotspråkomkopplare har omfattande anpassningsalternativ, så att du kan skräddarsy den efter din butiks varumärke för ett superprofessionellt slutresultat. Så här anpassar du den:

1. Öppna redigeraren för visuell språkomkopplare: Gå till din Weglot och navigera till Inställningar > Språkomkopplare.
2. Ändra utseende: Välj mellan olika format som rullgardinsmenyer, knappar eller flaggor för att visa språkalternativ. Till exempel:lite text
   • Använd flaggor för snabb igenkänning.
   • Välj knappar för en mer framträdande visning.

3. Justera positionen: Du kan placera switchen i nyckelområden som sidhuvud, sidfot eller sidofält, beroende på vad som fungerar bäst för din layout.
4. Ändra färger och stilar: Anpassa färger och stilar i Weglot för att anpassa dig till din butiks varumärke.

Det är viktigt att notera att språkväxlaren enkelt kan flyttas utan att temat behöver modifieras, vilket säkerställer att den förblir tillgänglig och användarvänlig på olika sidor i din butik. För avancerad placering, se vårt avsnitt nedan om att övervinna vanliga utmaningar vid lokalisering av Shopify-butiker.

Avancerad anpassning: Kodningstips för utvecklare

För utvecklare som vill förbättra sina Shopify-butiker med Weglot kan anpassning vara nyckeln till att skapa en skräddarsydd flerspråkig upplevelse. Weglotflexibilitet ger utvecklare möjlighet att skapa skräddarsydda flerspråkiga upplevelser samtidigt som de förblir användarvänliga för icke-tekniska användare.

Här är några kodningstips att tänka på:

Använda CSS för att finjustera utseendet på språkväxlaren

Utvecklare kan ändra stilar som bakgrundsfärg, teckenstorlek och utfyllnad för att matcha butikens varumärke. Ett exempel:

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

Implementering av JavaScript för anpassad funktionalitet

Utvecklare kan använda JavaScript för att utlösa specifika åtgärder när ett språk väljs, t.ex. för att uppdatera andra element på sidan eller spåra språkändringar för analys. Du kan till exempel implementera en händelselyssnare:

document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="locale"]');    
 if (languageSelector) {        
  languageSelector.addEventListener('change', function(event) {            
    // Custom functionality here            
     // For example, track language change event            
     console.log('Language changed to: ' + event.target.value);
   });    
 }
});

Implementering av Weglot för sömlösa sidövergångar mellan olika språk

En av Weglotviktigaste funktioner är det automatiska skapandet av språkspecifika webbadresser, till exempel exempel.com/fr för franska versioner av din webbplats. En bra URL-struktur säkerställer att sökmotorer kan indexera varje språkversion, vilket förbättrar dina flerspråkiga SEO-insatser.

Weglot hjälper kunder att enkelt byta språk under sin shoppingupplevelse, oavsett om de bläddrar bland produkter eller checkar ut. När en kund byter från en t.ex. engelsk produktsida till en motsvarande (t.ex. spansk) sida upplever de en smidig övergång utan att förlora sin plats i shoppingresan. Sådana funktioner kan påverka nyckeltal som tid på webbplatsen och konverteringsfrekvenser, förbättra kundnöjdheten och i slutändan driva global tillväxt.

För att ge ett exempel upplevde Everyone.org - som använde Weglot för att skapa en flerspråkig webbplats på 12 språk - en 40% ökning av det totala antalet besökare, med fransktalande användare som konverterade nästan dubbelt så mycket som den genomsnittliga konverteringsfrekvensen för hela webbplatsen.

Optimering av flerspråkig SEO och upprätthållande av sidkonsistens

Flerspråkig SEO säkerställer att dina produkter kan hittas av användare som söker på olika språk, vilket driver trafik på nätet. En grundläggande aspekt av flerspråkig SEO är att ha en korrekt URL-struktur, och att använda underkataloger hjälper sökmotorer att identifiera och rangordna sidor på olika språk.

Hreflang-taggar spelar en viktig roll i den här processen genom att informera sökmotorer om språk och regionala inriktningar på dina sidor. Detta hjälper till att dirigera användare till den mest relevanta versionen av din webbplats.

Översatta metadata, inklusive titeltaggar och beskrivningar, bidrar ytterligare till bättre sökbarhet. Weglot automatiserar mycket av det tekniska SEO-arbetet, skapar automatiskt språkspecifika webbadresser och implementerar hreflang-taggar utan att kräva manuell intervention.

Dessutom gör Weglot Visual Editor språkordlista det möjligt för butiksägare att upprätthålla en konsekvent översättning.

För att gå en extra mil med flerspråkig SEO kan Shopify-butiksägare göra följande:

• Genomför en lokal sökordsundersökning för varje målmarknad.
• Se till att allt innehåll, inklusive metadata, är korrekt översatt.
• Regelbunden översyn av översättningar för att återspegla förändringar i språktrender.

Kom ihåg att effektiv flerspråkig SEO kan leda till ökade marknadsmöjligheter! Efter att ha implementerat Weglot för flerspråkig optimering upptäckte Ron Dorff, en Shopify-butik, en betydande efterfrågan från den tyska marknaden, som tidigare hade varit outnyttjad. Genom att översätta sitt innehåll och optimera för SEO såg de en otrolig 400% ökning av den internationella försäljningen.

Övervinna vanliga utmaningar i Shopify Store Localization

Lokalisering Shopify butiker kommer med att möta några unika utmaningar, men Weglot erbjuder effektiva lösningar för att underlätta dig genom processen.

För att ändra placeringen av Weglot på en Shopify-webbplats kan du använda någon av följande fyra metoder:

1. Funktion för redigering av växlare

Använd Switcher Editor för att dra och släppa språkomkopplaren direkt på en liveförhandsvisning av din webbplats. Denna metod kräver att din webbplats är live.

2. Lägg till i en meny

Skapa en anpassad språkomkopplare i huvudmenyn genom att länka den till Weglot . Gå till Shopify Admin > Online Store > Navigation, lägg till menyalternativ för varje språk med formatetWeglot(t.ex.Weglot för engelska). Du kan också skapa en rullgardinsmeny för språk.

3. Weglot Alternativ

Infoga följande snippet din Theme.liquid-fil på önskad plats:

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

Denna kod placerar språkomkopplaren där du placerar koden, vilket löser vanliga placeringsbegränsningar som diskuterats i communityforum.

4. Alternativ för omkopplare

Integrera switcher manuellt genom att ändra din Weglot i weglot.liquid. Inkludera alternativet Switchers och ange mål-CSS-väljaren för var du vill att switchen ska visas:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

Se till att ersätta .header-nav med CSS-väljaren för det önskade elementet.

Du kommer också att få följande lokaliseringsfördelar med att använda Weglot:

• Översättning av dynamiskt innehåll: Weglot översätter effektivt JavaScript-genererat innehåll och AJAX-laddade element, vilket säkerställer att allt dynamiskt innehåll fångas upp och översätts.
• Flerspråkig SEO för Shopify: Weglot automatiserar implementeringen av hreflang-taggar och skapar språkspecifika webbplatskartor. Detta kompletterar Shopifys inbyggda SEO-funktioner, så att sökmotorer kan servera rätt språkversion till användare.

• Översättning av Shopify-specifika element: Weglot hanterar översättningar för hela din butik, inklusive kassasidor, e-postmeddelanden och metafält, vilket övervinner begränsningar som beskrivs i Shopify dokumentation. Till exempel, medan kassans språk vanligtvis är fast, tillåter Weglot att kassan återspeglar användarens valda språk.

• Optimera arbetsflöden för översättning: Weglot funktioner för översättningsminne och ordlista hjälper dig att upprätthålla enhetlighet i en stor produktkatalog. Detta säkerställer att termer översätts på ett enhetligt sätt och att ditt varumärkesbudskap är konsekvent på olika språk.

Jämförelse mellan Weglot Shopifys inbyggda språkomkopplare

Shopify ger användarna de grundläggande verktyg som behövs för att översätta sina butiker till flera språk, men det finns begränsningar.

Däremot erbjuder Weglot en omfattande översättningslösning och möter Shopifys begränsningar direkt. Som ett resultat är plattformen ett mer lämpligt alternativ för användare som vill ha en hands-off-strategi för flerspråkig innehållshantering.

Övervinna språkbarriärer: Implementera Weglot på din Shopify Store

Som vi har sett Weglot unika fördelar för Shopify-butiker, vilket gör det till den perfekta lösningen för att övervinna språkbarriärer online. Med Weglotspråkomkopplare får du ytterligare anpassningsmöjligheter för att förbättra användarupplevelsen, medan den Visual Editor översättningar i sitt sammanhang, så att du kan förfina innehållet där det behövs. Du kan till och med beställa professionella översättningar direkt från instrumentpanelen för större noggrannhet.

Weglot integreras med populära Shopify-appar, inklusive smarta sökverktyg och bildgallerier, vilket säkerställer att din butik förblir fullt fungerande på flera språk. Dessutom skapar vår plattform språkspecifika underdomäner eller underkataloger, vilket avsevärt ökar dina SEO-ansträngningar.

Bäst av allt, Weglot är kompatibel med alla innehållshanteringssystem, vilket innebär att om du flyttar bort från Shopify, du behöver inte förlora fördelarna med Weglot.

Starta din 10-dagars gratis provperiod med Weglot idag och njut av en flerspråkig webbplats på några minuter!