Webflow CMS u velkého katalogu: 1 100 položek a co jsem se naučil

Proč je velký katalog ve Webflow jiný projekt

Blog se 40 články a katalog s 1 100 produkty jsou oba „weby s CMS“, ale nejsou to stejné zakázky. Při téhle velikosti přestávají být datový model, filtrování, váha stránky a práce editorů detaily a stávají se z nich jádro projektu.

Ve Webflow stavím od roku 2018 a mám certifikaci Webflow CMS L1. Největší katalog, který jsem dodal, je Big Moe Watches, dubajský prodejce ojetých luxusních hodinek, postavený jako white-label projekt přes Landrieau Studio. V CMS je přes 1 100 hodinek a pokročilé filtrování podle značky, modelu a ceny. Počet žádostí o cenu vzrostl o 63 %.

Zbytek článku je obecná praxe pro katalogy tohoto typu. Když popisuji postup, je to to, co u velkých katalogů doporučuji, ne tvrzení o tom, jak byl postavený konkrétní web.

Limity položek v CMS podle tarifu

Začněte tady, protože limit ovlivní všechno ostatní. Webflow omezuje počet položek v CMS podle tarifu webu a limit se počítá za všechny kolekce dohromady, ne za každou zvlášť.

Webflow v květnu 2026 zjednodušil tarify webu. Podle oficiální nápovědy byly tarify CMS a Business sloučeny do jednoho tarifu Premium a limit položek byl zvýšen na 20 000 (dříve 2 000 u CMS a 10 000 u Business). Starší články stále uvádějí původní čísla, takže před nabídkou pro klienta vždy zkontrolujte aktuální ceník.

• Počítejte všechno. Koncepty a archivované položky se u běžných tarifů do limitu počítají, takže nechte rezervu.
• Počítejte všechny kolekce. Kategorie, značky, autoři, štítky i FAQ jsou také položky.
• Rozhodněte, co do CMS nepatří. Pokud něco má tři záznamy a nikdy se nemění, je statická sekce levnější než kolekce.

Pokud katalog může přerůst tarif, rozhodněte se včas, zda upgradujete, rozdělíte data, nebo část budete servírovat mimo Webflow.

Struktura kolekcí a referenční pole

U velkých katalogů doporučuji navrhnout datový model na papíře ještě před otevřením Designeru. Špatný model se u 20 položek opravuje snadno, u 1 100 už bolestivě.

• Jedna kolekce na jednu reálnou věc. Produkty, značky, kategorie, edice. Název značky neukládejte jako text ke každému produktu, ale odkazujte na ni.
• Referenční pole použijte u všeho, podle čeho filtrujete nebo na co odkazujete. Reference na značku vám dá stránku značky, filtr podle značky a jedno místo pro úpravu názvu.
• Pole s volbami použijte u krátkých pevných seznamů, například stav nebo dostupnost, kde by celá kolekce byla zbytečná.
• Počet polí držte rozumný. Každé pole musí editor vyplnit. Pokud ho na stránce nikdo nepoužije, nepřidávejte ho.
• Pojmenovávejte pole jednotně. U tříd se řídím konvencí Client-First a stejná disciplína platí pro pole a kolekce.

Webflow má limity na počet polí, referenčních polí a multi-referenčních polí v kolekci i na počet kolekcí na web. Najdete je v nápovědě Webflow. V praxi dobře navržený model zůstává hluboko pod nimi.

Šablony detailu

Šablonu položky navrhněte pro reálné rozpětí obsahu: nejdelší název, nejkratší, chybějící obrázky, chybějící volitelná pole. Podmíněnou viditelností zajistěte, aby prázdná pole nenechala v layoutu díry.

Filtrování a vyhledávání: nativně, Finsweet Attributes, nebo vlastní řešení

Filtrování je obvykle důvod, proč katalog vůbec vzniká. Realisticky máte tři možnosti.

U většiny katalogů do několika tisíc položek doporučuji začít s Finsweet Attributes. Je to dobře zdokumentovaná a bezplatná sada od týmu, který stojí za Client-First, a sáhnu po ní jako po první, když klient chce procházení s více filtry bez zakázkového vývoje.

Klíčové omezení je potřeba pochopit: Collection List zobrazí nejvýše 100 položek a filtr na straně klienta umí filtrovat jen to, co je na stránce. Jak to obejít, vysvětluje Finsweet v dokumentaci CMS Load, včetně režimů stránkování a render-all, a doporučuje nejdřív zvážit stránkování.

Filtry navrhněte podle otázek uživatele

Zeptejte se, na co se kupující skutečně ptá: značka, cenové rozpětí, stav, dostupnost. Postavte filtry pro tohle a zbytek vynechte. Deset filtrů, které nikdo nepoužívá, zpomalí stránku a zahltí rozhraní.

Stránkování a rychlost načítání

Stránka katalogu, která se pokusí vykreslit 1 100 karet najednou, bude těžká, ať je hosting jakkoli dobrý. Webflow servíruje z CDN, ale prohlížeč musí každou kartu stejně zpracovat, rozložit a vykreslit.

