Доставка воды и напитков

Архитектура Zero Block для блока выбора тары и объема

Для ниши доставки воды (питьевая, для кулеров, газированная) критически важна быстрая идентификация продукта. Вместо стандартных галерей Tilda используйте Zero Block с кастомными переключателями объема (19л, 5л, 1.5л) и типа упаковки. Это снижает количество кликов до покупки и повышает конверсию на 15-20%. Важно реализовать мгновенное пересчитывание цены и иконки корзины без перезагрузки страницы — через буферные переменные и JS-скрипт обработки классов.

UX/UI-паттерны для формы заказа и корзины

Типичная ошибка — использование некастомизированных корзин Tilda с полем «Адрес». Для доставки воды нужны: привязка к YMaps API (автозаполнение улицы, дома, подъезда), выбор временного слота (сегодня/завтра/в течение часа) и опция «Замена пустой бутыли». Реализуйте это через вставку HTML-блока с формой, которая передает данные в CRM (например, AmoCRM или Tilda CRM). Кнопка «Оформить» должна блокироваться до заполнения обязательных полей — это снижает число пустых заявок.

Семантическая разметка и скорость загрузки

Используйте Schema.org/Product для каждого товара (минеральная, столовая, лечебно-столовая). Для страницы категории подключите Lazy loading для изображений бутылей (формат WebP, размер не более 120 КБ). Настройте CDN Tilda через глобальные настройки, чтобы ускорить загрузку фонов и Zero Block-анимаций. Для мобильной версии обязательно используйте Responsive модификации тени и заливки — это создаст эффект физического 3D-объекта бутылки, что повышает доверие.

Финансовые и юридические блоки

В подвале (footer) разместите не просто текст, а Zero Block с accordion-элементами: «Лицензия на розничную продажу воды (копия)», «Сертификаты качества», «Договор оферты». Это удовлетворяет требованиям ФЗ «О защите прав потребителей» и формирует E-A-T факторы. Также добавьте блок «Способы оплаты» с логотипами Visa, Mastercard, «СБП» — лучше через SVG-спрайт для экономии места.

Анимация для удержания внимания

На блоке «Как мы работаем» (пошаговая анимация) используйте Scroll Animation с появлением элементов: бутыль выезжает слева, капает капля (SVG-анимация), значок грузовика. Это улучшает Behavioral metrics (время на сайте, глубина просмотра). Все анимации должны быть оптимизированы через Intersection Observer — не нагружать CPU на мобильных устройствах.

FAQ и Featured Snippets

Как разметить FAQ для доставки воды на Tilda, чтобы попасть в блок Google?
Используйте Schema.org/FAQPage через JSON-LD с ответами не более 45 слов. Вопросы должны содержать ключи: «минимальный заказ», «бесплатная доставка воды стоимость», «возврат тары стоимость». Ответы оформляйте в Zero Block с тегом <span> и <div>, а для мобильной версии — аккордеон через CSS-челлендж (без JS).

Каким должен быть дескрипшн для страницы доставки воды?
Длина 140-160 символов, включите: город, тип воды (например, «С доставкой питьевой воды 19л и 5л по Москве в течение 2 часов»), условия (бесплатно при заказе от 300 руб). Избегайте вопросительных предложений — используйте утвердительный тон.

Как уменьшить процент отказов на лендинге доставки воды?
Добавьте sticky-панель с калькулятором стоимости внизу экрана (через Zero Block с фиксированной позицией). В панели должно быть: выбор объема, кнопка «Купить», счетчик товаров. Это снижает количество лишних кликов до корзины. Также проверьте корректную работу sticky на iOS Safari — добавьте -webkit-sticky в кастомный CSS.