Přepínače jazyků Shopify šablon: Přizpůsobení a řešení problémů

Přepínač jazyků Shopify je skvělý vizuální prvek, který uživatelům poskytuje větší kontrolu. Pokud chybí, je umístěn na nesprávném místě nebo se po změně nebo aktualizaci motivu nezobrazuje, budete rádi, že jste narazili na tento článek!

Nejprve nezpanikařte. Přepínač jazyků neobsahuje žádná překladová data, takže stačí pouze znovu zobrazit zařízení na vašem webu. Čtěte dál a za méně než 10 minut budete schopni odborně určit, který z tří obvyklých podezřelých – aktualizace motivu, nezveřejněné jazyky nebo zvláštnosti pomalého načítání – je na vině, a implementovat potřebné řešení.

Klíčové poznatky

• Přepínače jazyků Shopify jsou pouze vizuální spouštěče, které nemají vliv na překladová data webu ani na SEO.
• Většina problémů s "mizejícím přepínačem" souvisí s aktualizacemi témat, nezveřejněnými jazyky nebo líným načítáním hlaviček.
• To, co na počítači vypadá skvěle, se na mobilu často skrývá, proto vždy testujte v běžných bodech zlomu.
• Pokud vám vizuální triky nestačí, přístup společnostiWeglot vám dává skutečnou flexibilitu při umísťování a stylu, aniž by byla obětována kvalita překladu.

Nastavení jazyků a metod překladu

Nejprve je třeba si uvědomit, že než se přepínač jazyků vůbec objeví, musí váš obchod Shopify skutečně nabízet více než jeden jazyk. Pokud jste již překlady nastavili, můžete přejít rovnou k další části. V opačném případě postupujte podle následujících pokynů...

Přejděte do Nastavení > Jazyky > Přidat jazyk. Vyberte si z více než 20 podporovaných možností, k dispozici je vše od španělštiny po japonštinu. Nezapomeňte, že kliknutím na tlačítko Publikovat vedle každého jazyka je nutné, aby překlady byly pro zákazníky živé. Pokud tento krok vynecháte, váš nový přepínač nebude mít co přepínat.

Jednou z možností, jak vytvořit vícejazyčný obchod, je integrovaná aplikace Překlad a přizpůsobení společnosti Shopify. Po přidání jazyků automaticky a zdarma přeloží váš základní obsah do dvou jazyků přímo v sekci Nastavení > Aplikace.

Pro hromadnou kontrolu můžete exportovat jazyková data webu jako CSV z nabídky Nastavení > Jazyky > Exportovat. Hromadně upravte překlady a poté je znovu importujte - klíčové je nikdy se nedotýkat kódu Liquid uvnitř těchto kudrnatých závorek {{ }} nebo {% %}. To je engine motivu Shopify, ne prostý text.

Pokud dáváte přednost ručnímu ovládání, Shopify umožňuje obchodům spravovat až 20 jazyků. V části Nastavení > Jazyky > Akce > Objednat překlady si můžete objednat profesionální překladatelské služby přímo z ovládacího panelu Shopify.

Jakmile jsou jazyky zveřejněny a překlady použity, můžete se pustit do přepínače.

Vyhledání a konfigurace vestavěného přepínače tématu

Přepínač jazyků motivů Shopify je skrytý na očích – ale jen pokud víte, kde ho hledat!

U témat Dawn, Craft a Refresh je přepínač ukryt v nabídce Online Store > Motivy > Přizpůsobit > Zápatí.

Přepněte přepínač Povolit výběr jazyka a ten se objeví v dolní části webu. Tato témata uzamykají přepínač v zápatí, takže jeho umístění do záhlaví vyžaduje další kód - neexistuje žádný vestavěný přepínač pro umístění v horní části stránky.(Tip: Jak to udělat, vám ukážeme níže v části Jak přidat přepínač jazyků do záhlaví Shopify? ).

Sense a Studio jsou stejně jednoduché. Jejich nástroj Theme Customizer nabízí přepínač pouze v nastavení zápatí. Hledejte "Výběr jazyka" nebo "Lokalizace" - tam se přepínání odehrává. Umístění záhlaví opět není možné, pokud si nejste jisti přidáním vlastních fragmentů kódu.

Prémiová témata, jako jsou Prestige, Impulse a Motion, často zahrnují umístění záhlaví v Nastavení tématu > Záhlaví nebo v sekci "Jazyk a měna". Vyplatí se prohlédnout si panely záhlaví i zápatí z hlediska možností úprav - některá témata nabízejí více kreativních možností než jiná.

