Przełączniki języków w motywach Shopify: Dostosowywanie i rozwiązywanie problemów.

Przełącznik języka Shopify to świetny element wizualny, który zapewnia użytkownikom większą kontrolę. Jeśli go brakuje, znajduje się w niewłaściwym miejscu lub nie wyświetla się po zmianie lub aktualizacji motywu, z pewnością ucieszysz się, że trafiłeś na ten artykuł!

Po pierwsze, nie panikuj. Przełącznik języka nie przechowuje żadnych danych tłumaczeniowych, więc wystarczy tylko przywrócić widoczność urządzenia w witrynie. Czytaj dalej, a w mniej niż 10 minut będziesz w stanie fachowo wskazać, która z trzech typowych przyczyn – aktualizacje motywu, nieopublikowane języki lub dziwne zachowanie funkcji lazy loading – jest odpowiedzialna za problem, i wdrożyć niezbędne rozwiązanie.

Kluczowe wnioski

• Przełączniki języka Shopify to tylko wizualne wyzwalacze, które nie mają wpływu na dane tłumaczenia witryny ani SEO.
• Większość przypadków "znikającego przełącznika" wiąże się z aktualizacjami motywów, niepublikowanymi językami lub leniwym ładowaniem nagłówków.
• To, co wygląda świetnie na komputerach stacjonarnych, często ukrywa się na urządzeniach mobilnych, więc zawsze testuj w typowych punktach przerwania.
• Jeśli wizualne sztuczki nie wystarczą, podejścieWeglot zapewnia prawdziwą elastyczność w zakresie umieszczania i stylu bez poświęcania jakości tłumaczenia.

Konfigurowanie języków i metod tłumaczenia

Po pierwsze – zanim pojawi się przełącznik języka, Twój sklep Shopify musi faktycznie oferować więcej niż jeden język. Jeśli masz już skonfigurowane tłumaczenia, możesz przejść do następnej sekcji. W przeciwnym razie oto jak zacząć...

Przejdź do Ustawienia > Języki > Dodaj język. Wybierz jedną z ponad 20 obsługiwanych opcji, od hiszpańskiego po japoński. Pamiętaj, że kliknięcie przycisku Opublikuj obok każdego języka jest konieczne, aby tłumaczenia były dostępne dla klientów. Jeśli pominiesz ten krok, Twój nowy przełącznik nie będzie miał nic do przełączenia.

Wbudowana aplikacja Shopify Translate & Adapt to jedna z opcji dla sklepu wielojęzycznego. Automatycznie tłumaczy ona podstawową zawartość na dwa języki za darmo, bezpośrednio z sekcji Ustawienia > Aplikacje po dodaniu języków.

Aby uzyskać kontrolę zbiorczą, wyeksportuj dane językowe witryny jako plik CSV z menu Ustawienia > Języki > Eksportuj. Edytuj tłumaczenia zbiorczo, a następnie ponownie zaimportuj - kluczem jest, aby nigdy nie dotykać kodu Liquid wewnątrz tych nawiasów klamrowych {{ }} lub {% %}. To silnik szablonów Shopify, a nie zwykły tekst.

Jeśli wolisz pełną kontrolę ręczną, Shopify pozwala sklepom zarządzać maksymalnie 20 językami. Zajrzyj do sekcji Ustawienia > Języki > Działania > Zamów tłumaczenia, aby zamówić profesjonalne usługi tłumaczeniowe bezpośrednio z pulpitu nawigacyjnego Shopify.

Po opublikowaniu języków i zastosowaniu tłumaczeń możesz zająć się przełącznikiem.

Znajdowanie i konfigurowanie wbudowanego przełącznika motywu

Przełącznik języka motywu Shopify jest ukryty w widocznym miejscu – ale tylko jeśli wiesz, gdzie szukać!

W przypadku motywów Dawn, Craft i Refresh przełącznik znajduje się w sekcji Sklep internetowy > Motywy > Dostosuj > Stopka.

