Налаштування інтернет-магазину від CRM¶

Детальна інструкція про запуск та кастомізацію нового торгового майданчика для роздрібних покупців від МійДроп

Нещодавно команда МійДроп презентувала користувачам версії для постачальників унікальну та функціональну розробку – інтернет-магазин для роздрібних покупців на основі CRM. У першій статті ми детально пояснили можливості цього рішення та те, що варто врахувати перед стартом.

У цій статті ми покажемо, як власне запустити та персоналізувати такий торговий майданчик.

Магазин працює і на нашій адресі, і на вашому домені

Одразу після створення магазин живе на адресі mypricelist.com.ua/ваш-бренд. Купувати домен не обовʼязково: у такому вигляді він повноцінно продає й приймає замовлення.

Якщо власний домен у вас є, магазин переноситься на нього за кілька хвилин — і тоді додатково стають доступними Google Shopping, Google Analytics, Google Ads, Meta Pixel, TikTok Pixel та власний код у шапці сайту.

Відмінності докладно — у кроці 9 і кроці 10.

Розвивайте свій бізнес разом із МійДроп! Отримуйте сповіщення в Telegram про зміну статусів посилки, контролюйте роботу менеджерів та багато іншого – https://mydp.co.ua/KbLyy

Підготовчий етап¶

Нові користувачі МійДроп версії для постачальників можуть створювати та тестувати інтернет-магазин на основі CRM, як і будь-які інші функції, без обмежень у рамках 14 днів пробного періоду.

Чинні користувачі можуть спершу спробувати магазин безкоштовно і без звернень у підтримку. У розділі "Інтеграції" → "Інтернет-магазин" натисніть кнопку "Спробувати 7 днів безкоштовно" — магазин вмикається одразу, без оплати. Тижня вистачить, щоб подивитися на власному асортименті, чи підходить вам такий формат.

Якщо кнопки немає

Пробний період розрахований на акаунти з активною платною підпискою, а повторно спробувати ту саму інтеграцію можна через пів року після попередньої проби.

Щоб користуватися магазином і далі, оплатіть інтеграцію в розділі "Налаштування" разом з іншими функціями та щомісячною підпискою або окремо в будь-який момент. Вартість першого інтернет-магазину на основі CRM складає 14 € / місяць, а всіх наступних – 11 € / місяць. Стартового внеску за запуск немає. Також при оплаті за півроку чи рік діятимуть стандартні знижки від МійДроп в 10% і 20% відповідно.

Крок 1: основна інформація¶

1. Спершу у вашому обліковому записі як постачальника в CRM МійДроп перейдіть в розділ "Інтеграції" → натисніть на варіант "Інтернет-магазин".

2. Вкажіть назву вашого магазину у відповідному полі кирилицею або латиницею, а також публічний домен обов'язково лише латиницею.

Домен – це символи, які утворять унікальне посилання на ваш інтернет-магазин та які у адресному рядку слідуватимуть за mypricelist.com.ua. Якщо у вас є власний домен, магазин можна перенести на нього – про це в кроці 9.

3. Щоб активізувати це посилання та вже побачити інтернет-магазин з вашими товарами на основі CRM, натисніть кнопку "Зберегти".

Тепер можна перейти за посиланням і ознайомитися з магазином, який матиме приблизно такий вигляд. ↓

4. За бажанням додайте аватарку магазину, яка відображатиметься вгорі сайту. Аналогічно з описом, який розміститься під аватаркою. В описі розкажіть, наприклад, про умови оформлення замовлення, повернення, обміну, а також про сам магазин, його асортимент тощо. У подальшому можна в будь-який момент відредагувати чи видалити аватарку та опис.

5. Щоб створити тимчасовий інтернет-магазин для сезонних продажів чи для реалізації залишків з великими знижками, обмежте кількість категорій товарів, на основі яких сформується інтернет-магазин. Таким чином можна розділити жіночий і чоловічий одяг, взуття і аксесуари тощо. Для цього натисніть кнопку "Тільки вибрані категорії" та додайте одну чи кілька категорій з вашого складу. Обов'язково натисніть кнопку "Зберегти" перш ніж переходити на іншу сторінку.

