Spis treści
Wymagania dotyczące dostępu Shopify
Automatyczne tłumaczenie AI w chmurze, które ma być używane z Shopify wymaga pewnego dostępu, aby ukończyć konfigurację:
- Dostęp administracyjny Shopify
- Dostęp do modyfikacji DNS domeny
Konfiguracja Shopify składa się z 3 prostych kroków:
- Zarejestruj swoją domenę, aby autoryzować tłumaczenie
- Zmodyfikuj DNS domeny zgodnie z językami tłumaczenia
- Dodaj link do przełączania flag języka do swojego motywu Shopify
Jak sprawić, by Twoja witryna Shopify była wielojęzyczna w wideo
Zarejestruj swoją domenę Shopify
W tym celu po prostu skopiuj nazwę swojej domeny z dołączonym https:// i wybierz Shopify jako platformę.
Następnie wybierz język źródłowy i docelowy.
Ważna uwaga dotycząca SEO: liczba skonfigurowanych języków ma duży wpływ na SEO. Jeśli ustawisz języki tłumaczenia, jeśli masz dużą liczbę zindeksowanych stron (>500), wyszukiwarka może zająć dużo czasu, aby je przetworzyć. Może to mieć wpływ na SEO w Twoim oryginalnym języku. Dlatego zalecamy dodanie maksymalnie 5 języków, a po zindeksowaniu możesz dodawać języki partiami po 3 na miesiąc.
Zmodyfikuj DNS domeny zgodnie z językami
Automatycznie dodawaj DNS domeny za pomocą Entri
Po pomyślnym zarejestrowaniu swojej witryny w panelu Linguise będziesz mieć dwie możliwości kontynuowania instalacji.
Prawdopodobnie powinieneś zobaczyć tę treść. Jeśli wolisz automatycznie dodawać rekordy DNS, możesz kliknąć „ Połącz swój DNS automatycznie. Ta funkcja, zwana Entri, automatycznie doda Twoje rekordy DNS, umożliwiając łatwe kontynuowanie instalacji. Inną opcją jest ręczne skopiowanie DNS u dostawcy domeny.
Po kliknięciu przycisku Entri przeanalizuje adres URL Twojej zarejestrowanej witryny i sprawdzi Twój publiczny rekord DNS. Na tej podstawie określi wymaganego dostawcę i DNS.
Następnie możesz kliknąć „ Autoryzuj u [dostawcy domeny] ” (w tym przykładzie jest to Cloudflare). Zobaczysz wówczas, jak panel zmienia się w stronę logowania Twojego dostawcy domeny, na której możesz się zalogować i kontynuować.
Gdy zalogujesz się do swojego dostawcy domeny, Entri zajmie się resztą, automatycznie dodając odpowiednie rekordy DNS. Jeden DNS na język + jeden DNS TXT dla klucza weryfikacyjnego.
Powinieneś zobaczyć, że DNS został dodany w Twojej domenie. Na przykład:
Po autoryzacji Entri powiadomi Cię, że wszystkie ustawienia DNS zostały pomyślnie skonfigurowane.
Korzystanie z funkcji tłumaczenia powinno być możliwe natychmiast po rozpowszechnieniu wszystkich wpisów DNS w Twojej domenie (zwykle zajmuje to 20/30 minut).
Jeśli wolisz instalację ręczną , możesz to również zrobić ręcznie, wykonując kroki podane poniżej.
Skopiuj rekordy DNS
Po zweryfikowaniu domeny zostaniesz przekierowany do ekranu, na którym DNS, które chcesz dodać do swojej domeny, jest gotowy do skopiowania. W zależności od firmy hostingowej konfiguracja domeny może wyglądać nieco inaczej, ale nazwy pól są dość standardowe. Te rekordy są wymagane, aby załadować wielojęzyczne strony Twojej witryny jako fr.domain.com, es.domain.com…
Oto główne elementy.
Następnie musisz połączyć się z menedżerem domeny i uzyskać dostęp do obszaru konfiguracji DNS. Następnie postępując zgodnie z instrukcjami, możesz skopiować:
- Jeden rekord TXT do weryfikacji domeny
- Jeden lub kilka rekordów CNAME dla języków
Oto przykład dla każdego typu rekordu (TXT i CNAME):
Po dodaniu wszystkich rekordów konfiguracja powinna wyglądać tak.
Specyficzna konfiguracja DNS w domenie Shopify
W Shopify masz możliwość zarządzania konfiguracją DNS w ramach platformy Shopify .
W szczególności możesz uzyskać dostęp do ustawień DNS i je modyfikować za pośrednictwem Shopify , przechodząc do „ Domeny ”. W tej sekcji możesz w razie potrzeby dodawać i edytować konfiguracje DNS.
Następnie możesz wybrać swoją główną witrynę internetową , a w prawym górnym rogu znajdziesz opcję „ Ustawienia domeny ”.
Klikając tę opcję uzyskasz dostęp do opcji „ Edytuj ustawienia DNS ”, gdzie będziesz mógł przystąpić do dodawania nowego rekordu DNS. Możesz dodać rekordy CNAME i TXT.
Na koniec Twoje rekordy CNAME i TXT powinny wyglądać jak na poniższym obrazku:
Należy zauważyć, że Shopify ma same zasady dodawania konfiguracji DNS. Upewnij się, że wykonałeś poprzednie kroki.
- Konfigurując rekord CNAME , upewnij się, że nazwa jest językiem tłumaczenia
- Konfigurując rekord TXT, upewnij się, że nazwa to _ linguise
Shopify odczyta dodany rekord DNS i odpowiednio go rozpropaguje.
Sprawdź poprawność DNS
Po dodaniu wszystkich rekordów do DNS domeny możesz sprawdzić propagację DNS klikając na przycisk Sprawdź konfigurację DNS.
Weryfikacja DNS trwa zwykle od 30 minut do 1 godziny. Następnie powinieneś zobaczyć zielone kropki po prawej stronie listy DNS w panelu Linguise . Jesteś już prawie gotowy do przetłumaczenia swojej witryny Shopify , brakuje tylko linku do przełącznika języka z flagami krajów.
Dodaj przełącznik języka do Shopify
Przełącznik języka to wyskakujące okienko z flagą umożliwiające wybranie żądanego języka. Aby go załadować, musisz skopiować kod podany w nagłówku stron Shopify . Przełącznik języka flagi zostanie następnie automatycznie załadowany na Twojej publicznej stronie internetowej.
Link do skopiowania podany jest na końcu rejestracji domeny lub w ustawieniach domeny. Skopiuj link do schowka.
Następnie w Shopify otwórz Sklep internetowy > Motywy
Kliknij trzy kropki bieżącego motywu i Edytuj kod.
Na koniec otwórz plik topic.liquid i po ostatnim wklej kod skryptu
Teraz w interfejsie Shopify powinieneś mieć dostępny przełącznik języka Linguise .
Projekt przełącznika języka Shopify
Przełącznik języka można dostosować w Linguise > Ustawienia > Wyświetlanie flag języków. Każda modyfikacja tutaj zostanie odzwierciedlona na stronie internetowej.
Po prawej stronie ekranu masz podgląd przełącznika języka. Oto elementy, które możesz skonfigurować:
- 3 układy: obok siebie, rozwijany lub wyskakujący
- Pozycja przełącznika języka
- Zawartość przełącznika języka
- Nazwy języków w języku angielskim lub ojczystym
- Kształty i rozmiary flag
- Kolory i cień pudełka
Załaduj przełącznik języka w treści Shopify
Aby wyświetlić przełącznik języka w określonym miejscu, w Shopify , należy ustawić pozycję jako „Na miejscu”.
Po ustawieniu pozycji w Linguise możesz dodać poniższy krótki kod, aby ją uwzględnić. Kliknij poniższy kod, aby umieścić go w swoim schowku.
Po dodaniu na interfejsie zobaczysz flagę i nazwy języków wyświetlane w obszarze HTML, do którego dodano kod.
Konfiguracja domeny Shopify dla Google ReCAPTCHA
Google ReCAPTCHA to bezpłatna usługa służąca do zapobiegania spamowi np. w formularzach kontaktowych. Aby udostępnić tę usługę w Shopify, musisz zarejestrować swoje wielojęzyczne subdomeny w panelu administracyjnym Shopify .
Otwórz ustawienia sklepu i ustawienia domeny.
Następnie kliknij Połącz istniejącą domenę
Dodaj istniejącą subdomenę językową, na przykład, jeśli masz witrynę w języku francuskim, będzie to fr.twojastrona.com
Następnie kliknij Połącz istniejącą domenę
Dodaj istniejącą subdomenę językową, na przykład, jeśli masz witrynę w języku francuskim, będzie to fr.twojastrona.com
Na koniec dodaj [lang].yourwebsite.com, dla każdego języka tłumaczenia musiałeś wyświetlić reCAPTCHA na interfejsie.
Edytor tłumaczeń frontendowych na Shopify
Edytor frontendowy ułatwia tłumaczom modyfikowanie dowolnej zawartości HTML w Shopify w dowolnym języku. Możesz edytować stronę, klikając element strony i zastępując tekst, łącze lub obraz.
Jeśli korzystasz z jednego z bezpłatnych motywów dostarczonych przez Shopify, może być konieczna edycja CSS motywu, aby mieć dostęp do całego kodu HTML, dzieje się tak dlatego, że użył on jakiegoś niestandardowego pseudoelementu.
Najpierw edytuj kod motywu, a następnie otwórz plik base.css lub dowolny inny plik CSS załadowany w Twoim sklepie Shopify .
Oto kod, który należy dodać do pliku CSS:
/* CUSTOM CSS FOR LIVE EDITOR LINGUISE
--------------------------------------------------------------------*/
/* Remove the problem of frontend editor on product and blog listing */
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
content: none !important;
}
.card__heading a:after, .card--card:after, .card--standard .card__inner:after {
content: none !important;
}
/* Add back the button border */
button.button {
border: 2px solid #0E1B4D;
border-radius: 20px;
}
/* END CUSTOM CSS
--------------------------------------------------------------------*/