Przestaw przełącznik wyboru języka, a pojawi się on na dole witryny. Te szablony blokują przełącznik w stopce, więc umieszczenie go w nagłówku wymaga dodatkowego kodu - nie ma wbudowanego przełącznika do umieszczenia na górze strony.(Wskazówka: pokażemy, jak to zrobić w sekcji Jak dodać przełącznik języka do nagłówka Shopify poniżej).

Sense i Studio są równie proste. Ich Theme Customizer oferuje przełącznik tylko w ustawieniach stopki. Poszukaj "Selektora języka" lub "Lokalizacji" - tam odbywa się przełączanie. Ponownie, umieszczenie nagłówka nie jest możliwe, chyba że masz pewność co do dodawania niestandardowych fragmentów kodu.

Motywy premium, takie jak Prestige, Impulse i Motion, często uwzględniają umieszczenie nagłówka w ustawieniach motywu > Nagłówek lub w sekcjach "Język i waluta". Warto przeskanować panele nagłówka i stopki pod kątem możliwości edycji - niektóre szablony oferują więcej kreatywnych opcji niż inne.

Jeśli nadal korzystasz ze starszego motywu, oznacza to, że powstał on przed aktualizacją Shopify Online Store 2.0. Dodanie lub przeniesienie przełącznika wymaga wprowadzenia zmian w kodzie, zazwyczaj w pliku footer.liquid. Przełącznik języka jest często zakodowany na stałe, więc niestandardowe umiejscowienie wymaga bezpośredniej edycji kodu HTML i Liquid.

Zmiany wizualne zależą od motywu. Większość przełączników pokazuje flagi, nazwy języków lub oba te elementy. Czcionki i kolory są zgodne ze stylem witryny, chyba że zostaną ręcznie zastąpione.

Użytkownicy mobilni mają nieco inne wrażenia. Większość motywów ukrywa przełącznik języka poniżej 768 pikseli, aby zachować przejrzystość koszyka i nawigacji, czasami pozostawiając go widocznym w stopkach lub rozwijanych menu.

Kiedy Weglot staje się najlepszą opcją

Gdy wbudowane opcje Shopify zaczynają wydawać się ciasne, Weglot oferuje całą wolność, jakiej potrzebujesz!

"Jeśli celujesz w więcej niż dwa dodatkowe języki, chcesz stylizować swój przełącznik aby pasował do Twojej marki, pragniesz automatycznego przełączania geolokalizacji lub potrzebujesz wyzwalaczy językowych zarówno w nagłówku, jak i stopce, Weglot daje Ci swobodę robienia tego i wiele więcej".

- Eugène Ernoult, CMO w firmie Weglot

Konfiguracja jest szybka. Zainstaluj aplikację, wybierz języki, a przełącznik Weglotpojawi się natychmiast. Jeśli chcesz, aby był on wyjątkowo dostępny, po prostu użyj sztuczki z uchwytem menuWeglot. Wstaw Weglot do dowolnego linku nawigacyjnego, aby utworzyć klikalny przełącznik języka w dowolnym miejscu, w czasie krótszym niż potrzeba, aby powiedzieć„et voila”.

Dostosowanie wizualne jest łatwe, gdy masz Weglot w swoim zespole. Nasz pulpit nawigacyjny umożliwia podgląd zmian w przełączniku w czasie rzeczywistym, pomijając wszelkie zawiłości. Zmień rozmieszczenie, styl lub ikony, a to, co widzisz, jest tym, co otrzymują klienci.

Co więcej, Weglot ładuje się za pomocą asynchronicznego skryptu, który zajmuje mniej niż 100 KB, więc nie uszkodzi Core Web Vitals. Pamiętaj, aby uruchomić swoją witrynę w PageSpeed Insights, aby przekonać się samemu.

{{ai-banner}}

Jak dodać selektor języka do nagłówka Shopify?

