Разработка интернет-магазина косметики MOLIQ на Tilda — кастомный каталог, личный кабинет и e-commerce-автоматизация

Брендовый магазин с гибкой e-commerce-логикой

MOLIQ должен был выглядеть как самостоятельный digital-продукт, но оставаться удобным в ежедневной работе: товары, цены, заказы и штатные процессы покупки продолжают управляться через Tilda.

Сохранить эстетику бренда и выйти за рамки типового магазина

Для косметического бренда интерфейс — часть продукта. Покупатель оценивает фотографии, оттенки, подачу карточек и весь путь до оформления заказа. Стандартных товарных блоков для этой задачи было недостаточно.

Нужно было собрать удобный каталог для растущего ассортимента, показать вариативность оттенков, добавить личный кабинет и маркетинговые сценарии, сохранив при этом штатную работу корзины и управления заказами в Tilda.

Tilda как ядро, собственный frontend и WordPress API

Каталог и данные товаров остаются в Tilda. Интерфейс получает их через Store API, собирает карточки и передаёт добавление товара в штатную корзину. Серверные правила промокодов и программы ко дню рождения работают в отдельном WordPress-модуле.

Так команда бренда продолжает работать с товарами и заказами в привычной среде, а пользователь видит целостный интерфейс MOLIQ.

1С:УНФ (ФРЕШ) и интеграция с Tilda

В качестве системы складского учёта для MOLIQ настроена 1С:УНФ (ФРЕШ). Между Tilda и 1С работает кастомная интеграция: обмен данными настроен без ошибок и задвоений.

Магазин остаётся удобным для покупателей на Tilda, а складской учёт ведётся в 1С без повторного ручного переноса данных.

Визуал продукта ведёт покупателя к каталогу

Первый экран строится вокруг крупного hero-контента. За ним идут категории, новинки, промо- и брендовые блоки. Покупатель сначала считывает характер бренда, а затем переходит к выбору товара.

Две полноценные темы вместо простой смены фона

Ночная тема автоматически включается с 18:00 до 05:00. Ручной выбор сохраняется в браузере и имеет приоритет над расписанием.

На Tilda часть элементов появляется после загрузки страницы. Поэтому тема учитывает динамические изменения: вместе с фоном меняются карточки, формы, слайдеры, логотипы, SVG и другие детали интерфейса.

Кастомный каталог поверх Tilda Store API

Источник товаров остался в Tilda, а каталог получил собственный интерфейс: категории, счётчик результатов, сортировки, карточки и состояния загрузки. На телефоне фильтры и плотность сетки адаптируются под небольшой экран.

Для декоративной косметики название товара не заменяет визуальный выбор оттенка. Каталог разбирает характеристики и показывает цветовые маркеры, а выбранная на телефоне плотность сетки сохраняется в браузере.

Крупная галерея и связанный выбор оттенков

В карточке товара главный акцент сделан на изображениях и спокойной информационной колонке. Покупатель видит цену, объём, количество, оттенки и описание. Связанные варианты можно открыть через цветовые маркеры без возврата в каталог.

Контент штатных товарных блоков Tilda переиспользуется в accordion-разделах, ниже выводится блок «Ещё для вас». Добавление товара остаётся нативным действием Tilda.

Новый интерфейс поверх штатной корзины

Структура заказа, контакты, доставка, оплата, промокод и итоговая кнопка оформлены в стилистике MOLIQ. Кастомный слой перестраивает существующие элементы и восстанавливает состояние после перерисовок Tilda.

Сервер проверяет правила, Tilda применяет скидку

Обычного поля промокода было недостаточно: нужны лимиты активаций, привязка к покупателю, ограничения по товарам и категориям, исключение уже уценённых позиций и журнал использования.

Для проверки разработан WordPress-плагин с REST API. Перед применением кода frontend обращается к серверу MOLIQ. Размер скидки и пересчёт стоимости остаются за Tilda, а активный код повторно проверяется после восстановления корзины.

Tilda Members остаётся основой авторизации

Регистрация, вход и восстановление пароля визуально оформлены как часть бренда MOLIQ. Видимые формы связаны со штатными формами Tilda Members, поэтому собственный интерфейс не создаёт вторую систему учётных записей.

Для восстановления пароля предусмотрены состояния загрузки, ошибки и отправки, а после регистрации используются фирменные письма.

Персональное предложение ко дню рождения

Серверный модуль хранит данные участников, историю отправок и окна действия предложений. Письмо планируется за три календарных дня до дня рождения, не раньше 09:00 по часовому поясу WordPress.

Модуль учитывает ежегодные циклы, повторные отправки и 29 февраля. Для точного расписания используется серверный запуск WordPress cron.

Порог 7 000 ₽ виден ещё до оформления

В корзине отдельная карточка показывает прогресс до подарочного бокса. Пока условие не выполнено, покупатель видит оставшуюся сумму. После достижения порога статус меняется на «бесплатно добавлен к заказу».

Расчёт учитывает фактическую товарную сумму после скидки. Служебная отметка о подарке передаётся с заказом и не удаляет собственный комментарий покупателя.

Код учитывает динамическую работу Tilda

Корзина, формы, доставка и товарные блоки могут перерисовываться после загрузки страницы. Поэтому доработки наблюдают за изменениями DOM, повторно синхронизируют интерфейс и аккуратно сохраняют нужное состояние в браузере.

Так повторная отрисовка не сбрасывает выбранную тему, промокод или введённые данные, а собственный UI продолжает работать вместе со штатными механизмами платформы.