6. Щоб покупці бачили лише те, що можна замовити, позначте галочкою "Показувати лише товари в наявності" і натисніть "Зберегти". Товар без жодної варіації в наявності не показується у списку товарів і з'являється знову після надходження. Передзамовлення та "Доступний завжди" вважаються наявністю. За прямим посиланням картка товару відкривається, як і раніше.

Над списком товарів покупець може вибрати варіацію, наприклад розмір 36, і побачити всі товари, у яких вона є в наявності. У списку варіацій лише ті, що є в наявності в поточній категорії, тому будь-який вибір щось знаходить. Вибрана варіація підсвічується в картках товарів жовтим, тож одразу видно, що знайшлося саме те, що шукали. Окремо вмикати фільтр не потрібно: він з'являється сам, коли в категорії є хоча б дві різні варіації.

Крок 2: контакти¶

1. Перейдіть до наступної вкладки "Контакти". Додайте номери телефонів для зв'язку з менеджерами, посилання на соціальні мережі або інші сайти, а також адреси ваших офлайн магазинів тощо. Чим більше інформації ви додасте в цьому розділі, тим привабливішими виглядатимете для клієнтів.

У будь-який момент видаліть чи відредагуйте контакт, щоб інформація для роздрібних покупців завжди залишалася актуальною. Після заповнення всіх полів натисніть кнопку "Зберегти", щоб переглянути, як зміни виглядатимуть на сайті.

2. Оновіть сторінку вашого інтернет-магазину або знову перейдіть за посиланням у вкладці "Основна інформація". Таким чином у верхньому лівому кутку з'явиться кнопка "Контакти".

3. Після її натискання відкриється вікно з усіма вказаними контактами. Перевірте інформацію на наявність помилок, щоб клієнти без зайвих перепон завжди могли з вами зв'язатися.

Крок 3: способи доставки¶

1. Наступна вкладка стосується Нової Пошти, Укрпошти та Rozetka Delivery, кур'єрської доставки та автоматичної генерації ТТН, яку клієнт бачить відразу після офомлення замовлення в інтернет-магазині на основі CRM. Також доступна опція, що зобов'язує відправника оплачувати доставку. Позначте галочкою актуальні та прийнятні для вас функції.

Rozetka Delivery доставляє лише у відділення, кур'єрської доставки в неї немає. У магазинах, створених раніше, ця служба вимкнена — поставте галочку, коли будете готові нею відправляти.

Якщо у вас кілька контрагентів, у блоці "Контрагент для замовлень магазину" виберіть, від чийого імені відправляти замовлення з сайту та Telegram-бота магазину, — наприклад, ФОП, на який приходить оплата карткою. Вибір окремий для кожної служби доставки. Якщо контрагента не вибрати, діє те саме правило, що й для замовлень дропшиперів: контрагент за замовчуванням із налаштувань або по черзі. Контрагент, вказаний у самому товарі чи його категорії, має пріоритет.

Що потрібно для автоматичної генерації ТТН

Накладна створюється від імені вашого відправника, тому служба має бути налаштована в CRM — як це зробити, описано в окремих інструкціях:

Для Укрпошти та Rozetka Delivery накладна рахується ще й за вагою та габаритами посилки — заповніть їх у "Налаштування" → доставка, інакше створити її не вийде.

Якщо служба не налаштована, замовлення все одно приймаються, просто без ТТН — накладну ви створите вручну в картці замовлення.

2. Після цього натисніть кнопку "Зберегти", щоб переглянути, як зміни виглядатимуть на сайті.

Крок 4: способи оплати¶

1. У цій вкладці налаштуйте один або кілька допустимих варіантів оплати. Для цього в кожному із шаблонів вкажіть тип – накладений платіж, повна або часткова передплата – назву та опис для відображення на сайті, а також службу доставки, для справпраці з якою прийнятний такий спосіб оплати.