Przejdź do Theme Customizer > Header > Add block > Custom Liquid.

Jeśli chcesz mieć natywny przełącznik Shopify w nagłówku, skopiuj kod formularza lokalizacji z pliku footer.liquid szablonu. Formularz ten zazwyczaj zaczyna się od tagu lokalizacji i zmienia parametr locale w adresie URL, gdy klienci wybierają nowy język.

Zawiń ten kod w kontenerze z unikalnymi nazwami klas do stylizacji. Aby upewnić się, że przełącznik znajduje się nad lepkimi menu lub wyskakującymi okienkami, dodaj CSS, taki jak z-index: 10000. Ten mały krok sprawi, że będzie on widoczny i bezproblemowy.

Dla użytkownikówWeglot konfiguracja jest jeszcze łatwiejsza. Upuść ten kod:

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

w bloku Custom Liquid. Weglot natychmiast wykrywa ten pojemnik i zgrabnie upuszcza go w przełączniku.

Po zakończeniu konfiguracji zawsze przetestuj przepływ płatności. Motywy czasami używają oddzielnych plików nagłówkowych lub układów podczas realizacji zakupu, więc przełącznik może się nie pojawić, jeśli pliki te nie zostaną zaktualizowane.

Najczęstsze problemy i szybkie rozwiązania

Przełączniki języków czasami znikają po aktualizacji motywu, instalacji aplikacji lub modyfikacji układu. Nie martw się - są to zwykle tylko wizualne czkawki, a nie poważne awarie. Rozwiążmy cztery najczęstsze blokady.

1. Dlaczego mam dwa przełączniki języka?

Widok dwóch przełączników zwykle oznacza, że zarówno natywny przełącznik Shopify, jak i wersja aplikacji (np. Weglot) są aktywne w tym samym czasie. Aby uporządkować sytuację, przejdź do sekcji Stopka narzędzia Theme Customizer i wyłącz selektor języka natywnego.

Jeśli motyw używa leniwie ładowanego nagłówka, przełącznik Weglotmoże pojawiać się lub znikać podczas ładowania elementów. W przypadku motywów, w których elementy takie jak nagłówki są ładowane dynamicznie, Weglot zaleca ręczną inicjalizację przełącznika po pojawieniu się nagłówka. Można to zrobić poprzez dodanie skryptu Weglot , a następnie wywołanie:

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

Odbywa się to po pełnym załadowaniu nagłówka (na przykład poprzez zdarzenie DOM ready lub po krótkim opóźnieniu). Zapewnia to, że przełącznik pojawia się za każdym razem we właściwej lokalizacji.

Więcej wskazówek dotyczących umieszczania i inicjalizacji niestandardowego przełącznika znajdziesz w oficjalnej dokumentacji przełącznika języków Weglot .

{{quote-image-banner}}

2. Dlaczego po aktualizacji motywu zniknął przełącznik języka?

Przełączniki czasami znikają podczas aktualizacji motywu, ale rzadko winne są tłumaczenia.

Najpierw sprawdź, czy dodatkowe języki są nadal opublikowane w Ustawienia > Języki. Jeśli nie są oznaczone jako opublikowane, nigdzie się nie pojawią.

Następnie otwórz Sklep internetowy > Motywy > Dostosuj > Stopka, aby upewnić się, że przełącznik Włącz wybór języka jest włączony. Niektóre szablony, takie jak Dawn, resetują to ustawienie do OFF po aktualizacji.

Po trzecie, dodaj /fr/ lub /es/ do adresu URL sklepu. Przetłumaczone strony oznaczają, że dane językowe są bezpieczne, a Ty rozwiązujesz tylko problem z wyświetlaniem.

Wreszcie, zawsze przeglądaj swoją witrynę na wielu urządzeniach - brak przełącznika na urządzeniach mobilnych jest zwykle konfliktem wyświetlania CSS, a nie usterką tłumaczenia.

