Інтернет-магазин · WordPress · 2025

Liliway — холістична wellness-студія з NoMad, Манхеттен

Холістична wellness-студія Liliani Gankevych у NoMad (Манхеттен) — фейшел і body-treatments, WooCommerce-каталог Biologique Recherche з gated-pricing, бронювання через GlossGenius.

WordPress

Хочу такий самий проект Відкрити сайт

Liliway — це не одна product-картка з кнопкою «book now», а паралельна wellness-екосистема для NYC-клієнтки: holistic-studio Liliany Gankevych у NoMad на 9-му поверсі будівлі між Mama Mezze і IMPACT Kitchen плюс WooCommerce-магазин з 5 категоріями і ~40+ SKU, де частина каталогу — Biologique Recherche-продукти з gated pricing («Log in for price»), а інша частина — публічні retail-позиції з Afterpay-розстрочкою. Booking-флоу винесений з WP у third-party GlossGenius (liliway.glossgenius.com), бо WP+WC не закриває appointment-management для spa-сервісів повноцінно. Стек: WordPress + WooCommerce, Yoast SEO, jQuery, Afterpay-checkout, PayPal Smart Buttons з reCAPTCHA-v3 fraud protection, Klaviyo-style newsletter.

Hero «Personalized Holistic Wellness» — split фото-фокус замість product-grid

Перший екран — full-bleed фото фейшел-сесії з тегом «a natural approach to healing» над H1 «Personalized Holistic Wellness», серіф-типографіка білим по теплому теплому-беж-приглушеному тоні. Дві CTA внизу: «Book Appointment» (веде на GlossGenius) і «Shop Products» (на /shop/). Над хедером — тонка темна promo-bar «Free shipping over $100. Use code ‘HOLISTIC’ at checkout.», що залишається на всіх сторінках сайту як session-level промо. Nav split-layout: ліворуч 5 пунктів (Home / Treatments / Shop / Explore / Contact), по центру — серіф-лого LILIWAY HOLISTIC STUDIO з двома рядками, праворуч — Search / Account / Cart(0) / outline-CTA «Book Appointment».

Послуги — split treatments на home, повна structure на /services/

Замість одного-листа сервісів — двоколончатий split на home: Facial Treatments («Customized down to the last detail to reveal a beautifully illuminated complexion») і Body Treatments («From Biodraineur and Wraps to Conturing Endermologie Treatments and more»). Кожна картка має фото-превʼю реальної сесії, заголовок, опис і outline-CTA «Explore Treatments» з anchor-посиланням на відповідну якірну секцію /services/#facials або /services/#body-treatments. Між тегом «Holistic skincare treatments» і split-cards — велика body-копія: «By focusing on the body, mind, and spirit, our approach offers a renewed sense of confidence…» і CTA «Schedule My Session».

Liliway treatments split на home — дві картки Facial Treatments і Body Treatments з фото-превʼю сесій і outline-CTA «Explore Treatments» на anchor-якорі /services/#facials та /services/#body-treatments — Split-cards як вхідна точка замість dropdown-меню — це навмисне рішення для wellness-вертикалі: клієнт перед бронюванням обирає тип сесії за фотографією, а не за переліком пунктів. Фейшел і body — різні ритуали з різними тривалостями (90 vs 40 хвилин) і ціновими крапками, і split-layout робить вибір видимим на першому скролі. CTA *«Explore»* не веде на окрему сторінку — це `#facials` anchor у тому ж `/services/` з smooth-scroll до якірної секції. Один шаблон з двома entry-points.

Сторінка /services/ — 6 сервісів у 3 групах з прозорими цінами

На внутрішній /services/ — три якірні групи: Facial Treatments, Body Treatments, Consultations. Кожна група має заголовок, body-копію про «selecting the duration of your wellness session based on your goals» і CTA «Schedule My Session» на GlossGenius. Сервіс-картки — з фото згори і опис-блоком знизу: Liliway Signature Facial Treatment $725 / 90 хв (performed exclusively by founder Liliana Gankevych), Customized Holistic Facial $195 / 60 хв або $250 / 75 хв, LPG Endermologie Facial $165 / 35 хв або $225 / 60 хв, Liliway Signature Body $395 / 90 хв (packages available), LPG Endermologie Body $275 / 40 хв або $320 / 60 хв (packages available), Virtual Consultation $175 / 50 хв (secure video call with founder). Кожна картка має outline-кнопку «learn more» зі стрілкою.

