> Для AI-агентів: це Markdown-версія сторінки https://figmatica.com/uk/blog/ecommerce-funnel-tof-mof-bof. Повний індекс сайту Figmatica для LLM: https://figmatica.com/llms.txt

# Воронка e-commerce від TOF до BOF: як продають AG1 та інші DTC-бренди на мільярд

- Автор: [Михайло Ємчура](https://figmatica.com/uk/blog/authors/mike-yemchura), Засновник і CEO
- Опубліковано: 2026-09-26
- Категорія: Веб-дизайн

**Що вимірює кожен етап воронки інтернет-магазину, від CTR угорі до повторних замовлень і LTV унизу, як її змінюють вау-товари, рішення і вау + рішення, і як нею користуються магазини одного товару, нішеві й брендові. На прикладі воронки AG1, пройденої до чекауту, Oura, Skims, Quince, Olipop, Liquid Death, The Farmer's Dog і магазинів Figmatica.**

Чоловік гортає стрічку перед сном і зупиняється на відео: Г'ю Джекман, склянка зеленого напою, одна ложка у воді зранку. Він тисне. Сторінка каже: мінус 40% на перший місяць. Через два екрани він дивиться на пакет, шейкер, банку і пʼять дорожніх саше, ціну €87, закреслену з €107, і рядок про те, що 93% клієнтів обирають підписку. Він ще нічого не вирішив купувати. Магазин уже вирішив, що він побачить далі.

У цього шляху є назва, воронка, і три поверхи: TOF, MOF і BOF, тобто верх, середина і низ воронки. Кожен серйозний інтернет-магазин міряє кожен поверх своїми числами. Нижче те, що таке кожен поверх, що на ньому вимірюють, як тип товару і тип магазину його змінюють і як будують свою воронку AG1, оцінений у $1,2 млрд, та інші DTC-бренди вартістю від мільярда. Далі наші власні магазини і чеклист для вашого.

## Головне

- **TOF міряють CTR.** Верх воронки відповідає на одне питання: чи обіцянка змусила незнайомця клікнути.
- **MOF це додавання в кошик, чекаут, покупка.** Середина це місце, де продає сама сторінка, і кожен крок має власний відтік.
- **BOF це повторні замовлення і LTV.** Низ вирішує, чи перше замовлення окупило рекламу, чи тільки почало.
- **Тип товару обирає сильний поверх.** Вау-товари виграють угорі, рішення виграють унизу, вау + рішення може виграти обидва.
- **Кожен зайвий клік забирає конверсію.** У наших магазинах «Додати в кошик» є на кожному екрані, навіть усередині галереї фото, як на сторінці товару GUD.
- **AG1 будує всі три на одному товарі.** Набір і підписка на сторінці товару, допродажі на чекауті і 30-денний маршрут, який тримає підписника довше першого місяця.

## Що таке TOF, MOF і BOF в e-commerce

TOF, top of funnel, верх воронки, це момент, коли незнайомець зустрічає товар: реклама в стрічці, відео, результат пошуку, огляд блогера. Тут магазин ще не продає. Він заробляє клік. Головне число це CTR, click-through rate: кліки, поділені на покази. Поруч стоять ціна цих показів і кліків, CPM і CPC, і кількість сесій, які справді доходять до сайту.

MOF, middle of funnel, середина воронки, це сам магазин: лендинг, сторінка товару, кошик і чекаут. Його вимірюють ланцюжком показників. Add to cart: кошики, поділені на сесії. Checkout: чекаути, поділені на кошики. Purchase: замовлення, поділені на чекаути, і конверсія, замовлення, поділені на сесії. Поруч AOV, середній чек, який піднімають набори і допродажі.

BOF, bottom of funnel, низ воронки, починається після першого замовлення. Repeat purchase rate: частка клієнтів, які замовляють знову. Для підписок утримання і відтік помісячно. І LTV, lifetime value: скільки клієнт приносить за всі стосунки. LTV поруч із CAC, ціною залучення цього клієнта, показує, чи заробляє вся воронка.

| Етап | Питання | Що вимірюють | Де це на сайті |
| --- | --- | --- | --- |
| TOF | Чи обіцянка заробила клік? | CTR, CPM, CPC, сесії | Реклама, перший екран лендингу |
| MOF | Чи сторінка перетворила візит на замовлення? | Додавання в кошик, чекаут, покупка, конверсія, AOV | Сторінка товару, пропозиція, кошик, чекаут |
| BOF | Чи перше замовлення стало стосунками? | Повторні замовлення, утримання, відтік, LTV, LTV:CAC | Підписка, кабінет, email і SMS, реферали |

*Кожен показник міряють крок за кроком, щоб бачити, де саме люди йдуть.*

## Вау, рішення чи обидва: як товар змінює воронку

Вау-товар продається з першого погляду. Він зупиняє палець у стрічці, тож виграє вгорі: високий CTR, дешеві кліки. Ризик унизу: друга покупка потребує причини, сильнішої за здивування. Liquid Death це найчистіший вау в категорії: вода в банці як у пива, смаки з назвами Mango Chainsaw і Severed Lime, перший екран, що обіцяє безкоштовну бензопилу до енергетика. Оцінка $1,4 млрд каже, що бренд цю причину постійно дає.

Товар-рішення продається на проблемі, яка в покупця вже є: енергія, травлення, раціон собаки, дешевший кашеміровий светр. Верх воронки складніший, бо проблема менш клікабельна за видовище. Середині потрібні докази: склад, дослідження, відгуки, гарантія. Винагорода внизу: проблема, яка повертається щоранку, робить підписку природною, і LTV росте разом з нею. AG1 і The Farmer's Dog це рішення.

Вау + рішення це рідкісний товар, який робить обидва. Oura це кільце, яке виглядає як прикраса і стежить за 50+ показниками здоровʼя; перша властивість виграє клік, друга тримає підписку. Skims називає себе брендом, орієнтованим на рішення, і продає білизну, про яку люди пишуть у соцмережах. Такі товари можуть виграти кожен поверх, тому в них одні з найбільших оцінок: Oura $11 млрд, Skims $5 млрд.

![Головна Liquid Death: Buy Liquid Death Energy, get a free chainsaw, воїн із бензопилою і дві банки](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/liquid-death.webp)
*liquiddeath.com, перший екран: вау-товар продається з першого погляду*

## Один товар, ніша чи бренд: три типи магазину

Магазин одного товару продає одного героя і будує довкола нього все інше: набори, підписки, аксесуари, додатки. Увесь сайт штовхає до однієї кнопки, тож середина воронки коротка, а AOV росте на допродажах. AG1 продає один порошок; Oura продає одне кільце за $399 і членство за $5,99 на місяць поверх нього.

Нішевий магазин глибоко обслуговує одну аудиторію: власників собак, велосипедистів, скелелазів, молодих батьків. Він виграє на релевантності, бо кожна сторінка говорить з тією самою людиною, і на низу воронки, бо ця людина повертається. The Farmer's Dog, підписка на свіжий корм для собак з планом під породу, вік і вагу кожного пса, перевищив $1 млрд річної виручки і був оцінений у $1,46 млрд в останньому розкритому раунді.

Брендовий магазин продає світ, а не річ: багато товарів, яких тримає разом назва, стиль і обіцянка. Його воронка починається вгорі з контенту і спільноти, а повторні замовлення заробляє новими дропами. Skims відкривається кампанійним фото і новою колекцією; Quince, оцінений у $10,1 млрд, обіцяє якісні базові речі за радикальними цінами і ставить у меню кашемір за $50.

| Тип магазину | Сильний поверх | Як ростуть AOV і LTV | Приклади |
| --- | --- | --- | --- |
| Один товар + допродажі | MOF | Набори, допродажі в кошику, підписка або членство | AG1, Oura |
| Нішевий магазин | BOF | Персональні плани, поповнення, одна аудиторія, що повертається | The Farmer's Dog |
| Брендовий магазин | TOF | Нові дропи, колекції, спільнота | Skims, Quince, Liquid Death |

## Воронка AG1 від стрічки до чекауту

AG1 це магазин одного товару для товару-рішення, і верх воронки він доручає обличчям. Перший екран це кампанія з Г'ю Джекманом; нижче цитати Льюїса Гамільтона, спортсменів і підприємців, кожна з іменем і титулом. Переваги це шість коротких блоків: енергія, імунітет, травлення, стрес, результати, шкіра. А пропозиція стоїть у верхній смузі кожної сторінки: мінус 40% на перший місяць. Хоч би яка реклама привела відвідувача, та сама обіцянка зустрічає його на сайті, тож клік і сторінка збігаються.

![Головна AG1: Save 40% in your first month у верхній смузі, кампанія з Г'ю Джекманом, Shop Now](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/ag1-home.webp)
*drinkag1.com, перший екран: пропозиція живе у верхній смузі на кожній сторінці*

Середина воронки це одна сторінка товару, що робить три роботи. Пропозиція це набір, а не пакет: AG1 плюс вітальний набір, вітамін D3+K2 і пʼять дорожніх саше, €87 замість €107, а фото показує кожну річ з її вартістю. Вибір зведено до двох: одинарна підписка, 30 порцій, позначка «найпопулярніше»; подвійна, 60 порцій, позначка «найвигідніше». Тип покупки обрано наперед, Subscribe and Save, а над ним рядок соціального доказу: його обирають 93% клієнтів. Разова покупка є, за €107, одразу нижче.

Заперечення закрито поруч із кнопкою: гарантія повернення грошей 30 днів, безпечний чекаут, безкоштовна доставка для підписки, скасування одним кліком, доставка кожні чотири тижні.

![Сторінка товару AG1: фото набору, €87 замість €107, одинарна чи подвійна підписка, 93% клієнтів обирають Subscribe & Save](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/ag1-offer.webp)
*Сторінка товару: одна пропозиція, дві кількості, підписка обрана наперед*

Під кнопкою перший допродаж, order bump під назвою Complete Your Wellness Stack: риб'ячий жир Омега-3 за +€22, вітамін D3+K2 за +€24, кожен за один дотик. Тут AOV росте без другого рішення.

![AG1: що входить у підписку, Buy Now і Complete Your Wellness Stack з Омега-3 і вітаміном D3+K2](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/ag1-bump.webp)
*Під кнопкою: допродаж, дві добавки за +€22 і +€24*

Buy Now оминає кошик і відкриває чекаут. Там чекають три речі. Зелений рядок, безкоштовну доставку розблоковано. Таймер: ми зарезервували ваш кошик на наступні десять хвилин. І в підсумку замовлення блок Add to this order з іншими добавками і кнопкою Add біля кожної. Експрес-оплата стоїть над формою, а поле email пише, що адресу використають для підтвердження замовлення і для нагадувань про кошик: магазин уже планує, як повернути відвідувача, який піде звідси.

![Чекаут AG1: безкоштовну доставку розблоковано, кошик зарезервовано на десять хвилин, експрес-оплата і Add to this order з трьома добавками](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/ag1-checkout.webp)
*Buy Now веде одразу на чекаут, де кошик зарезервовано, а інші товари за один клік*

Низ воронки починається ще до першого замовлення. На сторінці товару блок Your 30-Day AG1 Journey: дні 1–7, енергія; дні 8–14, імунітет; дні 15–30, травлення. Підписник, який знає, коли чекати результату, лишається достатньо довго, щоб його відчути, а друга доставка приходить на четвертий тиждень, саме коли маршрут закінчується. Довкола решта BOF: кабінет учасника, програма «приведи друга», email і WhatsApp для пропозицій.

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

![AG1: Your 30-Day AG1 Journey, дні 1–7 підтримка енергії, дні 8–14 підтримка імунітету, поруч FAQ](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/ag1-journey.webp)
*Низ воронки починається на сторінці товару: чого чекати в кожен тиждень першого місяця*

## Oura: одне кільце, одне членство

Oura, оцінена в $11 млрд, продає вау + рішення в магазині одного товару. Верх воронки чистий вау: Subtle. Power. The world's smallest smart ring is here, над срібним кільцем на чорному камені, по якому повзе сонечко. Рішення зʼявляється на один скрол нижче: зрозумійте своє тіло, 50+ показників здоровʼя, 86% учасників бачать, що здоровʼя покращилось, та історії учасників з іменем і діагнозом.

Сторінка товару прибирає єдине тертя, яке має кільце: розмір. Обираєте колір, далі безкоштовний набір для примірки перед покупкою. Низ воронки вбудовано в продукт: членство за $5,99 на місяць, перший місяць безкоштовно, яке відкриває аналітику і AI-помічника зі здоровʼя. Кільце це перше замовлення; членство це LTV.

![Головна Oura: Oura Ring 5, Subtle. Power. The world's smallest smart ring, кільце на темному камені з сонечком](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/oura.webp)
*ouraring.com, перший екран: вау на верху воронки*

![Сторінка Oura Ring 5: кольори, $399, Free Sizing Kit, Select your size, Add to Cart](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/oura-ring.webp)
*ouraring.com, сторінка товару: безкоштовний набір для примірки перед кільцем*

## Skims і Quince: брендові магазини на верху воронки

Skims, оцінений у $5 млрд, веде магазин як журнал: кампанійне фото, назва сезону, Shop Now, далі дропи один за одним, нова лінія для сну, бюстгальтери, на які «переходять усі», добірка колаборації. Низ воронки на відстані одного SMS: надішліть SKIMS на короткий номер, щоб не пропустити дроп, а дрібний текст каже, що в цих повідомленнях будуть і нагадування про кошик. Для брендового магазину наступний дроп і є повторне замовлення.

![Головна Skims: Fall Cotton, кампанійне фото, Shop Now](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/skims.webp)
*skims.com, перший екран*

Quince, оцінений у $10,1 млрд, продає рішення через бренд: розкішні матеріали за ціною, яка читається як помилка. Верхня смуга каже це пʼятьма словами, якісні базові речі за радикальними цінами, а перший пункт меню це ціна, кашемір за $50. Безкоштовна доставка і повернення протягом 365 днів знімають заперечення купувати одяг онлайн. Кожна картка товару має ціну й рейтинг, тож середина воронки відбувається вже на головній.

![Головна Quince: High-quality essentials at radical prices, $50 Cashmere у меню, кампанія і круглі фото категорій](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/quince.webp)
*quince.com, перший екран*

## Olipop і The Farmer's Dog: рішення, які повертаються

Olipop, оцінений у $1,85 млрд, продає кращу газовану воду і вдягає рішення у вау: карамель стікає по зеленому яблуку, Drippin' in delicious. Клітковина, яка робить його рішенням, є на кожній картці, 9 г, поруч із рейтингом, порахованим сотнями відгуків. Середина воронки має два важелі: упаковка з 12 банок як одиниця продажу і поріг безкоштовної доставки $50, який повторює кошик: витратьте $50 або оформіть підписку, щоб доставка стала безкоштовною. Обидва піднімають AOV, а другий ще й штовхає BOF.

The Farmer's Dog це нішевий магазин у масштабі: свіжий корм для собак за підпискою, план під породу, вік, вагу і цілі щодо здоровʼя кожного пса, доставка порційними охолодженими пакетами. Компанія перевищила $1 млрд річної виручки і була оцінена в $1,46 млрд в останньому розкритому раунді. Для нішевого магазину персоналізація і є воронкою: план складають раніше, ніж показують ціну, а тому самому собаці той самий корм потрібен і наступного місяця.

![Головна Olipop: Drippin' in delicious, карамель стікає по зеленому яблуку, безкоштовна доставка від $50 у верхній смузі](https://figmatica.com/assets/blog/ecommerce-funnel-tof-mof-bof/olipop.webp)
*drinkolipop.com, перший екран*

## E-commerce від Figmatica

Наші власні магазини лежать на тій самій карті. GUD, український бренд рюкзаків і сумок, це брендовий магазин; Poelle продає шкіряні сумки; Everscape перетворює 2D-фото на 3D-принти на склі, вау-товар; Ministry of Desserts це Shopify-магазин київських кондитерських, чий верх воронки живить SEO; Smash. це тенісний бренд; а для KFC Україна ми зробили промо-сайт з глибинним скролом, чистий верх воронки.

- [GUD](https://figmatica.com/uk/cases/gud): Український бренд рюкзаків і сумок. Редизайн магазину, три кроки від головної до кошика.
- [Everscape](https://figmatica.com/uk/cases): 3D-принти на склі з 2D-фото. Сайт для вау-товару.
- [Poelle](https://figmatica.com/uk/cases): Український бренд шкіряних сумок. Інтернет-магазин, розробили й підтримуємо.
- [Ministry of Desserts](https://figmatica.com/uk/cases): Shopify-магазин і SEO для київської кондитерської.
- [KFC Ukraine](https://figmatica.com/uk/blog/kfc-depth-scrolling): Промо-сайт з глибинним скролом у стилі Apple для кампанії KFC.
- [Smash.](https://figmatica.com/uk/cases): Лендинг для тенісного бренду.

## Кожен зайвий клік забирає конверсію

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

Перше, багато фото товару. Сторінка ROAD 2.0 відкривається їхньою сіткою: сумка з кожного боку, ремені, нутрощі, відділення для ноутбука, деталі зблизька. Поруч із сіткою права колонка тримається на місці, поки гортаєш: назва, ціна, колір, «Додати в кошик». Покупець роздивляється сумку, а кнопка завжди на відстані погляду.

Друге, кнопка всередині галереї. Натисніть будь-яке фото, і воно відкривається на весь екран, з мініатюрами збоку, стрілками, збільшенням, а внизу назва, ціна і «Додати в кошик». Таке трапляється рідко: більшість магазинів змушують закрити фото і гортати вгору, щоб купити. Тут покупець додає сумку, ще дивлячись на неї, а кошик виїжджає з трьома речами до неї, плечовим ременем, підсумком і шопером, у кожної своя кнопка «Додати в кошик».

![Сторінка товару GUD: фото відкривається на весь екран, стрілки гортають ракурси, «Add to cart» у галереї відкриває кошик із доречними додатками](https://d338fcbjvovhvo.cloudfront.net/assets/blog/ecommerce-funnel-tof-mof-bof/gud-gallery.mp4)
*GUD: «Додати в кошик» просто в галереї фото, далі кошик із допродажами*

Третє, сумка в реальному житті. Нижче на сторінці блок In real life: фото і короткі відео сумки на людях, у супермаркеті, на мотоциклі в горах, в авто, у майстерні. Кожна картка відкривається на весь екран як сторіз, з відтворенням, паузою і звуком. Покупець, який бачив сумку на полиці, тепер бачить її на людині, і це відповідає на питання, на яке фото на сірому тлі не відповість: як вона виглядатиме на мені.

І на всю довжину сторінки за покупцем їде липка панель: ROAD 2.0 SAND, $225, «Додати в кошик». Хоч би що його переконало, фото, матеріали, відділення для ноутбука, відео на мотоциклі, кнопка вже поруч.

![Блок GUD In real life: фото і відео сумки на людях, відео відкривається на весь екран як сторіз, і липка панель із ціною та «Add to cart»](https://d338fcbjvovhvo.cloudfront.net/assets/blog/ecommerce-funnel-tof-mof-bof/gud-in-real-life.mp4)
*GUD: In real life і липка кнопка «Додати в кошик» на кожному екрані*

Довкола решта магазину тримається того самого правила. Головна відкривається однією сумкою, ROAD 2.0 BLACK, її описом і однією кнопкою, а бестселери починаються одразу під нею; з першого екрана до кошика три кроки. Ми почали з аналізу UX і структури старого магазину і поставили чотири цілі: коротший шлях до товару, простіші навігація і фільтри, сильніша айдентика, більше простору для конверсії.

![Сторінка товару і кошик GUD на телефоні](https://d338fcbjvovhvo.cloudfront.net/assets/work/gud/product-cart.mp4)
*GUD: від товару до кошика на телефоні*

На телефоні каталог це один довгий список: категорії картинками згори, далі сортування і фільтр, далі картки товарів з ціною і кнопкою «у кошик» на кожній, тож покупець може додати сумку, не відкриваючи її сторінку. Дизайн зайняв 5,5 тижня: тиждень досліджень з інтервʼю і конкурентами, тиждень UX з персонами за кожним рішенням, півтора тижні прототипів, два тижні UI. Уся дошка в [кейсі GUD](https://figmatica.com/uk/cases/gud).

![Каталог GUD на телефонах: категорії, фільтри і картки товарів з кнопкою «у кошик»](https://d338fcbjvovhvo.cloudfront.net/assets/work/gud/mobile-columns.mp4)
*GUD: каталог у телефоні, «у кошик» на кожній картці*

## Сфокусоване і контекстуальне бачення: один магазин, різні очі

Скільки показувати на одному екрані, залежить від того, хто дивиться. Довго дизайн інтерфейсів спирався на ідею фігури й фону: мозок відокремлює головне від тла, тож дайте йому одне чітке головне. Культурна психологія зʼясувала, що в різних культурах це працює по-різному. В експериментах Масуди і Нісбетта американці спершу описували центральний обʼєкт сцени, а японці контекст і звʼязки між речами. Сфокусована увага більш характерна для користувачів США, Канади, Великої Британії; користувачі Японії і Тайваню демонструють контекстуальну увагу, спершу оглядаючи периферію інтерфейсу і звʼязки між елементами, а вже потім центр.

В e-commerce це видно з першого екрана. Західний магазин бінарний: для жінок, для чоловіків, один екран, одне рішення, короткий шлях за руку. Східний магазин відкривається як огляд сценаріїв: за колекцією, за категорією, за ціною, одразу до товару, тож покупець спершу обирає логіку покупки, а потім товар. Його сторінки товару відкривають усі фото одразу, з кожного ракурсу, і ставлять багато дій поруч, аж до додавання конкретного розміру одним дотиком. Західний дизайнер назвав би це помилкою на помилці; японська покупчиня пояснила, чому їй так подобається: що більше інформації, то впевненіше вона почувається, що все робить правильно.

Тож магазин мусить знати, під чиї очі він зроблений, а магазин, що продає на кількох ринках, може взяти з обох. GUD тримає одну чітку дію на кожному екрані, західну звичку, і дає покупцю багато фото й відео товару, ту насиченість, яку шукає контекстуальне око. Михайло Ємчура розбирає різницю між східним і західним веб-дизайном, на прикладі e-commerce, корпоративних сайтів і лендингів, у відео на каналі Фігматики: [Східний vs західний вебдизайн, чому така різниця](https://www.youtube.com/watch?v=ay4ieIpm1jQ).

## Сім DTC-брендів поруч

| Бренд | Товар | Тип магазину | Оцінка | Що взяти |
| --- | --- | --- | --- | --- |
| AG1 | Рішення | Один товар + допродажі | $1,2 млрд | Набір, підписка наперед, допродажі, 30-денний маршрут |
| Oura | Вау + рішення | Один товар + членство | $11 млрд | Безкоштовна примірка, LTV у членстві |
| Skims | Вау + рішення | Брендовий магазин | $5 млрд | Дропи як повторні замовлення, SMS з нагадуваннями |
| Quince | Рішення | Брендовий магазин | $10,1 млрд | Ціна в меню, повернення 365 днів |
| Olipop | Рішення у вау-обгортці | Брендовий магазин | $1,85 млрд | Упаковка з 12, поріг безкоштовної доставки |
| Liquid Death | Вау | Брендовий магазин | $1,4 млрд | Промо, яке зупиняє скрол, мерч |
| The Farmer's Dog | Рішення | Нішевий магазин | $1,46 млрд | Персональний план до ціни |

*Оцінки з їхніх раундів фінансування за даними ділової преси.*

## Чеклист інтернет-магазину, поверх за поверхом

Якщо ви пишете ТЗ на інтернет-магазин, візьміть цей перелік разом з референсами і перевірте кожен поверх.

- **TOF: реклама і перший екран кажуть те саме.** Одна пропозиція від креативу до верхньої смуги, обличчя або видовище, які заробляють клік.
- **MOF: одна пропозиція, мало виборів.** Набір замість каталогу, дві кількості, рекомендований варіант обрано наперед з доказом над ним.
- **MOF: заперечення поруч із кнопкою.** Гарантія, доставка, повернення, скасування, розмір, по одному рядку на кожне.
- **MOF: «Додати в кошик» на кожному екрані.** Поруч із фото, всередині повноекранної галереї, у липкій панелі, на кожній картці каталогу.
- **MOF: допродаж у правильний момент.** Допродаж під кнопкою, додатки на чекауті, поріг безкоштовної доставки в кошику.
- **BOF: причина для другого замовлення.** Підписка, членство, поповнення, новий дроп, карта того, що принесе перший місяць.
- **BOF: шлях назад.** Нагадування про кошик в email і SMS, кабінет учасника, реферали.

Ми проєктуємо і робимо інтернет-магазини на Shopify, Webflow і Next.js: брендові магазини, магазини одного товару з допродажами, нішеві магазини. Якщо папка референсів уже відкрита, надішліть її разом з товаром і числами вашої воронки, і на дзвінку ми пройдемо, на якому поверсі втрачається найбільше і що виправити першим.

> Найбільше вразили їхня увага до деталей і професійна порядність.
> Ігор Гуд, Засновник, Clutch

> Хлопці зробили більше, ніж обіцяли, і швидко вносили зміни, які ми просили, тож співпраця пройшла гладко.
> Артем Кузьмич, COO, Clutch

> **Про Figmatica.** Figmatica є дизайн-студією, яка розробляє [AI-нативні сайти](https://figmatica.com/uk/services/agentic-website). Серед наших клієнтів є WWF Україна, KFC Україна, Український фонд стартапів, BRDO, RIEL і TAF Industries. Ми робимо [редизайн сайтів так, щоб ви не втратили трафік з Google](https://figmatica.com/uk/services/legacy-migration) і [вас почали знаходити й рекомендувати ChatGPT, Claude і Perplexity](https://figmatica.com/uk/services/demand-generation). Так, це реклама в кінці статті, зате коротка, тож [запишіться на дзвінок](https://figmatica.com/uk/book), і ми покажемо на концептах, як може виглядати сайт вашої компанії.


## Часті питання

### Що означають TOF, MOF і BOF в e-commerce?

Верх, середина і низ воронки. TOF це місце, де незнайомець зустрічає товар і клікає, його міряють CTR. MOF це сам магазин, його міряють додаваннями в кошик, початками чекауту, покупками і конверсією. BOF починається після першого замовлення, його міряють повторними замовленнями, утриманням і LTV.

### Які показники відстежувати інтернет-магазину на кожному етапі?

TOF: CTR, CPM, CPC і сесії. MOF: частка додавань у кошик, частка чекаутів, частка покупок, конверсія і AOV. BOF: частка повторних покупок, утримання й відтік підписки, LTV і співвідношення LTV до CAC.

### Як AG1 продає через свій сайт?

Одна пропозиція у верхній смузі кожної сторінки, набір замість одного пакета, підписка, обрана наперед, з рядком про те, що її обирають 93% клієнтів, допродаж під кнопкою, Buy Now одразу на чекаут із зарезервованим кошиком і додатками, і 30-денний маршрут, який каже підписнику, чого чекати щотижня.

### Чим вау-товар відрізняється від товару-рішення?

Вау-товар продається з першого погляду і виграє на верху воронки, як Liquid Death. Рішення продається на проблемі, яка в покупця вже є, і виграє внизу через повторні замовлення, як AG1. Вау + рішення робить обидва, як Oura, кільце, яке виглядає як прикраса і стежить за здоровʼям.

### Що будувати: магазин одного товару, нішевий чи брендовий?

Магазин одного товару підходить товару-герою, довкола якого є місце для наборів і підписки, як AG1 чи Oura. Нішевий магазин підходить одній аудиторії з регулярною потребою, як The Farmer's Dog для собак. Брендовий магазин підходить асортименту, який тримає разом назва і стиль, як Skims чи Quince, і живе новими дропами.

### Навіщо кнопка «Додати в кошик» на кожному екрані?

Бо кожен зайвий клік забирає конверсію: покупець, який мусить шукати кнопку, починає сумніватися. На сторінці товару GUD кнопка стоїть поруч із фото, усередині повноекранної галереї, у липкій панелі на всю сторінку і на кожній картці каталогу, тож покупець додає сумку в ту мить, коли вирішує.

### Чи показувати більше на одному екрані для азійських ринків?

Часто так. Користувачі США, Канади й Великої Британії схильні до сфокусованої уваги й одного рішення на екран; користувачі Японії і Тайваню схильні до контекстуальної уваги і читають усю композицію, тож насичені сторінки товару з багатьма фото і діями дають їм упевненість. Магазин для кількох ринків може тримати одну чітку дію на екран і водночас давати багато фото й відео.


## Пов'язане

- [Сайти зі сторітелінгом](https://figmatica.com/uk/services/storytelling-websites): Сайти, які приводять трафік і переконують людей.
- [Що таке агентний сайт](https://figmatica.com/uk/services/agentic-website): Пояснюємо простими словами.
- [GUD: 5,5 тижня від дослідження до фінального дизайну: редизайн інтернет-магазину бренду рюкзаків](https://figmatica.com/uk/cases/gud)