Зміст
Вимоги до доступу Shopify
Автоматичний переклад хмарного штучного інтелекту, який буде використовуватися з Shopify , вимагає певного доступу для завершення налаштування:
- Доступ адміністратора Shopify
- Доступ до модифікації DNS домену
Налаштування Shopify складається з 3 простих кроків:
- Зареєструйте свій домен, щоб авторизувати переклад
- Змініть DNS домену відповідно до мов перекладу
- Додайте посилання на перемикач мовних прапорців до своєї теми Shopify
Як зробити ваш сайт Shopify багатомовним у відео
Зареєструйте свій домен Shopify
Після підключення або реєстрації на інформаційній панелі Linguise вам буде запропоновано зареєструвати домен, щоб авторизувати переклад.
Для цього просто скопіюйте своє доменне ім’я з https:// і виберіть Shopify як платформу.
Після цього виберіть вихідну та цільову мову.
Важлива примітка щодо SEO: кількість налаштованих мов має великий вплив на SEO. Під час налаштування мов перекладу, якщо у вас є велика кількість проіндексованих сторінок (>500), пошуковій системі може знадобитися багато часу для їх обробки. Це може вплинути на ваше SEO мовою оригіналу. Ось чому ми рекомендуємо спочатку додавати максимум 5 мов, а потім, коли буде проіндексовано, ви зможете додавати мови по 3 на місяць.
Змініть DNS домену відповідно до мов
Автоматично додавати DNS домену за допомогою Entri
Після успішної реєстрації веб-сайту на інформаційній панелі Linguise у вас буде два варіанти продовжити встановлення.
Ймовірно, ви повинні побачити цей вміст. Якщо ви віддаєте перевагу автоматичному додаванню записів DNS, ви можете натиснути « Підключити DNS автоматично». ” Ця функція під назвою Entri автоматично додасть ваші записи DNS, що дозволить вам легко продовжити встановлення. Інший варіант — вручну скопіювати DNS у постачальника домену.
Після натискання кнопки Entri проаналізує URL-адресу вашого зареєстрованого веб-сайту та перевірить ваш публічний запис DNS. На основі цього він визначить постачальника та DNS, які потрібні.
Далі ви можете натиснути « Авторизуватись у [ваш постачальник домену] » (у цьому прикладі це Cloudflare). Потім ви побачите, що панель зміниться на сторінку входу вашого постачальника домену, де ви зможете увійти та продовжити.
Після входу в обліковий запис постачальника домену Entri зробить все інше, автоматично додавши належні записи DNS. Один DNS для кожної мови + один TXT DNS для ключа підтвердження.
Ви повинні бачити, що DNS додано у вашому домені. Наприклад:
Після авторизації Entri повідомить вас, що всі параметри DNS налаштовано успішно.
Ви зможете використовувати функцію перекладу, щойно всі записи DNS буде поширено у вашому домені (зазвичай це займає 20/30 хвилин).
Якщо ви віддаєте перевагу ручній інсталяції , ви також можете зробити це вручну, дотримуючись кроків, наведених нижче.
Скопіюйте записи DNS
Після підтвердження домену вас буде перенаправлено на екран, де DNS, який потрібно додати до вашого домену, буде готовий до копіювання. Залежно від вашої хостингової компанії налаштування домену можуть виглядати дещо інакше, але назви полів досить стандартні. Ці записи потрібні для завантаження багатомовних сторінок вашого веб-сайту як fr.domain.com, es.domain.com…
Ось основні елементи.
Після цього вам потрібно підключитися до менеджера домену та отримати доступ до області налаштування DNS. Потім, дотримуючись інструкцій, ви можете скопіювати:
- Один запис TXT для підтвердження домену
- Один або кілька записів CNAME для мов
Ось приклад для кожного типу запису (TXT і CNAME):
Після додавання всіх ваших записів ваша конфігурація має виглядати так.
Спеціальна конфігурація DNS у домені Shopify
На Shopify ви маєте можливість керувати конфігурацією DNS на платформі Shopify .
Зокрема, ви можете отримати доступ і змінити налаштування DNS через Shopify , перейшовши до « Доменів ». У цьому розділі ви можете як додавати, так і редагувати конфігурації DNS за потреби.
Після цього ви можете вибрати свій основний веб-сайт , а у верхньому правому куті ви знайдете опцію з позначкою « Налаштування домену ».
Натиснувши цю опцію, ви отримаєте доступ до « Редагувати налаштування DNS », де ви зможете додати новий запис DNS. Ви можете додати записи CNAME і TXT.
Нарешті ваші записи CNAME і TXT мають відображатися як таке зображення:
Важливо зазначити, що Shopify має правила для додавання конфігурації DNS. Переконайтеся, що ви виконали наведені раніше дії.
- Під час налаштування запису CNAME переконайтеся, що ім’я є мовою перекладу
- Під час налаштування запису TXT переконайтеся, що ім’я _ linguise
Shopify прочитає цей запис DNS, який ви додали, і розповсюдиться відповідно.
Перевірте перевірку DNS
Після додавання всіх ваших записів до DNS вашого домену ви можете перевірити поширення DNS, натиснувши кнопку Перевірити конфігурацію DNS.
Перевірка DNS зазвичай займає від 30 хвилин до 1 години. Після цього ви повинні побачити зелені крапки в правій частині списку DNS на інформаційній панелі Linguise . Ви майже готові перекласти свій веб-сайт Shopify , лише бракує посилання на перемикач мов із прапорцями країн.
Додайте перемикач мов до Shopify
Перемикач мов – це спливаюче вікно з прапорцем для вибору потрібної мови. Щоб завантажити його, вам потрібно буде скопіювати код, наведений на початку ваших сторінок Shopify . Перемикач мови прапора буде автоматично завантажений на вашому загальнодоступному веб-сайті.
Посилання для копіювання надається в кінці реєстрації домену або в налаштуваннях домену. Скопіюйте посилання в буфер обміну.
Потім в Shopify відкрийте Інтернет-магазин > Теми
Натисніть на три крапки вашої поточної теми та відредагуйте код.
Нарешті, відкрийте файл theme.liquid і вставте код сценарію після останнього
Тепер у вашому інтерфейсі Shopify має бути доступний перемикач мов Linguise .
Дизайн перемикача мов Shopify
Перемикач мов можна налаштувати на Linguise > Налаштування > Відображення позначок мови. Кожна зміна тут буде відображена на веб-сайті.
У правій частині екрана є попередній перегляд перемикача мов. Ось елементи, які ви можете налаштувати:
- 3 макети: поруч, спадне або спливаюче
- Положення перемикача мов
- Вміст перемикача мов
- Назви мов англійською або рідною мовою
- Форми та розміри прапорів
- Кольори та коробка тіні
Завантажте перемикач мов у вміст Shopify
Щоб відобразити перемикач мов у певному місці у Shopify , ви повинні встановити позицію «На місці».
Після того як ви встановили позицію на Linguise , ви можете додати короткий код нижче, щоб включити його. Натисніть на наведений нижче код, щоб помістити його в буфер обміну.
Після додавання на інтерфейсі ви матимете прапор і назви мов, які відображатимуться в області HTML, до якої ви додали код.
Конфігурація домену Shopify для Google ReCAPTCHA
Google ReCAPTCHA – це безкоштовний сервіс, який використовується для запобігання спаму, наприклад, у контактних формах. Щоб зробити його доступним у Shopify , вам потрібно зареєструвати багатомовні субдомени в адміністраторі Shopify .
Відкрийте налаштування магазину та налаштування домену.
Потім натисніть Підключити існуючий домен
Додайте існуючий мовний субдомен, наприклад, якщо ваш веб-сайт французькою мовою, це буде fr.yourwebsite.com
Потім натисніть Підключити існуючий домен
Додайте існуючий мовний субдомен, наприклад, якщо ваш веб-сайт французькою мовою, це буде fr.yourwebsite.com
Нарешті, додайте [lang].yourwebsite.com, для кожної мови перекладу ви мали відображати reCAPTCHA на інтерфейсі.
Редактор перекладу інтерфейсу на Shopify
Інтерфейсний редактор полегшує перекладачам змінювати будь-який HTML-вміст на Shopify будь-якою мовою. Ви можете редагувати сторінку, клацнувши елемент сторінки та замінивши текст, посилання чи зображення.
Якщо ви використовуєте одну з безкоштовних тем, наданих Shopify , можливо, вам доведеться відредагувати CSS теми, щоб мати доступ до всього HTML, це тому, що вони використовували деякі нестандартні псевдоелементи.
Спочатку відредагуйте код теми, а потім відкрийте файл base.css або будь-який інший файл CSS, завантажений у ваш магазин Shopify .
Ось код, який потрібно додати до файлу 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
--------------------------------------------------------------------*/