Liliway services page Facial Treatments — три картки Signature $725 / 90 хв, Customized Holistic $195-$250 / 60-75 хв, LPG Endermologie $165-$225 / 35-60 хв з фото-превʼю і CTA «learn more» — Прозоре ціноутворення на сервіс-картках — рідкісне рішення для NYC-spa-сегменту, де більшість студій ховають ціни за «contact for pricing» або «book a consultation». Liliway показує дві тривалості з двома цінами в одному рядку — *«$195 | 60 minutes / $250 | 75 minutes»* — і явно зазначає, що Signature виконує особисто founder. Це усуває першу гіпотезу-сумнів («буде сюрприз за $700?»), у клієнтки чесні цифри ще до натискання «book». Tier-сегментація трьохрівнева: вхідна $165 (LPG-only, без personalized consultation), середня $195-250 (Customized з founder-team), преміум $725 (Signature exclusively by Liliana). На consultation окрема картка — *Virtual $175* через secure video call, не in-person — це для клієнтки з-поза NYC або тієї, що хоче skin-strategy без commitment to in-studio treatment.

Exclusive Products — Biologique Recherche carousel з gated pricing

Окрема home-секція «Exclusive products» з посиланням-фільтром «Shop Biologique Recherche» (веде на /shop/?product-brand=biologique-recherche) і горизонтальним slick-каруселем з 4 видимих позицій: BIOKISS (Protective – Lipid-Replenishing – Repairing, 0.5 fl oz), MASQUE VISOLASTINE+ (Soothing – Hydrating – Moisturizing, 3.4 fl oz), MASQUE VIVANT (Soothing – Pore-Tightening – Regulating, 3.4 fl oz), MASQUE VIP O2 (Oxygenating – Detoxifying – Moisturizing, 3.4 fl oz). Замість цін на кожній картці — лінк «LOG IN FOR PRICE» у тому самому ритмі, де у retail-продуктах був би price-rule.

Liliway Exclusive Products — Biologique Recherche carousel з 4 видимими позиціями (CREME CONTOUR YEUX BIOFIXINE, BIOKISS, MASQUE VISOLASTINE+, MASQUE VIVANT), кожна картка має heart-wishlist згори і CTA «Log in for price» замість прайс-теґу — Gated pricing на Biologique Recherche — це не trade-trick, а вимога самого бренду: **Biologique Recherche** — професійна французька skincare-лінія, яку дистриб’ютор зобов’язує продавати тільки клієнтам після консультації або in-studio appointment (інакше дилерська угода втрачається). На рівні WooCommerce це реалізовано через role-based price visibility: для unlogged-користувача — текст-плашка *«Log in for price»* з лінком на `/my-account/`, для зареєстрованої клієнтки (status *customer* після першої сесії) — реальна ціна з кнопкою *Add to cart*. Це не Magento-плагін, не Shopify-trick — це акуратна WooCommerce-конфігурація з умовним `woocommerce_get_price_html` filter і custom-template для login-prompt. Heart-icon у верхньому куті — wishlist, який працює і для unlogged (зберігається в cookie) і для зареєстрованих (синхронізується з акаунтом).

WooCommerce-каталог — 5 категорій, 40+ SKU, 3-фільтрова панель

Сторінка /shop/ — заголовок «Shop Holistic Products», intro-параграф «Welcome to the Liliway shop — a carefully curated collection of holistic skincare, body care, and wellness essentials chosen with intention» і три кастомні WC-фільтри над grid-ом: Category: All, Brands: All, Product type: All. Каталог — 4-колоночний grid з 12 продуктів на сторінку і 4 сторінками пагінації (тобто ~45 SKU). Категорії у футері: Skin Care, Body Care, Hair Care, Lifestyle, Gift Cards. Картка кожного продукту: heart-wishlist згори, велике фото-фіт-у-квадраті, заголовок (CREME / MASQUE / SERUM-formula), descriptor-підрядок (Mattifying – Rebalancing – Sebo-Regulating), розмір (0.3 fl oz | 1.0 fl oz), і або ціна (наприклад $245.00 для After Dark – Restorative Night Serum, $238 для Éclat Extraordinaire) — або «Log in for price».

