Віджет карти для Shopify
Завантажте один файл, вставте його в папку Sections вашої теми — і в редакторі теми з'явиться «WhatIsMyLocation Map» з рідною панеллю налаштувань: філії як блоки, вибір теми та маркера, панель локацій з анімаціями перемикання й необов'язкові піктограми відкриття в картах. Не треба встановлювати застосунок, не потрібні ні API-ключ, ні платіжний акаунт, ні куки, і нічого не завантажується з Google. У zip-архіві є й друга секція — для віджета «знайти моє місцезнаходження».
На основі дозволу · Приватно · Працює в Chrome, Safari, Firefox, Edge
Чому секція теми краща за застосунок Shopify
Більшість «застосунків з картою» вимагають встановлення, дозволів на дані вашого магазину та щомісячної плати — і все це, зрештою, заради одного iframe. Ось чесна альтернатива: один файл Liquid, що живе у вашій власній темі. Він не запитує жодних дозволів магазину, не додає скриптів на ваші сторінки, нічого нікуди не надсилає й нічого не коштує. Єдині зовнішні запити ваших відвідувачів — це ізольований iframe карти з whatismylocation.ai та його тайли OpenStreetMap: без куки Google, без тягаря банерів згоди. А якщо сервіс колись буде недоступний, iframe тихо нічого не покаже й не зламає вашу сторінку. Видаліть файл секції — і від неї не лишиться жодного сліду.
Завантажити whatismylocation-shopify-sections.zip — обидві секції та README, лише кілька кілобайтів. Далі виконайте кроки встановлення нижче.
Встановлення приблизно за дві хвилини
Дві частини: один раз вставте файл, а тоді користуйтеся ним, як будь-якою вбудованою секцією.
Вставте файл: адмінка Shopify ▸ Онлайн-магазин ▸ Теми ▸ ⋯ ▸ Редагувати код. У лівій бічній панелі в розділі Sections натисніть Додати нову секцію, назвіть її whatismylocation-map, видаліть текст-заповнювач і вставте весь вміст файлу whatismylocation-map.liquid — саме блок {% schema %} унизу будує вашу панель налаштувань, тож він має потрапити разом. Збережіть.
Користуйтеся: відкрийте редактор теми (Налаштувати), перейдіть на сторінку контактів (чи будь-яку іншу), натисніть Додати секцію й виберіть WhatIsMyLocation Map. Панель налаштувань з'явиться ліворуч. Поки ви не введете координати, секція показує дружній заповнювач, який точно каже, чого їй бракує.
Координати візьміть у конструкторі вбудовування карти — введіть свою адресу, а тоді перетягніть мітку на ваш вхід, перш ніж копіювати. Секція містить ваші остаточні координати, тож мітка вже ніколи не зсунеться.
Філії — це блоки
Магазинам з кількома локаціями дістається найкраще: у редакторі теми кожна філія — це блок. Натисніть Додати філію, впишіть широту, довготу, назву та адресу, а порядок змінюйте перетягуванням (до 10). Карта автоматично вміщує всі філії, мітки пронумеровані відповідно до списку, а відвідувачі отримують панель локацій — акордеон збоку від карти на комп'ютері та смугу карток із гортанням на телефонах, з маршрутом до кожної філії та необов'язковими піктограмами «Відкрити в Google Maps / Apple Maps». Розкладка панелі (auto, збоку, знизу, немає) та анімація перемикання (плавна, згасання, жвава, немає — відвідувачі з увімкненим зменшенням анімації завжди бачать миттєвий варіант) — це випадні списки в тій самій панелі.
Усі налаштування, за пунктами
| Налаштування | Що бачать відвідувачі |
|---|---|
| Назва бізнесу + стиль заголовка | Заголовок картки чи панелі — типово жирний; доступні курсив і звичайний. |
| Рядки адреси 1–3 + стиль кожного рядка | До трьох рядків на картці поверх карти, кожен за бажанням жирний або курсивний. |
| Широта / довгота | Ваша мітка. Вставте з конструктора; повторне геокодування не виконується. |
| Блоки філій | Пронумеровані мітки + панель локацій (від 2 філій). |
| Тема | Світле, темне або золоте оформлення віджета. |
| Колір маркера | Класичні сині, смарагдові, червоні, бурштинові, індигові або сланцеві мітки. |
| Панель + анімація | Розкладка панелі локацій та анімація перемикання філій. |
| Маршрут / піктограми карт | Кнопка маршруту та необов'язкові піктограми-посилання на Google/Apple Maps із підказками. |
| Висота | Висота iframe, 220–800 px. |
| Підпис «Powered by» | Типово вимкнено — позначте, щоб згадати сервіс під картою. |
Той самий zip-архів містить whatismylocation-widget.liquid — віджет «знайти моє місцезнаходження» як другу секцію (тема, компактний або повний режим, висота), для сторінок доставки та пошуку магазинів.
Якщо щось не працює
Секція не з'являється в «Додати секцію». Файл має лежати в Sections (не в Snippets чи Assets), а вставити треба весь файл — якщо блок {% schema %} обрізано, Shopify відхиляє або ховає секцію. Вставте файл повністю ще раз і збережіть.
Помилка «Invalid schema» під час збереження. Файл вставлено частково — найчастіше бракує закривальної фігурної дужки, бо виділення не дійшло до останнього рядка. Вставте повний файл ще раз; не редагуйте схему вручну, якщо не знаєте Liquid.
Карта сіра. Тайли карти надходять із tile.openstreetmap.org; агресивний блокувальник реклами або корпоративна мережа можуть їх блокувати. Перевірте на телефоні через мобільний інтернет — ваші клієнти майже напевно бачать карту нормально.
Мітка не на моїх дверях. Побудуйте координати заново в конструкторі, перетягніть мітку на ваш вхід і вставте нові значення в налаштування секції.
Зміни не видно в живому магазині. Ви редагували чернетку або неопубліковану тему — внесіть зміну в опубліковану тему (або опублікуйте ту, яку редагували). Сам віджет нічого не кешує.
Крок за кроком
- Завантажте архів whatismylocation-shopify-sections.zip (посилання нижче) і розпакуйте його.
- У панелі адміністратора Shopify відкрийте Online Store ▸ Themes ▸ ⋯ ▸ Edit code. У розділі Sections натисніть “Add a new section”, назвіть його whatismylocation-map і вставте ВЕСЬ вміст файлу whatismylocation-map.liquid — включно з блоком schema внизу. Натисніть Save.
- Відкрийте редактор теми (Customize), перейдіть на сторінку, де потрібна карта, натисніть Add section і виберіть “WhatIsMyLocation Map”.
- Вставте точні координати з конструктора map-embed (введіть свою адресу, потім перетягніть мітку точно на вхід і лише після цього скопіюйте координати) — або, для карти з кількома філіями, натискайте “Add branch” по одному разу для кожної адреси.
- Виберіть тему оформлення, колір мітки, розташування панелі та анімацію на панелі налаштувань, потім натисніть Save. Не потрібні ні застосунок, ні API-ключ, ні жодне налаштування на сервері.
Поширені запитання
Чи потрібен застосунок або ключ API?
Скільки філій можна показати на карті?
Переглянути англійською: Map Widget for Shopify · Українська