Pokud stále používáte starší šablonu, jedná se o verzi starší než aktualizace Shopify Online Store 2.0. Přidání nebo přesunutí přepínače vyžaduje zásah do kódu, obvykle v souboru footer.liquid. Přepínač jazyků je často pevně zakódován, takže vlastní umístění vyžaduje přímou úpravu HTML a Liquid značek.

Vizuální úpravy závisí na vašem tématu. Většina přepínačů zobrazuje buď vlajky, názvy jazyků, nebo obojí. Písma a barvy se řídí stylem vašeho webu, pokud nejsou ručně přepsány.

Mobilní zákazníci mají mírně odlišnou zkušenost. Většina šablon skrývá přepínač jazyků pod 768px, aby byl košík a navigace přehledné, někdy jej však nechávají viditelný v zápatí nebo rozbalitelných nabídkách.

Když se Weglot stane vaší nejlepší volbou

Když se vestavěné možnosti služby Shopify začnou zdát stísněné, Weglot nabízí veškerou volnost, kterou potřebujete!

"Pokud se snažíte o více než dva další jazyky, chcete stylizovat svůj přepínač aby odpovídal vaší značce, toužíte po automatickém přepínání zeměpisné polohy nebo potřebujete jazykové spouštěče v záhlaví i zápatí, Weglot vám dává svobodu, abyste to udělali, a ještě mnohem víc."

- Eugène Ernoult, CMO společnosti Weglot

Nastavení je rychlé. Nainstalujte aplikaci, vyberte jazyky a přepínač Weglotse okamžitě zobrazí. Pokud chcete, aby byl přepínač maximálně přístupný, stačí použít trik s menuWeglot. Vložte Weglot do libovolného navigačního odkazu a vytvořte klikatelný přepínač jazyků kdekoli chcete, a to za méně času, než stačíte říct„et voila“.

Přizpůsobení vizuálu je snadné, jakmile máte v týmu Weglot . Náš ovládací panel vám umožní zobrazit náhled změn přepínače v reálném čase a vynechat tak jakoukoli složitost. Upravte umístění, styl nebo ikony a to, co vidíte, dostanou zákazníci.

Weglot se navíc načítá pomocí asynchronního skriptu, který má méně než 100 kB, takže nezatíží váš Core Web Vitals. Nezapomeňte svůj web projít nástrojem PageSpeed Insights a přesvědčte se sami.

{{ai-banner}}

Jak přidám do záhlaví služby Shopify selektor jazyka?

Přejděte do Theme Customizer > Header > Add block > Custom Liquid.

Pokud chcete mít v záhlaví nativní přepínač společnosti Shopify, zkopírujte kód lokalizačního formuláře ze souboru footer.liquid vašeho motivu. Tento formulář obvykle začíná značkou lokalizace a mění parametr locale ve vaší adrese URL, když zákazníci vyberou nový jazyk.

Tento kód zabalte do kontejneru s jedinečnými názvy tříd pro stylování. Chcete-li zajistit, aby přepínač seděl nad lepivými nabídkami nebo vyskakovacími okny, přidejte CSS jako z-index: 10000. Díky tomuto malému kroku bude viditelný a bezproblémový.

Pro uživateleWeglot je nastavení ještě jednodušší. Zahoďte tento kód:

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

v bloku Vlastní kapalina. Weglot tuto nádobu okamžitě rozpozná a úhledně ji vloží do přepínače.

Po nastavení vždy otestujte průběh objednávky. Motivy někdy používají samostatné soubory záhlaví nebo rozvržení během pokladny, takže se váš přepínač nemusí zobrazit, pokud tyto soubory nedostanou stejnou aktualizaci.

Běžné problémy a rychlá řešení

Přepínače jazyků někdy zmizí po aktualizaci motivu, instalaci aplikace nebo úpravě rozvržení. Nebojte se - většinou se jedná jen o vizuální zádrhele, nikoliv o nějakou zásadní chybu. Pojďme vyřešit čtyři nejčastější zádrhele.

1. Proč mám dva přepínače jazyků?

Zobrazení dvou přepínačů obvykle znamená, že je současně aktivní nativní přepínač Shopify i verze vaší aplikace (například Weglot). Chcete-li udělat pořádek, přejděte do části Patička v nástroji Theme Customizer a vypněte nativní přepínač jazyků.

Pokud váš motiv používá líně načítané záhlaví, přepínač Weglotse může při načítání prvků objevit nebo zmizet. U témat, kde se prvky jako záhlaví načítají dynamicky, doporučuje Weglot přepínač inicializovat ručně, jakmile je záhlaví přítomno. To lze provést přidáním skriptu Weglot a následným voláním:

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

To se provede po úplném načtení záhlaví (například prostřednictvím události DOM ready nebo po krátké prodlevě). Tím se zajistí, že se přepínač pokaždé objeví na správném místě.