Liliway shop catalog /shop/ — заголовок Shop Holistic Products, intro-параграф, три фільтри (Category/Brands/Product type), 4-колоночний grid з After Dark, BIOMAGIC MASQUE, Carres de soin, COLLAGENE ORIGINEL — Mix retail-prices і gated-prices у одному grid — це навмисний дизайн: **retail** позиції (After Dark Restorative Night Serum $245, Éclat Extraordinaire $238, ULTIMATE LIGHTENING Vitamin C $123, LUMINOSITY BOOSTING $135) — це лінійки La Fervance, GRŌ, тобто бренди з public-distribution policy; **gated** позиції — Biologique Recherche-каталог (BIOKISS, MASQUE VIVANT, CREME PIGM 400, COLLAGENE ORIGINEL, DERMOPORE тощо) — професійна лінія з role-based price visibility. Покупець бачить однорідний візуальний ритм карток і одночасно — два різних шляхи купити: одразу через Add to cart для retail або через login + first consultation для gated. Три фільтри (Category / Brands / Product type) — це не дефолтний WC-фільтр-плагін, а кастомні select-меню з URL-параметрами (`?product-brand=biologique-recherche`), що дають deep-linking на конкретну brand-сторінку без перевантаженого sidebar-у.

Картка товару — multi-thumb gallery + Afterpay + accordion-описи

Сторінка /product/eclat-extraordinaire/ — двоколончатий layout: ліворуч вертикальний 4-thumb gallery з великим product-зображенням (jar-формат La Fervance Éclat Extraordinaire 50 mL), праворуч — H1 «Éclat Extraordinaire», ціна $238.00, нижче під ціною — «or 4 interest-free payments of $59.5 with Afterpay» з brand-bagde Afterpay, ще нижче — 5-зіркова rating з кількістю відгуків (0), обʼєм «50 mL |», два параграфи description, qty-counter з мінус/плюс і textbox-числом, dark-red CTA «ADD TO CART» та outline-CTA «ADD TO WISHLIST». Під CTA — accordion з двома секціями: Description і Ingredients (обидві закриті за замовчуванням). Нижче на сторінці — Ratings & Reviews з кнопкою «write a review» і блок «You may also like» з 4-колоночним related-carousel.

Liliway product detail Éclat Extraordinaire — 4-thumb vertical gallery ліворуч, велике фото jar центром, праворуч заголовок, $238 з Afterpay 4×$59.5, rating, 50 mL volume, description, qty selector, ADD TO CART + ADD TO WISHLIST, accordion Description+Ingredients — Afterpay (BNPL) для $238-продукту — це навмисна стратегія для wellness-вертикалі: професійна skincare часто впирається у psychological-bound *«$200+ за одну позицію»*, а $59.5 раз на 2 тижні читається як «affordable». Інтеграція — нативна Afterpay-Widget (не PayPal-as-Afterpay-clone), що показує точну цифру 4-tranche розрахунку на кожній продуктовій картці, не тільки на checkout. Multi-thumb-gallery ліворуч у вертикалі (а не під product-image) — це французько-luxury-pattern (Sephora-France, Caudalie, Galeries Lafayette), що дозволяє очам сканувати 4 ракурси без зайвих кліків. Accordion на Description / Ingredients — не collapse-spam, а data-density-control: для skincare ingredient-list часто 30-50 рядків з французькими назвами екстрактів, які перетворили б product-сторінку на 4-екранний wall-of-text.

Booking flow — GlossGenius окремо від WooCommerce

Всі CTA-кнопки «Book Appointment» / «Schedule My Session» / «book an appointment» ведуть на liliway.glossgenius.com — third-party scheduler-платформу, де клієнтка обирає послугу, дату, час і вносить інформацію перед візитом. WooCommerce-checkout використовується тільки для retail-замовлень product-каталогу. Це навмисний архітектурний розкол: WC-Bookings (офіційний WC-плагін для appointments) має слабкий UX для wellness-сервісів — не вміє блокувати буфер-час між сесіями, не дає двох-кранчевих pricing-варіантів (60 vs 75 хв за різні ціни), не повʼязує сесії з clinic-staff-availability. GlossGenius — індустріальний стандарт у NYC spa/wellness-сегменті: працює з PCI-compliant payment-флоу, відправляє SMS-нагадування за 24 год, синхронізується з Google Calendar founder-а. Розкол не плутає клієнтку, бо «Book» візуально відрізняється від «Shop»-флоу.

Visit Our Holistic Studio — location callout як trust-signal

