Aquarum — WooCommerce-магазин німецького виробника систем водопідготовки
WooCommerce-магазин німецького виробника RO-систем, пом'якшувачів і мембран — 340+ SKU, 28 категорій, фасетна фільтрація з власними product-атрибутами і CPT-послугами
Aquarum — німецький виробник і онлайн-магазин систем водопідготовки промислового і побутового класу: пром-RO-системи (AMRO/SLIM серії), пом’якшувачі, мембрани Hydranautics, дозувальні станції, фільтрувальні матеріали, картриджі, регулюючі клапани, UV-лампи, диспенсери. Тема — кастомний WooCommerce-стек: 28 продуктових категорій, 340+ SKU (38 сторінок archive по 9 одиниць), CPT services з 4 інженерними послугами, фасетна фільтрація з власними product-атрибутами (продуктивність l/Tag, тиск bar, тип помпи, ступінь очистки, метод фільтрації, тип підключення), VDI-2035-орієнтований контент для теплотехніки, повністю німецька локалізація і власний Yoast-SEO-стек з 10 sitemap-індексами включно з product attributes (pa_abflussleitungsanschluss, pa_arbeitsdruck-bar, pa_produktivitat-m³-h-bis).
Hero з 4-канальним перемикачем категорій — один лендинг на 4 buyer persona
Перший екран — slick-карусель з 4 фонових сцен, кожна підкреслює окремий сегмент: пом’якшувачі для дому, індустріальні RO-системи, картриджі та фільтрувальні матеріали, побутова RO-осмос. Активний слайд має повний промо-блок: short tagline над H1, сам H1, лід-абзац, синя CTA «Alle anzeigen» на конкретний product-category архів, а праворуч — annotated product visualization з callout-лініями. На скріні нижче — AMRO SLIM RO Series: на одному рендері помічено три ключові компоненти інженерним способом — «Hochwertige italienische Lowara-Pumpen», «Hydranautics 4040 — weltweit führender Hersteller», «Steuerung: Intelligenter Controller Aquarum Contro». Це не маркетинг-картинка, це інженерний паспорт RO-станції на головній.

«Suche nach Kategorie» — 9 топ-категорій з продуктовими візуалізаціями, не іконками
Друга секція головної — grid 3×3 з 9 найважливішими категоріями каталогу: Umkehrosmose für den Haushalt, Industrielle Umkehrosmose, Dosierpumpen und -stationen, Wasserenthärtungsanlagen, Kohlefilter, Membranen Hydranautics, Ultrafiltrationssysteme, Steuerventile, Wasserenteisenungsfilter. Кожна карточка — мінімалістичний rounded-rectangle з тонкою border, рендером РЕАЛЬНОЇ продукції зліва (не stock-іконка) і назвою категорії праворуч. Під grid — outline-CTA «Mehr sehen» → /suche-nach-kategorie/ (окрема сторінка з повним переліком 28 категорій з зображеннями, оскільки в footer-меню вони не поміщаються). Це шарував SEO-сторінку, що сама собою позиціонується під long-tail запит «Wasserfilter Kategorien».

«Dienstleistungen» — CPT services, не WC-продукти
Секція Dienstleistungen містить 4 послуги: Beratung & Planung von Wasseraufbereitungssystemen, Installation & Inbetriebnahme von Umkehrosmose- und Wasseraufbereitungssystemen, Modernisierung bestehender Wasseraufbereitungssysteme, Wasseranalyse. Кожна послуга — окремий пост у CPT services (URL /services/<slug>/) з власним sitemap-індексом (services-sitemap.xml, 4 URLs), а не custom-taxonomy на products і не сторінкою. Це дозволяє кожній послузі мати свій повноцінний SEO-лендинг з тегами, описом і lead-формою, не змішуючись з WooCommerce-структурою. Картки виглядають як 2×2 grid: ліворуч — широке фото-ілюстрація (інженер під раковиною з фільтрами, склянка з водою на синьому фоні, ілюстрований дизайн з людиною у синій сорочці), праворуч — іконка категорії (стек дисків, водопровідний кран, шестеренки, лабораторні пробірки), H3, лід і outline-CTA «Mehr lesen».

