Типова задача: інтернет-магазин на Webflow з каталогом у 500 товарів, кожен товар має 15 характеристик, 3 категорії, 2 бренди та 5 тегів. Стандартна колекція впирається в ліміт 20 полів, а прості зв'язки не дають гнучкої фільтрації. Замість того щоб мігрувати на іншу платформу, ми проектуємо схему з кількох пов'язаних колекцій та реалізуємо просунуту фільтрацію через Finsweet CMS Filter. За 2–3 тижні отримуємо продуктивний каталог з AJAX-пагінацією та багатокритеріальним пошуком.
Ми розробляємо кастомні CMS-колекції Webflow під ключ. Наші інженери щодня вирішують завдання складних зв'язків, синхронізації з CRM та обходу обмежень платформи. У цій статті розберемо реальні кейси та технічні рішення.
Як пов'язати CMS-колекції між собою?
Зв'язки в Webflow реалізуються через поля Reference (один-до-одного) та Multi-Reference (один-до-багатьох). Наприклад, у блозі з авторами та тегами:
Collections: Blog Posts - title: Plain Text (required) - slug: Plain Text (auto, unique) - body: Rich Text - published_at: Date - author: Reference → Authors - tags: Multi-Reference → Tags - featured_image: Image - seo_title: Plain Text - seo_description: Plain Text Authors - name: Plain Text - photo: Image - bio: Rich Text - linkedin: Link Tags - name: Plain Text - color: Color Зв'язок Many-to-Many через Multi-Reference працює лише в один бік: Post знає свої Tags, але Tag не знає свої Posts напряму. Для зворотної вибірки використовуйте фільтрацію Collection List за Reference полем.
Чому Webflow CMS краще за WordPress для структурованого контенту?
Webflow CMS швидше в розробці шаблонів — не потрібно верстати окремо адмінку та виведення записів. Кожен тип поля жорстко типізований, що виключає помилки на рівні даних. На відміну від довільних полів WordPress, Webflow дає чисту розмітку та передбачуваний рендеринг.
Що робити при перевищенні ліміту полів?
| Обмеження | Обхід |
|---|---|
| Максимум 20 полів на колекцію | Розбити на пов'язані колекції через Reference |
| Немає вкладених колекцій у Collection List | Використовувати Finsweet Nested Lists |
| 100 елементів у Collection List на сторінці | Finsweet CMS Load з пагінацією |
| Немає умовного рендерингу по Reference | Visibility conditions через Switch-поле |
| Multi-Reference максимум 25 зв'язків | Архітектурне рішення: join-колекція |
Як забезпечити продуктивність з Core Web Vitals?
Правильна архітектура CMS-колекцій напряму впливає на LCP та CLS. Уникайте N+1 запитів: при виведенні списку записів з Reference-полями Webflow генерує окремий запит для кожного зв'язку. Групуйте дані в одній колекції, якщо це можливо, або використовуйте Finsweet CMS Load для відкладеного завантаження пов'язаних елементів. Контролюйте розмір зображень через Webflow Image API — це знижує TTFB.
Динамічна фільтрація та сортування
У нативному Webflow фільтрація Collection List обмежена. Для просунутої фільтрації на стороні клієнта використовується Finsweet CMS Filter — бібліотека з data-атрибутами:
<!-- Фільтр за тегом --> <div fs-cmsfilter-field="tag">Development</div> <!-- Collection List з атрибутом --> <div fs-cmsfilter-element="list"> <!-- Webflow Collection List items --> </div> Finsweet CMS Sort, CMS Load (пагінація через AJAX) — стандартний стек для складних лістингів без написання бекенду.
Webflow CMS API
Webflow надає REST API для управління колекціями. Основні ендпоінти:
GET /v2/collections/{collection_id}/items POST /v2/collections/{collection_id}/items PATCH /v2/collections/{collection_id}/items/{item_id} DELETE /v2/collections/{collection_id}/items/{item_id} Це відкриває можливість синхронізації даних із зовнішніх систем: CRM, ERP, PIM. Наприклад, автоматичне оновлення каталогу товарів з 1С через webhook + Node.js скрипт:
import { WebflowClient } from 'webflow-api'; const client = new WebflowClient({ accessToken: process.env.WEBFLOW_TOKEN }); async function syncProduct(product) { await client.collections.items.createItem(COLLECTION_ID, { fieldData: { name: product.title, slug: product.sku.toLowerCase(), price: product.price, 'in-stock': product.quantity > 0, }, isDraft: false, isArchived: false, }); } Локалізація контенту
Webflow Localization дозволяє створювати перекладені версії CMS-записів. Налаштування:
- В Project Settings → Localization додати локалі (наприклад,
en,uk,de) - Для кожної колекції включити локалізацію потрібних полів
- Перемикач локалі керує видимістю записів
Альтернатива — зберігати переклади в окремих колекціях з Reference-зв’язком до основної.
Орієнтовні терміни за типами проєктів
| Тип проєкту | Терміни | Особливості |
|---|---|---|
| Простий блог | 3–5 днів | 1 колекція, 5 полів |
| Каталог з фільтрами | 2–3 тижні | 3–5 колекцій, Multi-Reference, Finsweet |
| Багатомовний сайт | 3–4 тижні | Локалізація, переклади |
| Інтеграція з CRM | 4–6 тижнів | API-синхронізація, webhooks |
Що входить у роботу
- Проектування схеми даних колекцій
- Налаштування зв'язків (Reference / Multi-Reference)
- Розробка шаблонів Collection Page та Collection List
- Реалізація фільтрації та сортування (вбудована + Finsweet)
- Інтеграція із зовнішніми джерелами через Webflow API
- Документація щодо структури контенту
- Навчання команди роботі з CMS
- Гарантійна підтримка після здачі
Терміни та вартість
Вартість розраховується індивідуально. Наші інженери мають сертифікацію Webflow та 5+ років досвіду роботи з платформою. Гарантуємо підтримку після запуску.
Замовте аудит поточної CMS-структури — ми знайдемо вузькі місця та запропонуємо оптимізацію. Зв’яжіться з нами для оцінки вашого проєкту — ми підготуємо детальну пропозицію.