Передфутерна секція «Visit Our Holistic Studio» — фото інтерʼєру студії з сухими квітами і boucle-кріслом, full-bleed background, білий серіф-заголовок по центру і body-копія: «As a holistic care studio, we create customized spa treatment plans for each client that supports wellness on every level – body, mind, and spirit – revealing a beautifully illuminated complexion». CTA — outline-кнопка «Schedule My Session». Це не повторення сервіс-CTA, а sensorial-перенесення: до кнопки клієнтка вже бачить, що інтерʼєр — це не клінічний кабінет, а навмисно curated простір (рослини-сухі квіти, теплі дерев’яні підлоги, мʼякий освітлений тон).

Liliway Visit Our Holistic Studio — повноекранне фото інтерʼєру студії з сухими квітами і boucle-кріслом, по центру білий серіф «Visit Our Holistic Studio», body-копія про holistic care studio і CTA «Schedule My Session» — Studio-interior як передостанній блок перед футером — це інверсія дефолтного e-commerce-патерну, де останньою секцією зазвичай йде newsletter або bestseller-grid. Тут — sensorial-image, який каже «приходьте побачити», а не «купіть зараз». Для wellness-вертикалі це працює сильніше за метрики conversion: studio-візит — це 90-хвилинне зобовʼязання, що вимагає психологічного дозволу зайти в простір. Картинка інтерʼєру дає це дозвіл до моменту, як клієнтка відкриє календар. NoMad-локація (між Mama Mezze і IMPACT Kitchen, 9-й поверх будівлі 1123 Broadway) — додатковий trust-signal через географічну точність, опубліковану у footer-у і на /contact-us/.

Соц-доказ — 12 customer reviews + Instagram-grid @liliwaystudio

Слайдер відгуків — 12 карток (повторюються в loop): Tianna Wong («Best facial experience I have had in NY»), Meg H. («the space feels incredibly calming»), Kelly Wiet («I always feel incredibly comfortable»), Ruby Simmons («I trust with my skin more than Liliway»), Ali Driesman («one of a kind and truly the best of the best»), Lulu («INCROYABLE!»). Кожна картка — body-копія цитати з еліпсисом наприкінці і ім’я-підпис під нею. На /services/ — поглиблений слайдер з 6 розгорнутих відгуків з заголовком (««My skin has never looked better.» — MARY KATE CARRAGHER», ««I won’t let anyone else touch my face.» — Kaitlin Kuhn», ««Felt like I was in a Paris» — ANN PETERS»). Останній блок перед футером — Instagram-grid «Follow us on instagram @liliwaystudio» з 12 видимих постів (мікс photo / carousel / video), кожен — клікабельна-tile, що відкриває IG-deep-link.

Стек і технічні рішення

WordPress core з кастомною темою (no public theme indicator), Yoast SEO для meta+sitemap, jQuery+jQuery Migrate 3.4 для legacy-virtual-dependencies, WooCommerce з модифікованою checkout-template (Afterpay-button нативно вкладений у product-page і checkout-step). Платежі — PayPal Smart Buttons з PayPal Fraud Protection (reCAPTCHA v3 invisible-token pre-generation на product-load, що проходить разом з cart-submission). Lazy-loading у gallery-thumbnails, slick-carousel для exclusive/customer-favorites/testimonials/IG-grid, fancybox для product-gallery overlay. Newsletter signup — Klaviyo-формат (3-field signup без double-opt-in confirmation модалки на client-side), Sign-up-button лиш render-ить inline-success без redirect. GlossGenius — окремий subdomain (liliway.glossgenius.com), не embed-iframe — це навмисно для повноцінного booking-флоу без CSP/X-Frame-Options обмежень.

Що зробили

Розкол двох-каталог-логік (gated Biologique Recherche + public retail) у єдиному /shop/-grid через role-based price visibility і кастомні select-фільтри — без додавання WooCommerce-Subscriptions чи Memberships-плагінів, які заразили б schema і ускладнили дамп бази. Інтеграція Afterpay-Widget на product/cart/checkout без зайвих CSS-конфліктів з custom-темою (Afterpay має tendency override-нути font-stack на checkout-step, що тут зачищено через scoped reset). Розкол WC-checkout від appointment-booking — GlossGenius як external scheduler без iframe-embed, що зберігає WP-page-speed і не тягне 200-КБ scheduler-JS на every page-load. 5-категорійна навігація у footer з 3-anchor-лінками на /services/# для seamless one-page UX. Yoast-SEO meta для head-схеми, JSON-LD Product schema на product-сторінках і LocalBusiness schema на /contact-us/ для NoMad-локації.