Таким чином можна налаштувати, наприклад, щоб клієнт мав змогу оформити замовлення з повною передплатою чи накладеним платежем, якщо обере Нову Пошту. Якщо ж він надасть перевагу Укрпошті, то отримає лише варіант із повною передплатою.

2. Щоб налаштувати спосіб із частковою передплатою, вкажіть її значення, наприклад, 200 грн., у спеціальному полі. ↓

3. До того ж у будь-який момент можна відредагувати чи видалити певний спосіб оплати. Після заповнення усіх шаблонів будь ласка ще раз уважно перевірте дані, особливо номери банківських карток, та в нижньому правому кутку натисніть кнопку "Зберегти", щоб переглянути, як зміни виглядатимуть на сайті.

Оплата карткою просто в магазині¶

Передплату можна приймати не реквізитами в описі, а карткою прямо на сайті. Для цього у способі оплати з повною або частковою передплатою позначте галочку "Оплата карткою через WayForPay".

Як це працює для покупця:

він обирає цей спосіб оплати й натискає "Оформити замовлення";
магазин одразу відкриває захищену сторінку оплати WayForPay — картка, Apple Pay, Google Pay або Приват24, залежно від того, що ви увімкнули в налаштуваннях каси;
після оплати покупець повертається на сторінку свого замовлення, а поки платіж не підтверджено, там видно, що замовлення очікує на оплату, і кнопку, щоб повернутися до каси.

Що відбувається у вас у CRM: до підтвердження оплати замовлення не створюється — ні резерву, ні ТТН. Щойно каса повідомляє про успішний платіж, замовлення з'являється в CRM уже зі статусом оплати "Оплачено", а сам платіж прив'язується до нього в розділі банківських платежів. Якщо покупець передумав і не заплатив, зайвого замовлення у вас не буде.

Спершу підключіть WayForPay

Галочка доступна, коли інтеграція WayForPay підключена, а в її налаштуваннях вказані MERCHANT LOGIN і MERCHANT SECRET KEY. Де їх узяти й як зареєструвати мерчант, описано в окремій інструкції — Інтеграція з WayForPay. Там же є тестові дані, щоб перевірити оплату без реальних грошей.

Галочка працює й для Telegram-бота магазину: бот надішле покупцеві кнопку "💳 Сплатити", а після оплати повідомить, що замовлення подано.

Крок 5: зовнішній вигляд¶

1. В останній вкладці налаштувань інтернет-магазину на основі CRM за потребою відредагуйте відображення та дизайн декоративних елементів.

2. Якщо позначити галочкою опцію "Прихована наявність", то клієнти на сайті замість конкретної доступної кількості товару бачитимуть текстове значення. Який саме текст відображатиметься на випадок наявності і відсутності товару, вкажіть у відповідних полях. ↓

3. Натисніть кнопку "Зберегти" і порівняйте: ліворуч товар до увімкнення прихованої наявності, праворуч — після.

4. Наступна необов'язкова для використання опція – текст у шапці сайту. Доцільно саме в цьому полі локанічно розповісти роздрібним покупцям про будь-які спецпропозиції – знижки, акції, подарункові упаковки, безкоштовну доставку за певних умов тощо. Навіть за відсутності вище зазначених варіантів рекомендуємо для підвищення продаж усе одно скористатися цим рядком, щоб заохотити клієнта зробити замовлення.

5. У нижньому правому кутку натисніть кнопку "Зберегти", щоб переглянути, як цей текст виглядатиме на сайті. ↓

Такий напис з'явиться у верхньому закріпленому рядку і невпинно супроводжуватиме клієнта на всіх сторінках інтернет-магазину аж до завершення оформлення замовлення. ↓

