Потрібно внести індивідуальні зміни у чекаут Shopify? Але платформа Shopify не дозволяє нам це зробити. Правильний код і цікавість наших розробників дозволяють!;) Застреження: це лише наша спроба знайти рішення до нетривіальної, але дуже популярної задачі для онлайн магазину на Shopify. Це порушує політику Shopify тому радимо дотримуватися правил і використовувати готові теми з ширшими налаштуваннями. Розробка цього додатку – це виклик, який ми собі поставили і для якого знайшли рішення.
Індивідуальний чекаут Shopify
- Ви можете створити унікальний досвід для користувача при оформленні замовлення та повністю оптимізувати всі налаштування відповідно до ваших потреб (фірмовий тон бренду або орієнтація на прибуток).
- Чекаут (сторінка оформлення замовлення) є важливою частиною враження та користувацького досвіду у онлайн-магазині.
- Щоб контролювати абсолютно весь шлях користувача.
- Щоб швидше та якісніше закривати кошики користувачів.
- Під час оформлення замовлення ви можете сформувати остаточну довіру до онлайн магазину.
Обмеження в налаштуваннях сторінки чекауту Shopify
Можна змінити зовнішній вигляд деяких полів чекауту (текст або png логотипів), але щоб змінювати функціонал, додавати унікальні для клієнтів поля і будь-які індивідуальні налаштування при оформленні замовлення – заборонено в базовому тарифному плані Shopify.
Ці обмеження Shopify визначив через те, що сторінки чекауту використовуються у спільному доступі всієї платформи. Тому неможливо додавати унікальні скрипти, елементи дизайну, налаштовувати поля тощо. З цими обмеженнями було б важко продавати по всьому світу, тому що додавати унікальні поля для конкретних адрес або створити налаштування для певної країни – неможливо.
Ось кілька важливих елементів, які заборонено змінювати через базові налаштування Shopify:
- Перемикання між швидким односторінковим чекаутом та повним процесом.
- Верстка сторінок чекауту.
- Функції в хедері або областях з контентом (навігація, банери, логотипи, рекламні зображення).
- Вибір полів, які потрібні різним клієнтам для завершення оформлення замовлення.
- Мобільне відображення панелі при об’єднані продуктів у Кошик і формування замовлення.
- Розташування полів для введення промо-коду або подарункової картки.
Щоб налаштувати сторінки чекауту, Shopify дає нам одне рішення. Це перехід до тарифного плану Shopify Plus, який стартує від $2000 USA на місяць, і така вартість для більшості компаній не є виправданою.
Як внести індивідульні налаштування в чекаут Shopify?
Так, ми можемо частково змінювати чекаут базового Shopify. Або нам може допомогти тарифний план Shopify Plus і зробить можливими будь-які налаштування, які необхідні для процесу оформлення замовлення у вашому онлайн магазині. Продавці, які викорситовують Shopify Plus, можуть повністю налаштувати свої чекаути за допомогою файлу checkout.liquid.
Невеликі зміни, які можна зробити в чекауті базового Shopify:
- Зміна кнопок експрес-оплати в чекаута. Ми можемо змінити текст на кнопках через Language Editor.
- Інші кнопки в чекауті ми можемо змінити, використовуючи ту саму техніку оновлення мовних налаштувань.
- Додавання логотипів або лейблів на сторінку, де користувачі вводять номери кредитних карток, є поширеним запитом, який допомагає сформувати відчуття безпеки покупця. Ми можемо це зробити за допомогою Language Editor та Filter Tool.
Зауважте: індивідуальні зміни в полі «додаткові сценарії» можливі лише для Shopify онлайн магазинів, які створені до 30 січня 2019 року. З того часу це поле було оновлено, і його не можна використовувати для налаштувань.
Але як тільки ви спробуєте вносити індивідуальні зміни для чекауту, може виникнути спокуса почати коригувати кожне поле, тим більше, що чекаут – це одна з небагатьох речей, яку ви можете зробити кращою для вашого покупця.
Отже, щоб налаштувати будь-яке поле чекауту, вам потрібен тарифний план Shopify Plus, але завжди виникає питання, чи виправдаютсья такі інвестиції для кожного бізнесу?
Як уникнути обмежень налаштування Shopify чекауту, не купуючи Shopify Plus?
Це дійсно найбільша проблема у налаштуваннях на Shopify. Ви можете спробувати вибрати та встановити тему Shopify, яка буде найбільш гнучкою у внесенні змін та унікальних конфігураціях, але налаштувань ніколи не вистачить. Тому ми можемо використати деякі хитрощі. 😉
Як наша команда, зробила можливим внесення користувацьких змін у чекаут Shopify?
Ми створили додаток, який дозволяє індивідуально налаштовувати сторінки чекауту Shopify.
Це лише експеримент, де завданням було: можливість створити власний стиль для чекауту онлайн магазину без тарифного плану Shopify Plus. Таким чином, ми створили рішення, яке дозволить налаштувати сторінки чекауту в магазині Shopify, незважаючи на офіційні обмеження щодо кастомізації.
Це рішення “обманює” Shopify, і, наприклад, платформа не отримує комісії за майбутні транзакції через додаток.
Увага: це порушує політику користувацького використання Shopify. Ця розробка є лише нашим експериментом. Додаток, який ми створили для налаштування сторінок чекауту Shopify, можна використовувати лише на власний ризик власника онлайн магазину.
Як працює додаток для налаштування чекауту?
Додаток розроблявся з урахуванням того, що він буде використовуватися в декількох магазинах. Повної універсальності досягти складно, оскільки кожен магазин має свій функціонал певний. Розроблене рішення — скоріше “скелетон” для подальшої імплементації та інтеграції з обраним магазином.
1. Все починається з того, що юзер встановлює в себе додаток. В базу даних потрапляє запис, що цей магазин зареєстрований, і про нього додаються дані в БД. Для подальшого налаштування, необхідно вставити JS код, який збиратиме дані про корзину користувачів. Після того, як користувач натисне на кнопку чекауту, почне працювати цей JS код і сформує стрічку запиту до хостингу з чекаутом. У цій стрічці будуть знаходитися ID товарів та їхня кількість. Також, обов’язковим моментом є додавання в стрічку запиту назви магазину, з яким має працювати кастомний чекаут. Без цього, додаток не зможе правильно зрозуміти, де створювати замовлення.
2. Однак, цього не достатньо. Як вже раніше зазначалося, кожен магазин має свій унікальний функціонал. Тому просто встановити додаток і почати працювати – не вийде. Необхідне ручне доналаштовування коду тем, як показано на скріншоті внизу.
3. Після налаштування додатку, магазин починає працювати з кастомним чекаутом. При натисканні на кнопку чекауту, вас редіректить на це кастомне рішення. Зовнішній вигляд можна налаштувати, але не через адмін.панель сайту. Потрібно залучити для цього front-end розробника.
Як працює чекаут:
При переході на сторінку, додаток робить декілька запитів до Shopify, щоб уточнити інформацію про товари. Наприклад, картинки, назва, вартість. Саме для цього і передаються ID в запиті. Всі дані про товари кладуться в сесію. Назва магазину також кладеться в сесію, вона необхідна, щоб розрізняти куди надсилати запит.
Тепер ви можете почати змінювати дані. Доступні поля:
- пошта;
- телефон;
- ім’я;
- прізвище;
- країна;
- місто;
- вулиця;
- поштовий індекс;
- метод доставки.
Примітки:
– Для поля телефону обов’язково треба вказувати регіональний код. Shopify відправляє SMS на вказаний номер телефону;
– У поле з країнами потрапляють тільки ті країни, для яких зазначені способи доставки. Для “Rest of World” — Shopify потребує точного значення країни, а тому це значення працювати не буде;
– У поле з методами доставки потрапляють методи, які були зазначені для конкретної країни. При виборі методу доставки, на додаток йде запит, щоб перерахувати загальну вартість замовлення;
– При зміні країни, поле з методами доставки отримує нові значення для вибору.
Після заповнення всіх полів, ви підтверджуєте і надсилаєте форму і відбувається валідація. Якщо щось не так, додаток поверне вас на форму і вкаже на помилки. Якщо ж все ОК, додаток збере всю інформацію про чекаут і зробить замовлення вже в самому Shopify.
Примітки:
– Створені замовлення завжди будуть йти як оплачені. Справа в тому, що Shopify забороняє змінювати більшість інформації, в тому числі і статус по оплаті. Однак, не варто панікувати. Щоб відслідковування оплати, можна позначати теги замовлення. Теги Shopify не забороняє змінювати. Таким чином, можна реалізувати функціонал відкладеного платежу, інвойс про оплату буде відправлений на зазначену пошту. Після оплати, можна буде відправити запит до Shopify, що оплата пройшла успішно і тег зміниться;
– До нашого кастомного чекауту можна підключати будь-яку платіжну систему.
Після успішного створення замовлення в Shopify, сесія користувача очиститься і його направить на сторінку з пустим чекаутом, де є посилання на магазин (береться з сесії). Після переходу в магазин, відпрацьовує спецільний JS скрипт (також треба налаштовувати вручну), який очистить cookies користувача. В них схована інформація про кошик. Після цього, користувач знову може додавати товари і оформляти замовлення.
Чи можна використовувати додаток у своїх онлайн магазинах на Shopify?
Ми вирішили поділитися цим додатком з усіма, тож завантажили його в репозиторій.
Власники онлайн магазинів на Shopify можуть завантажити додаток з GitHub нашої компанії і використовувати його на свій страх і ризик. Тому, зауважте, що це порушення політики Shopify, тому рішення приймаєте ви. Ми розробили цей додаток виключно для того, щоб поекспериментувати, задовільнити цікавість та випробувати можливості коду.
Слідкуйте за нашим блогом, щоб залишатися в курсі нових крутих розробок! Наша команда завжди готова до нових викликів! Якщо вам потрібно налаштувати тему Shopify (або сторінку), реалізувати зміни й індивідульні налаштування теми Shopify, або розробити повністю кастомну сторінку оформлення замовлення у вашому магазині Shopify (чи тему з нуля), зв’яжіться з нами для деталей!😉