Další pokyny k umístění a inicializaci vlastního přepínače najdete v oficiální dokumentaci k jazykovému přepínači Weglot .

{{quote-image-banner}}

2. Proč po aktualizaci motivu chybí přepínač jazyků?

Přepínače někdy zmizí během aktualizace tématu, ale překlady jsou na vině jen zřídka.

Nejprve překontrolujte, zda jsou v části Nastavení > Jazyky stále zveřejněny další jazyky. Pokud nejsou označeny jako zveřejněné, nikde se nezobrazí.

Poté otevřete nabídku Internetový obchod > Motivy > Přizpůsobit > Zápatí a zkontrolujte, zda je zapnutý přepínač Povolit výběr jazyka. Některá témata, jako například Dawn, toto nastavení po aktualizacích resetují na OFF.

Za třetí, přidejte do adresy URL svého obchodu /fr/ nebo /es/. Přeložené stránky znamenají, že vaše jazyková data jsou v bezpečí a že řešíte pouze problém se zobrazením.

Nakonec si vždy prohlédněte web na více zařízeních - chybějící přepínač na mobilním zařízení je obvykle konfliktem zobrazení CSS, nikoli chybou překladu.

3. Proč se přepínač jazyků nezobrazuje na mobilních zařízeních?

Pokud vám na mobilním zařízení chybí přepínač jazyků, je to pravděpodobně záměrné. Většina šablon Shopify používá CSS k skrytí dalších widgetů pod 768px, aby se uvolnilo místo pro ikony košíku a nabídky. Pokyny Apple pro uživatelské rozhraní vyžadují dotykové cíle o velikosti 44x44 pixelů, aby bylo možné na malých obrazovkách klepat na prvky.

Chcete-li to napravit, přidejte do CSS dotaz na média, který přepínač připne do pravého dolního rohu pro mobilní zařízení, a to s vysokou hodnotou z-indexu, aby zůstal nahoře. Pokud máte málo místa v záhlaví, umístěte přepínač do mobilní hamburgerové nabídky.

4. Přepínač funguje po obnovení, ale ne při prvním načtení stránky?

Přepínač Weglotse někdy zobrazí až po ručním obnovení, pokud motivy používají líně načtené hlavičky. V Dawn 15+ a podobných tématech se záhlaví vykresluje pomocí JavaScriptu po načtení hlavní stránky. Weglot vstřikuje svůj přepínač co nejdříve, takže pokud záhlaví není připraveno, přepínač přistane na svém záložním místě - často vpravo dole - nebo po sekundě blikne.

Vyřešte to nastavením příznaku WGNOTINITIALIZED před načtením skriptu Weglot (v souboru theme.liquid). Poté zavolejte Weglot.initialize()ručně po vykreslení záhlaví (pomocí setTimeout nebo události DOM ready).

Případně můžete v ovládacím panelu Weglot nastavit náhradní pozici, například nejprve záhlaví a pak zápatí. Tímto způsobem se váš přepínač vždy někde zobrazí, i když se záhlaví opozdí!

Váš kompletní Checklist pro implementaci

Než se pustíte do jakýchkoli změn, zkopírujte své téma pomocí nabídky Internetový obchod > Motivy > Akce > Duplikovat. Tím získáte bezpečné pískoviště pro testování a opravy.

Dále zkontrolujte, zda jsou všechny cílové jazyky zobrazeny jako Publikované v Nastavení > Jazyky. Ujistěte se, že je přepínač jazyků viditelný – některé motivy vyžadují přepínače v záhlaví, jiné je umisťují do zápatí, proto zkontrolujte obě místa.

Vyzkoušejte přímý přístup na adresu URL přidáním /es/ nebo /fr/ do adresy obchodu. Pokud se tyto stránky načtou, jsou překlady připraveny a je třeba věnovat pozornost pouze umístění přepínače. Prohlédněte si svůj obchod v průlomových velikostech - 375px, 768px a 1920px - pomocí skutečných zařízení, abyste zachytili případné chyby v odezvě.

Otevřete nástroj Chrome DevTools a změřte dobu načítání skriptů. Zpožděný přepínač znamená problémy pro nakupující. Vždy proveďte testovací nákup v každém jazyce, protože šablony pokladen vás rády překvapí. Nakonec před aktualizací tématu zdokumentujte všechna nastavení. Tak se rychle vzpamatujete z případného překvapivého resetu.

Pokud jste připraveni na okamžitý přepínač bez frustrace, s aplikací Weglot je změna jazyka otázkou jednoho kliknutí. Vyzkoušejte naši 14denní bezplatnou zkušební verzi a přesvědčte se, jak snadný může být vícejazyčný prodej.