6. Щоб перетворити інтернет-магазин на основі CRM в простий каталог товарів, позначте галочкою пункт "Приховувати варіації і наявність при відображенні списку товарів". Ліворуч товар із наявністю й варіаціями, праворуч — він же в режимі каталогу: до такого магазину варто додати заклик написати менеджеру в тексті шапки сайту, про що йдеться в пунктах №4-5.

7. Щоб привернути увагу клієнтів до тих розмірів певних товарів, які доступні для замовлення, позначте галочкою пункт "Підсвічувати розміри в наявності".

Ліворуч товар до застосування цієї опції, праворуч — після: розміри в наявності виділені кольором.

8. Щоб додатково персоналізувати зовнішній вигляд вашого інтернет-магазину, оберіть з випадаючого списку колір основних та другорядних кнопок, наближений до ваших фірмових відтінків.

До основних кнопок належать: "Контакти" на стартовій сторінці, "Служби доставки", "Способи оплати", "Додати у кошик", "Оформити замовлення". Другорядними є "Зв'язатись з нами", "Додати інші товари".

Крок 6: тестове замовлення¶

1. Щоб переконатися в доцільності, точності та привабливості всіх налаштувань і роботи інтернет-магазину, створіть тестове замовлення. Для цього зайдіть у картку будь-якого доступного товару і натисніть "Додати у кошик".

2. Далі відкриється кошик з цим товаром і можливістю збільшити його кількість, додати інші позиції або перейти до оформлення замовлення.

3. Тепер покупець заповнює форму, вказуючи контактні дані, обираючи спосіб доставки та оплати. До речі, навіть на цьому етапі роздрібний покупець ще може збільшити чи зменшити кількість товару або взагалі видалити певну позицію.

4. Після завершення покупки клієнт опиниться на сторінці, де будуть повторно вказані всі його дані, номер замовлення та навіть автоматично згенерована в момент подачі ТТН, якщо налаштована така опція.

5. У той же момент замовлення потрапить в CRM і матиме приблизно такий вигляд ↓

Нижче в цій же картці — товари, які замовив покупець.

Крок 7: кілька інтернет-магазинів¶

За потреби створіть ще один інтернет-магазин на основі CRM у рамках одного акаунту, щоб розділити категорії товарів для реалізації, аудиторію покупців тощо. Для цього на сторінці налаштування інтеграції "Інтернет-магазин" натисніть кнопку "Додати ще один інтернет-магазин". Після доплати відкриється доступ для налаштувань ще одного торгового майданчика.

Крок 8: Telegram-бот інтернет-магазину¶

Ваш інтернет-магазин на основі CRM може працювати не лише як сайт, а й як Telegram-бот: роздрібні покупці переглядають ваш каталог і оформлюють замовлення прямо в Telegram, а самі замовлення потрапляють у CRM так само, як із сайту. Бот використовує ті самі налаштування доставки, оплати й асортименту, що ви задали для цього інтернет-магазину в попередніх кроках.

Не плутайте з персональним Telegram-ботом

Роздрібний Telegram-бот призначений для кінцевих покупців. Якщо ж вам потрібен бот, через який дропшипери подають вам замовлення, — це окрема інтеграція, Персональний Telegram-бот.

1. Спершу створіть бота в Telegram через офіційного @BotFather: надішліть йому команду /newbot, вкажіть назву та ім'я (username) бота й скопіюйте виданий токен.

2. У CRM перейдіть у налаштування інтернет-магазину → вкладка "Основна інформація" → позначте галочкою пункт "Увімкнути Telegram-бота".

3. Вставте скопійований токен у поле "Токен бота" та натисніть "Зберегти". Після збереження під полем з'явиться клікабельне посилання на вашого бота — за ним клієнти зможуть його відкрити.

