«Бренд-сайт сети продуктовых магазинов на Tilda с кастомной самообслуживаемой картой на Yandex Maps, фильтруемым каталогом и режимом поддержки — от инфраструктуры 2024-го до карты и каталога 2026-го.»
«Находка» — продуктовый бренд с сетью фирменных магазинов «дешёвого» сегмента (не lux): более 400 магазинов в 13 регионах России. Сайт nahodka-magazin.ru мы собрали и ведём на Tilda с большим объёмом кастомного кода в zero-блоках. Проект начался необычно: на домене уже жил акционный лендинг, и нашей задачей было пересобрать его в полноценный сайт бренда — убрать розыгрыш, рассказать про сеть и, главное (так стоял бриф), дать людям удобно смотреть адреса магазинов. Из этого выросла интерактивная карта на Yandex Maps, которую мы переписали собственным кодом, а затем превратили в самообслуживаемый механизм: клиент сам загружает Excel — точки появляются на карте автоматически, с кластеризацией и поиском по регионам. Поверх — фильтруемый каталог, формы с маршрутизацией по почтам домена, сезонное оформление и режим поддержки с передачей управления клиенту. Работаем с проектом с осени 2024-го по сей день — ниже его история по датам.
Главное целевое действие сайта по брифу — чтобы посетители смотрели адреса магазинов. Готовых решений было два, и оба не подходили: штатный блок карты Tilda не давал поставить фирменный маркер «Н» и тянул ручное ведение точек, а стандартный конструктор Яндекс.Карт «слетал» с кастомных маркеров при любой замене embed-кода. Карту пришлось переписать собственным JS прямо в zero-блоке: маркеры «Н» по API Яндекса, точки в локальном GeoJSON. Дальше задачу усложнили — сеть растёт, адреса меняются, а править их должен сам клиент без участия разработчика. Так появился самообслуживаемый бэкенд карты: клиент загружает Excel — точки рендерятся автоматически, с кластеризацией и поиском по регионам.
Сайт начинался не с чистого листа: на домене nahodka-magazin.ru уже жил акционный лендинг, на котором была развёрнута доменно-почтовая инфраструктура. Задача стояла пересобрать его в полноценный сайт сети — убрать розыгрыш, дать информацию о бренде — и при этом не сломать унаследованные домен, DNS и почты. Всё собрано на Tilda с большим объёмом кастомного кода в zero-блоках: интерактивная карта, фильтруемый каталог, маршрутизация форм. Установка клиента была прямой — «не lux, сеть дешёвых магазинов: пересобрать текущий контент в современной стилистике».
Проект работает в режиме самообслуживания и сопровождения. Регулярно меняем баннеры на главной, обновляем контент, готовим и снимаем сезонное оформление, дополняем инструкции для клиента — по замене баннеров, обновлению адресов на карте и каталога. Поддержка и развитие продолжаются по сей день; в проработке — push-уведомления и дополнительные страницы для партнёров.
Сверстали и вывели в прод фильтруемый каталог /catalog: карточка «картинка + название + цена», попапы товаров, фильтры вынесены из дропдауна в текстовые кнопки слева (десктоп и мобайл). В витрине — восемь разделов: «Любо выгодно», «Всё для пасхи и кулича», «Ураза байрам», «Всё для плова», «Белорусская продукция», «Предложение месяца», «Эксклюзивно в Находке», «Вкусненькое для своих». Каталог можно смотреть на сайте и скачивать PDF — файл лежит на CDN Nocodered.
Расскажите о задаче — предложим архитектуру решения. Без шаблонных КП и абстрактных смет: конкретика на старте.
Каталог nahodka-magazin.ru: фильтруемая витрина с разделами, карточками «картинка + название + цена» и выгрузкой PDF.
Достроили карту магазинов до самообслуживаемого механизма. Завели под проект отдельный GitHub-репозиторий и собрали служебную страницу /update-map под паролем: клиент загружает Excel — точки на карте рендерятся автоматически (штатная форма Tilda не подошла, сделали свою). Добавили кластеризацию точек по плотности и сворачиваемый поиск по регионам — на слабых устройствах большое число иконок «вешало» сайт, поэтому нагрузку оптимизировали. Рабочий процесс прост: клиент правит точки на Яндекс.Картах, выгружает файл и публикует — без участия разработчика. Данные карты вынесены на CDN Nocodered, вопрос CORS решён.
Страница «Адреса магазинов»: кастомная карта на Yandex Maps с фирменными маркерами «Н», кластеризацией по регионам и поиском — более 400 магазинов в 13 регионах.
Собрали сезонную версию сайта: снежинки на всех страницах, новогодняя шапка, баннер и зимний логотип, картинка Telegram-чата в подвале, обновлённый hero и место под сезонные каталоги. Превью согласовали с клиентом, дособрали мобильную версию и опубликовали в прод 24 декабря. В январе оформление аккуратно сняли и вернули обычную обложку.
Передали клиенту управление сайтом на Tilda — доступ к аккаунту и первую инструкцию по самостоятельной замене баннеров. Под вкладку «Партнёрам» проработали дополнительные страницы — «Арендодателям» и «Оптовикам» — по аналогии со страницами арендаторов и поставщиков. Тогда же предложили интеграцию push-уведомлений через сайт (OneSignal) — направление осталось в проработке.
Довели сайт до публикации. Заменили favicon на логотип, к каждой форме привязали согласие на обработку персональных данных со ссылкой на страницу /privacy и поставили cookie-popup. Формы стали открывать отдельную страницу «Спасибо» /success. Передали клиенту DNS-записи для делегирования домена — после их внесения сайт стал доступен на nahodka-magazin.ru. 14 июля провели демо в Zoom: показали изменения и обучили клиента самостоятельным правкам. Тогда же согласовали карточки 13 регионов присутствия с флагами для страницы «О компании» — их дособрали к августу.
Главная nahodka-magazin.ru: зелёный бренд-сайт сети «Находка», hero «Цены! Куда ещё ниже?!», блоки преимуществ, категории товаров и интерактивная карта магазинов.
Сверстали страницы на отдельном платном аккаунте Tilda: главная со слайдером баннеров (16:9) и блоками «актуальные предложения» и «товарные категории», «О компании», «Вакансии» с кликабельными карточками должностей, страницы арендаторов и поставщиков с формами и загрузкой файлов. Собрали первую версию интерактивной карты на Yandex Maps — фирменный маркер «Н» через кастомный JS в zero-блоке. Настроили маршрутизацию форм по почтам домена (главная, арендаторы, поставщики, вакансии через Avito/hh.ru), аналитику (Яндекс.Метрика и счётчик mail.ru) и соцвиджеты (VK, Одноклассники, Jivosite); добавили SEO-описания и cookie-согласие.
Страница «О компании»: карточки 13 регионов присутствия и инфографика преимуществ сети «Находка».
Страница «Вакансии» сети «Находка»: HR-бренд, кликабельные карточки должностей и форма отклика.
Страница «Арендаторам»: форма обратной связи с загрузкой файлов и маршрутизацией заявок по почтам домена.
Сделали кикофф редизайна по брифу: цель — просмотр адресов магазинов, страницы — главная, «О компании», «Вакансии», «Поставщикам», «Арендаторам», адреса; один язык, без оплат и калькуляторов. Клиент передал брендовые ассеты — шрифты Gilroy, IntroDemoCond и afuturaround, логотип в SVG. В Figma собрали пять концептов главной; на демо 18 апреля за основу взяли зелёное направление, и 23 апреля клиент его утвердил. Дальше отрисовали страницы «О компании», «Вакансии», «Арендаторам» и «Поставщикам».
Клиент попросил переделать акционный лендинг в собственный сайт бренда — убрать розыгрыш и рассказать о «Находке». Оформили работу коммерчески: смета «Находка», рамочный договор с приложением. Выдали клиенту бриф и референсы — с этого началась полноценная разработка бренд-сайта.
Развернули доменно-почтовую инфраструктуру, которую затем унаследовал бренд-сайт. Завели домен nahodka-magazin.ru в работу, передали клиенту DNS-записи для регистратора и настроили почту: SPF и DKIM, ящик support@nahodka-magazin.ru. Подняли CDN-поддомен для PDF-документов и поставили Яндекс.Метрику. На этой базе позже и вырос сайт сети магазинов.