• Stránkujte nebo načítejte po dávkách. Ukažte rozumnou stránku položek a další načtěte na požádání.
• Nejdřív optimalizujte obrázky. U katalogů tvoří obrázky většinu váhy. Použijte správně dimenzované WebP, nastavte rozměry a lazy loading pod hranou obrazovky.
• Karta ať je lehká. Méně vnořených obalů, žádná těžká animace na každé kartě, žádné embedy v položkách seznamu.
• Omezte vnořené collection listy. Každý násobí práci, kterou stránka musí udělat.
• Testujte na telefonu střední třídy. Desktop na rychlé wifi většinu problémů skryje.

Měřím v Lighthouse a pro data od skutečných uživatelů v Core Web Vitals v Search Console. U stránek s mnoha filtry záleží na odezvě na interakci (INP), protože každé kliknutí na filtr má působit okamžitě.

Import přes 1 000 položek: CSV a API

Nikdo by neměl 1 100 produktů zadávat ručně. Prakticky jsou dvě cesty: import CSV v CMS a Webflow Data API.

Import CSV

Hodí se na první naplnění a jednorázové dávky. Soubor připravte pečlivě: unikátní slugy, čistý text, URL obrázků, které opravdu fungují, a referenční pole, která přesně odpovídají názvům existujících položek. Nejdřív naimportujte odkazované kolekce (značky, kategorie), potom produkty.

API a automatizace

Pokud se katalog často mění, například ze skladového systému, je synchronizace přes API lepší než opakované CSV. Webflow umím propojit s dalšími systémy přes Make, Zapier nebo n8n, případně vlastním skriptem. API má limity počtu požadavků, takže synchronizace má při překročení počkat a zkusit znovu, ne systém zahlcovat.

Kontroly po každém velkém importu

1. Porovnejte počet položek v CMS se zdrojovým souborem.
2. Otevřete náhodných 20 položek a zkontrolujte každé pole.
3. Zkontrolujte referenční pole a obrázky u několika položek z konce souboru, ne jen ze začátku.
4. Publikujte na staging a otestujte filtry na reálných datech.

SEO stránek kolekcí a položek

Katalog je hodně landing pages. Pomáhají jen tehdy, když má každá co říct.

• Title a description generujte z polí. Webflow umí sestavit SEO title i meta description z polí CMS. Vzorec typu značka, model a klíčová vlastnost je lepší než stejný title na každé stránce.
• Jedno H1 na stránku položky, převzaté z názvu položky.
• Přidejte unikátní text tam, kde na něm záleží. Krátký skutečný popis u každé položky je lepší než šablona stejných vět.
• Propojte strukturu. Položky odkazují na svou značku a kategorii a tyto stránky zpět na položky. Drobečková navigace pomáhá uživatelům i vyhledávačům.
• Mějte čistou sitemapu. Z indexace vyloučte stránky jen s filtry nebo s minimem obsahu.
• Přidejte strukturovaná data, například značení Product, kde to zapadá do vašeho modelu.

Širší seznam najdete v mém SEO checklistu pro Webflow.

Práce editorů: ať se katalog snadno spravuje

Po spuštění žije klient v CMS. Katalog, který se špatně upravuje, zastará.

• Napište ke každému poli krátkou nápovědu, aby editor věděl, co kam patří a v jakém formátu.
• Povinná pole nastavte jako povinná a volitelných mějte co nejméně.
• Dohodněte pravidla pojmenování položek a obrázků před importem, ne po něm.
• Stavy koncept a publikováno používejte vědomě a pamatujte, že koncepty se počítají do limitu položek.
• Předejte s prohlídkou. Projekty končím Loom videem, které ukazuje, jak položky přidávat, upravovat, archivovat a hromadně měnit.

Můj pohled: co mě naučil katalog s 1 100 hodinkami

U Big Moe Watches bylo úkolem udělat web, který působí stejně prémiově jako produkt a přitom funguje jako obchod. Katalog obsahuje přes 1 100 hodinek od značek jako Rolex, Audemars Piguet, Richard Mille a Patek Philippe a filtrování podle značky, modelu a ceny. Cílem bylo, aby každý návštěvník našel vhodné hodinky na pár kliknutí a byl přirozeně veden k rozhovoru s prodejcem. Počet žádostí o cenu vzrostl o 63 %.

Z toho projektu si beru jednoduchou lekci. U katalogu jsou datový model a filtry samotný produkt. Vizuální design je důležitý, ale funguje jen tehdy, když struktura pod ním umožní kupujícímu rychle zúžit 1 100 položek. Proto u katalogových projektů trávím první část času kolekcemi, poli a logikou filtrů, ještě než cokoli stylizuji.

Projekt vznikl jako white-label přes Landrieau Studio, v pracovním prostoru agentury. Pokud plánujete podobnou stavbu, pošlete mi produktová data a filtry, které potřebujete, a řeknu vám, na co si dát pozor. Další souvislosti najdete v článcích Client-First ve Webflow a SEO checklist pro Webflow.

Časté otázky

AutorPeter CekanakDesignér a Webflow vývojář · white-label partner pro agentury

Od roku 2018 navrhuji a stavím weby ve Webflow pro agentury a startupy — Client-First, GSAP, CMS a AI automatizace. Weby, které jsem postavil, pomohly klientovi k exitu za 10 mil. $ a jednomu SaaS ztrojnásobily poptávky dema.

Webflow Certified ExpertRelume ExpertClient-First