4. Заповніть "Текст привітання нових користувачів" — клієнт побачить його одразу після першого запуску бота. У полі "Текст у розділі «Підтримка»" (обов'язкове) вкажіть, як з вами зв'язатися для допомоги.

5. За потреби натисніть "Показати більше параметрів" і додайте:

Текст перед оформленням замовлення — щоб попередити клієнта про важливе (наприклад, на які реквізити робити передоплату, що вказати в примітці);
Текст після оформлення замовлення — підтвердження чи подяку, яку клієнт побачить після покупки.

6. У блоці "Кнопки з посиланнями в розділі «Підтримка»" за бажанням додайте кнопки з текстом і посиланням (наприклад, на ваш Telegram-канал, менеджера чи умови повернення). Після заповнення натисніть "Зберегти".

7. Готово! Тепер клієнти можуть відкрити бота за посиланням, обрати товари й оформити замовлення прямо в Telegram — воно автоматично з'явиться у вашій CRM.

Роздрібний Telegram-бот — це один зі способів приймати замовлення без коду. Огляд усіх варіантів взаємодії з CRM дивіться у статті Способи взаємодії з МійДроп.

Крок 9: власний домен¶

Магазин працює одразу на адресі mypricelist.com.ua/ваша-назва — купувати домен не обовʼязково. Але частина можливостей доступна тільки на власному домені, бо вони вимагають, щоб сайт належав саме вам.

	На нашій адресі	На власному домені
Магазин працює, приймає замовлення	так	так
Адреса в пошуку, карта сайта	так	так
Google Analytics, Meta Pixel, TikTok	—	так
Конверсії Google Ads	—	так
Google Shopping і Merchant Center	—	так
Google Search Console на свій сайт	—	так

Чому так: на спільній адресі всі магазини живуть на одному сайті. Чужий код звідти бачив би дані покупців сусідніх магазинів, тому ми його не підключаємо. А Merchant Center приймає тільки домен, яким ви володієте самі — це його вимога, не наша.

Пошук і карта сайта працюють одразу¶

Пошукова оптимізація не вимагає ні домену, ні налаштувань. Кожна сторінка магазину віддається пошуковику вже готовою: власний заголовок і опис, canonical, картинка для соцмереж, розмітка товару з назвою, ціною та наявністю і "хлібні крихти". Карта сайта з усіма товарами й категоріями формується автоматично та оновлюється разом зі складом — складати й завантажувати її вручну не треба.

Працює це на обох адресах, тож магазин починає індексуватися з першого дня, навіть якщо домен ви купите значно пізніше. А коли купите — стара адреса сама переадресує на нову, і накопичені позиції не загубляться.

Як підключити¶

1. Купіть домен у будь-якого реєстратора. Підійде будь-яка зона: .com.ua, .ua, .com, .shop.
2. У налаштуваннях інтернет-магазину відкрийте вкладку "Власний домен" і впишіть його без https:// і без шляху — наприклад testshop.com.ua. Натисніть "Зберегти".

3. У панелі керування доменом (у реєстратора або в Cloudflare) додайте один A-запис — його значення показане тут же, на вкладці.

Якщо домен у Cloudflare

Проксіювання для цього запису має бути вимкнене — сіра хмаринка, а не помаранчева. З увімкненим проксі сертифікат для вашого магазину не випуститься.

4. Натисніть "Перевірити зараз". Якщо запис уже розійшовся, статус одразу стане зеленим. Зміни в DNS розходяться від кількох хвилин до кількох годин — якщо ще не видно, перевірте пізніше, магазин перевіряє домен сам кожні 10 хвилин.

5. Готово. Сертифікат випускається автоматично під час першого відкриття сайту — окремо нічого робити не треба. Стара адреса на mypricelist.com.ua продовжує працювати й сама переадресовує на ваш домен, тому збережені клієнтами посилання не зламаються.

На цій же вкладці зʼявляться два посилання:

Фід для Google Merchant Center — додайте його в Merchant Center як заплановане завантаження, і ваші товари потраплять у Google Shopping. Товари, ціни та наявність у фіді ті самі, що показує магазин.
Карта сайта — додайте сайт у Google Search Console і вкажіть там цю карту, щоб сторінки швидше потрапляли в пошук.

Крок 10: аналітика та реклама¶

Після підключення домену на тій самій вкладці зʼявиться блок "Аналітика та реклама". Вставте в поля тільки ідентифікатори — код аналітики магазин підставить сам.

Які події надсилає магазин¶

Налаштовувати нічого не треба, події йдуть автоматично:

Що зробив покупець	Google Analytics / Tag Manager	Meta	TikTok
Відкрив сторінку	`page_view`	`PageView`	`page`
Відкрив картку товару	`view_item`	`ViewContent`	`ViewContent`
Додав товар у кошик	`add_to_cart`	`AddToCart`	`AddToCart`
Перейшов до оформлення	`begin_checkout`	`InitiateCheckout`	`InitiateCheckout`
Оформив замовлення	`purchase`	`Purchase`	`CompletePayment`

У події покупки передаються сума замовлення, валюта, номер замовлення та список товарів — цього достатньо, щоб у звітах була не просто кількість покупок, а виручка.

Де взяти ідентифікатори¶

Google Analytics 4 — вигляд G-XXXXXXXXXX. Відкрийте analytics.google.com → "Адміністратор" → "Потоки даних" → виберіть свій веб-потік. Ідентифікатор написаний угорі праворуч, поруч із адресою сайту.

Google Ads — вигляд AW-XXXXXXXXXX, і окремо мітка конверсії. У Google Ads відкрийте "Цілі" → "Конверсії" → "Підсумок" → створіть або виберіть конверсійну дію "Покупка" → "Налаштувати тег". У коді тега буде рядок виду 'send_to': 'AW-17081424125/qKm9CMrT3bEaEP2'. До косої риски — ідентифікатор, після неї — мітка конверсії. Впишіть їх у два відповідні поля.

Навіщо потрібна мітка

Без неї Google Ads бачить, що на сайті щось відбулося, але не знає, яку саме конверсійну дію зарахувати. Покупки не будуть потрапляти у звіти, і автоматичні стратегії ставок працюватимуть наосліп.

Google Tag Manager — вигляд GTM-XXXXXXX. Потрібен, тільки якщо ви вже працюєте через GTM і хочете налаштовувати теги самі. Ідентифікатор написаний угорі в tagmanager.google.com, поруч із назвою контейнера. Події з таблиці вище приходять у dataLayer під тими самими іменами — тригери створюйте на них.

Meta Pixel — довге число, наприклад 318204996471835. У business.facebook.com відкрийте "Events Manager" → виберіть свій піксель → ідентифікатор написаний під його назвою. Якщо пікселя ще немає, натисніть "Підключити джерела даних" → "Веб".

TikTok Pixel — вигляд CQ8F1KJC77UA9N3B2KLG. У рекламному кабінеті ads.tiktok.com відкрийте "Інструменти" → "Події" → "Веб-події" → виберіть піксель. Ідентифікатор написаний поруч із його назвою.

Власний код у шапці сайту — для всього іншого: Hotjar, Clarity, чат-віджети, мета-тег підтвердження прав у Search Console. Вставляється в <head> кожної сторінки магазину як є.

Як перевірити, що все працює¶

Не вірте на слово — відкрийте магазин і подивіться самі:

Google — розширення Google Tag Assistant для Chrome показує всі теги на сторінці та події, які вони надіслали.
Google Analytics — розділ "Адміністратор" → "DebugView" показує події в реальному часі, поки ви ходите по сайту.
Meta — розширення Meta Pixel Helper для Chrome.

Найпростіша перевірка: відкрийте картку товару, додайте її в кошик і оформіть тестове замовлення. У Tag Assistant або DebugView мають зʼявитися view_item, add_to_cart, begin_checkout і purchase із сумою.

Якщо подій немає

Перевірте, що домен має зелений статус "Домен підключено". На адресі mypricelist.com.ua аналітика не підключається — це описано в попередньому кроці.

Розвивайте свій бізнес разом із МійДроп! Збирайте замовлення з різних торгових майданчиків в одному місці, приймайте рішення на основі статистики та багато іншого – https://mydp.co.ua/KbLyy