«Über das Unternehmen» — два industrial-фото + лічильники без анімації
About-блок розділений на дві смуги. Верхня — текст про компанію + фото мембран RO-стенду (вертикальні білі мембранні баки в синіх корпусах з підведеними трубопроводами і фітингами). Нижня — фото power-станції з 6+ синіми буферами і насосною групою + текст про міжнародні контракти і три лічильники: 2 000+ Fertige Projekte, 50+ Ekhpert Tam-Mitglieder, 2 500+ Ihre zufriedenen Kunden. Лічильники не анімуються при скролі — статичні великі цифри з синім «+», що нетипово для 2024+ макетів (всі люблять CountUp.js). Це вибір на користь швидкості завантаження і ясності — не потрібно чекати завершення анімації щоб прочитати число.

«Warum sie uns vertrauen» — 4 USP-картки з одним активним state
Trust-секція виконана як grid з 4 карток (Umfangreiche Berufserfahrung, Fertige und individuelle Lösungen, Schnelle Lieferung und Installation, Eigenproduktion). Перша картка завжди в активному стані — повна заливка синім (#0070C0), білий текст, біла іконка людини на blue background. Інші три — світло-сіра border, темний текст, синя outline-іконка. На hover (і на mobile-tap) активний стан переключається. Це психологічний прийом: ока завжди є один anchor-блок, на який автоматично падає увага — і саме він говорить про головне USP компанії («багаторічний досвід»), не «швидка доставка». Доставка — потрібна, але вторинна для B2B-клієнта pharma/heizung-сектору. Досвід — primary.

Shop archive: 28 категорій у фіксованому сайдбарі + кастомна пагінація 9/18/24
Сторінка /shop/ — глобальний каталог 340+ SKU, розділений на 38 сторінок по 9 одиниць (стандартний WC-default). Лівий сайдбар — sticky-список з 28 категорій без іконок, тільки текстові посилання у одну колонку. Над grid — три інтерактивних контролі: Produktfilter (відкриває overlay з фасетами, про який нижче), Sortiere nach (6 пресетів: Standardsortierung, Beliebtheit, Durchschnittsbewertung, Aktualität, Preis aufsteigend/absteigend) і Elemente auf der Seite (9/18/24 — клієнт сам вибирає densitéу). Картка продукту — фото зверху, бейдж «Neu» (синій, скруглений pill) у верхньому лівому кутку для нових позицій, heart-іконка wishlist у правому верхньому, name внизу, ціна синім bold. Жодних старого-WC-стандарту: «Add to Cart» прямо з картки, рейтинг зірками, описова стрічка — все відсутнє. Це каталог-grid, не e-commerce-grid: клікни → перейди на PDP → там роби рішення.

Фасетний фільтр з product-attributes: ціна, продуктивність l/Tag, тип помпи, метод фільтрації
Клік на «Produktfilter» в shop або category-page відкриває правий slide-out overlay з повним набором фасетних фільтрів. На скріні нижче — Industrielle Umkehrosmose: Preis (EUR) з range-slider 2799–43560, Produkt Rabatt (checkbox «Nur mit Rabatten»), Produkt Produktivität (5 діапазонів l/Tag: bis zu 190 / von 190 bis 285 / von 384 bis 864 / von 864 bis 1560 / von 1560 bis 2275), Produkt Filtrationsverfahren (Läuft, Ultrafiltration, Umkehrosmose), Produkt Pumpentyp (Ohne Pumpe, Pumpe), Produkt Reinigungsgrade (4, 5, …). Кожне поле — окремий WP product-attribute з власним sitemap-індексом (pa_produktivitat-m³-h-bis-sitemap.xml містить URLs для кожного значення продуктивності — це додає окрему SEO-поверхню для long-tail запитів на кшталт «RO Anlage 500 l/Tag»).

Product single — gallery, breadcrumbs з product_cat, 3-tab opisу і 15-полева spec-таблиця
Сторінка продукту (на прикладі Aquarum HeatControl PRO KOMPLETT — Heizungsbefüllung & Nachspeisung Komplettsystem mit Mischbett-Harz, Leitfähigkeitskontrolle und Druckminderer) — двоколонковий layout: ліворуч gallery з thumbnail-стрічкою (вертикально), праворуч — H1, in-stock-індикатор (зелений pin), 5-зірковий рейтинг (поки 0 рецензій), ціна 744,00 EUR жирним bold, qty-stepper, синій full-width CTA «Im Korb», поряд outline-heart wishlist, нижче — «Lieferung, Garantie» блок з 3 trust-сигналами: kostenlose Lieferung ab 400 Euro, kostenlose Rücksendungen, 30 Tage für eine Rückerstattung. Breadcrumbs: Home → Shop → Vollentsalzung & Heizungswasser Aufbereitung → [Produktname] — тобто product_cat інтегрована в навігацію.

Tab Eigenschaften — це 15-полева spec-таблиця у форматі key:value pairs, кожен рядок — окремий рядок з divider-лінією. Поля: Produkttyp, Funktion, Anschluss, Kapazität, Einsatzbereich, Wasseraufbereitung, Überwachung, Messparameter, Durchflussanzeige (Ja/Nein), Druckregelung, Manometer, Anwendung, Wartung, Energieversorgung, Herkunft. Це не WC-стандартний «Additional information» з 2 атрибутами — це повноцінний technisches Datenblatt прямо на сторінці, придатний для прийняття B2B-рішення без email-обміну з sales. Поле «Herkunft: Made in Taiwan (Elektronik) / Systemmontage EU» — це чесний disclosure походження: контролер тайванський (нормально для електроніки цього класу), система зібрана в ЄС (важливо для compliance і CE-marking).

Checkout — 3-крокова сторінка без окремої /cart/, з міським автокомплітом і 2 типами банк-переказу
На відміну від стандартного WC /cart/ + /checkout/, у Aquarum URL /cart/ миттєво редіректить на головну — кошик доступний тільки через дропдаун-іконку у шапці і однокроково веде у /checkout/. Сама сторінка чекауту — компактна 3-секційна форма у лівій колонці: 1. Persönliche Daten (Vor- und Nachname, Telefonnummer з маскою +4989 (___) ___-__-__, E-Mail), 2. Lieferung (автокомпліт «Wählen Sie Ihre Stadt» з чотирма quick-chip-підказками — Hamburg / München / Frankfurt am Main / Köln, далі radio з 3 типами — Selbstabholung kostenlos / Lieferung an die neue Postfiliale / Adresszustellung + textarea «Kommentar»), 3. Zahlung (2 опції — Bei der Überweisung handelt es sich um ein Girokonto за замовч. і Banküberweisung з передоплатою). У правій колонці — sticky-міні-кошик з фото товару, qty-степером і прозорим розкладом Zwischensumme / Versand / Zwischensumme. Без Stripe-iframe чи PayPal-кнопки — це B2B-каталог, де великі замовлення йдуть через банк-переказ, а не миттєву кредитку.

Category-page = магазин + SEO-полотно під фічею «Worauf sollte man beim Kauf achten?»
Сторінка /product-category/<slug>/ — це не просто grid продуктів. Під самим листингом і пагінацією йде повноцінна SEO-сторінка: H1 «Industrielle Umkehrosmose», 2 лід-абзаци, H2 «Was ist industrielle Umkehrosmose?», H2 «Wie funktioniert eine Umkehrosmoseanlage?» з нумерованим списком етапів (Vorfilterung → Aktivkohlefilterung → Membranfiltration → Nachbehandlung), H2 «Vorteile», H2 «Anwendungsbereiche» (Lebensmittel, Pharma, Energie, Halbleiter, Landwirtschaft), H2 «Worauf sollte man beim Kauf achten?» з HTML-таблицею 5 рядків (Kapazität / Membranqualität / Energieeffizienz / Anpassungsfähigkeit / Wartungsfreundlichkeit), H2 «FAQ» з 4 запитаннями і відповідями (періодичність обслуговування, кастомізація, ресурс мембрани 3-5 років, екологічність). Це category-page-as-pillar-content — стратегія, яку Yoast пропонує як «cornerstone», а більшість сайтів забуває реалізувати на e-commerce-категоріях. Тут зроблено правильно.
Блог «Neueste Artikel» — слайдер з 4 видимими статтями, не grid
Розділ блогу на головній — slick-карусель з 4 видимими картками одночасно. Кожна картка: дата у синьому круглому badge (21.04, 14.04, 09.04) у лівому верхньому куті product-photo, повна назва статті як H4, перші 60 символів body тексту з ellipsis-truncation, outline-CTA «Mehr lesen». Це не grid — це horizontal-scrolling carousel, який не вимагає вертикального скролу і дозволяє показати більше статей в обмеженому visual budget. Видимі статті покривають VDI 2035 vollentsalzung, industrielle RO-anlagen, ionenaustauscherharz comparison, hauswasserfilter im hausanschluss — це NOT lifestyle-blog, це technical reference content, який допомагає інженерам приймати рішення і одночасно піднімає category-page rankings у Google за технічними long-tail.

FAQ — 3 картки в кінці головної, безбордерний accordion-style
Перед footer-ом — секція Häufig gestellte Fragen з 3 запитаннями, кожне в окремому світло-сірому rounded-rectangle: «Was ist der beste Wasserfilter?», «Wie erkennt man, welcher Wasserfilter benötigt wird?», «Was sind Wasserfilter?». Усі 3 розкриті за замовчуванням — це не accordion з click-to-expand, це pure-text FAQ-блок. Це дозволяє Google Search Bot одразу прочитати весь FAQ-зміст для FAQPage-schema і потенційного rich-results. Класична помилка — ховати FAQ за clicker-accordion з aria-expanded=false — там схема працює, але CTR в SERP нижчий.

Мобільна верстка 390 — burger-меню, sticky-search, повноекранний hero без обрізки
На viewport 390×844 (iPhone 13) layout перебудовується: top-bar з телефоном переходить у компактний рядок, головна навігація схлопується в burger-icon ліворуч (3-line stack), пошуковий input стає full-width, корзина і wishlist залишаються видимими у правому нижньому куті як floating action elements. Hero показує повністю slide-1 (Umkehrosmose-Systeme, той самий що desktop slide-1, тільки тут вже AMRO SLIM з vertical product visual внизу), синій CTA «Alle anzeigen» центрований і повного-ширини. Жодних desktop-only artifacts (горизонтальний scroll, обрізані елементи) — повноцінна mobile-first перебудова, не desktop-зі-zoom.
SEO-стек: 10 sitemap-індексів включно з product-attribute archives
Yoast SEO згенерував 10 окремих sitemap-XML: post, page, product, services (CPT, 4 URLs), category, product_cat (28 URLs), pa_abflussleitungsanschluss (атрибут типу підключення на дренажну лінію), pa_arbeitsdruck-bar (робочий тиск), pa_produktivitat-m³-h-bis (продуктивність м³/год), author. Включення product-attribute archives у sitemap — це додаткова SEO-поверхня, рідкісно увімкнена за замовчуванням Yoast. Кожне значення атрибута (наприклад, «5 m³/h», «10 bar», «3/4″ Anschluss») отримує власний archive-URL з listing продуктів, що мають це значення. Це знімає необхідність вручну створювати «landing-page для всіх RO-систем 500 l/Tag» — Yoast auto-генерує цю сторінку з продуктів, що мають pa_produktivitat=500.
Kontakte як окрема сторінка з адресою, графіком і Google-Map iframe
На відміну від шаблонного «контактна форма по anchor в футері», Aquarum має повноцінну сторінку /kontakte/ з 4-картковим header-блоком: Adresse (Steinerother Str. 1, 57518 Betzdorf — мала громада в Rheinland-Pfalz, що сигналізує реального німецького юр-резидента, не «віртуальний офіс у Берліні»), Telefon з clickable-tel посиланням, Email info@aquarum.de і Arbeitsplan Mo-Fr 08:00–16:00 Uhr. Нижче — full-width Google-Map embed з пін-маркером, ще нижче — повторний lead-form блок «Ausrüstung auswählen» (Ihr Name / Phone з маскою / E-Mail / Ihre Nachricht + Schicken) з DSGVO-disclaimer. Окремо у шапці і футері — wishlist-сторінка /wunschzettel/ (heart-іконка) з власним заголовком і станом «Die Favoritenliste ist leer» для нових візитерів — це не дропдаун, а персистентна сторінка, де B2B-procurement тижнями накопичує позиції до тендеру.

Підсумок
Aquarum — це B2B-каталог з характером industrial-engineering: повноцінний WooCommerce-магазин на 28 категорій і 340+ SKU, інтегрований з CPT services для інженерних робіт, фасетна фільтрація з 6+ продуктовими атрибутами, technical content на category-pages як cornerstone, чесні spec-таблиці без маркетинг-трешу, мінімалістичний flat-UI без візуальних чужорідних додатків. Усі дизайн-рішення (4-канальний hero, активна синя trust-card, фіксовані діапазони l/Tag замість slider, floating-thumb-zone wishlist на mobile) виглядають як рішення людини, яка щодня бачить, як клієнти-інженери комбінують пошук, читання specs і запит quote. Це сайт, де не намагалися продати фантазію — намагалися зробити так, щоб купити було просто.