3. Dlaczego przełącznik języka nie wyświetla się na urządzeniach mobilnych?

Jeśli na urządzeniu mobilnym brakuje przełącznika języka, prawdopodobnie jest to zamierzone działanie. Większość motywów Shopify wykorzystuje CSS do ukrywania dodatkowych widżetów poniżej 768 pikseli, aby zrobić miejsce dla ikon koszyka i menu. Wytyczne Apple dotyczące interfejsu użytkownika wymagają, aby elementy dotykowe miały rozmiar 44 x 44 pikseli, aby można było je naciskać na małych ekranach.

Aby to naprawić, dodaj zapytanie o media w CSS, które przypnie przełącznik do prawego dolnego rogu dla urządzeń mobilnych, z wysoką wartością z-index, aby utrzymać go na górze. Jeśli brakuje ci miejsca w nagłówku, umieść przełącznik w mobilnym menu hamburgera.

4. Przełącznik działa po odświeżeniu, ale nie przy pierwszym załadowaniu strony?

Przełącznik Weglotczasami pojawia się dopiero po ręcznym odświeżeniu, gdy motywy używają leniwie ładowanych nagłówków. W Dawn 15+ i podobnych motywach nagłówek jest rysowany przez JavaScript po załadowaniu strony głównej. Weglot wstrzykuje swój przełącznik tak szybko, jak to możliwe, więc jeśli nagłówek nie jest gotowy, przełącznik ląduje w miejscu awaryjnym - często w prawym dolnym rogu - lub miga po sekundzie.

Rozwiązaniem jest ustawienie flagi WGNOTINITIALIZED przed załadowaniem skryptu Weglot (w theme.liquid). Następnie wywołaj Weglot.initialize() ręcznie, po wyrenderowaniu nagłówka (używając setTimeout lub zdarzenia DOM ready).

Alternatywnie, możesz ustawić pozycję awaryjną w dashboardzie Weglot , np. najpierw nagłówek, potem stopka. W ten sposób przełącznik zawsze gdzieś się pojawi, nawet jeśli nagłówek się spóźni!

Kompletna Checklist wdrożenia

Po pierwsze, przed przystąpieniem do jakichkolwiek zmian, zduplikuj swój szablon za pomocą Sklep internetowy > Szablony > Akcje > Duplikuj. Zapewni to bezpieczną piaskownicę do testowania i wprowadzania poprawek.

Następnie sprawdź, czy wszystkie języki docelowe są wyświetlane jako opublikowane w sekcji Ustawienia > Języki. Upewnij się, że przełącznik języka jest widoczny – niektóre motywy wymagają przełączników w nagłówku, inne umieszczają je w stopce, więc sprawdź oba miejsca.

Wypróbuj bezpośredni dostęp do adresu URL, dodając /es/ lub /fr/ do adresu sklepu. Jeśli te strony się załadują, tłumaczenia są gotowe, a uwagi wymaga jedynie rozmieszczenie przełącznika. Wyświetl podgląd sklepu w przełomowych rozmiarach - 375 pikseli, 768 pikseli i 1920 pikseli - przy użyciu rzeczywistych urządzeń, aby wychwycić wszelkie dziwactwa związane z responsywnością.

Otwórz Chrome DevTools, aby zmierzyć czas ładowania skryptu. Opóźniony przełącznik oznacza kłopoty dla kupujących. Zawsze uruchamiaj testowy zakup w każdym języku, ponieważ szablony kas lubią zaskakiwać. Na koniec udokumentuj wszystkie ustawienia przed aktualizacją szablonu. W ten sposób szybko odzyskasz równowagę po niespodziewanym resecie.

Jeśli jesteś gotowy na natychmiastowy, wolny od frustracji przełącznik, dzięki Weglot zmiany językowe są dostępne za jednym kliknięciem. Wypróbuj nasz 14-dniowy bezpłatny okres próbny i przekonaj się, jak łatwa może być sprzedaż wielojęzyczna.