сайт на тильда доставка еды
Как добавить варианты доставки товара
Укажите тип поля «Варианты доставки».
Перечислите варианты доставки, отделяя их переносом строки. Если вариант доставки не бесплатный, поставьте знак = и укажите цену (только цифры, без знака валюты).
После этого при выборе города в корзине будут показываться все пункты выдачи, которые добавлены в данном городе.
После этого при выборе города в корзине будут показываться все пункты выдачи, которые добавлены в данном городе. После успешной оплаты заказа в СДЭК будут передаваться заказы и формироваться накладные.
Если нужно использовать разные тарифы СДЭК в одном проекте, добавьте несколько вариантов доставки, каждый со своим тарифом.
Track Number (трек-номер или номер отслеживания посылки) можно найти в личном кабинете СДЭК.
СДЭК также передает Track Number в раздел «Заявки» в Тильде, но с некоторой задержкой (от нескольких минут, до 24ч.), поэтому в данный момент нет возможности включить Track Number в содержание самой заявки, которая отправляется на подключенные к Корзине приемщики.
Ошибку может вернуть информационная система СДЭК при расчете стоимости отправки с вашими параметрами (тариф, место отправления, габариты и вес товаров в корзине).
О точной причине возникновения ошибки нужно спрашивать в техподдержке СДЭКа, прикладывая к заявке запрос (выводится сразу после ошибки в журнале ошибок доставок) и его время.
«Тильда для ресторанов» на Bubble без кода
Год назад Евгений Спорыхин руководил SMM-агентством и привлекал разработчиков на проекты. Зерокодингом увлекся после первого потока нашего интенсива Airtable Express. Сейчас Женя — один из лучших экспертов по Bubble, руководит студией NoCode Hero и преподает в университете Зерокодер. Он рассказал о своем новом кейсе — конструкторе сайтов для рестораторов на Bubble.
Как придумал идею
Я наблюдал за кафе, ресторанами и кондитерами в инстаграме и заметил, что они берут заказы через директ, выкладывая блюда прямо в ленту. Это неудобно: в сообщениях заказы теряются, отвечать надо быстро — легко упустить продажу. Еще тяжелее вести качественную статистику: приходится отыскивать заказы среди всех сообщений и вручную переносить в таблицы. Оплату принимать можно принимать только в серую — на карточку.
Тогда я решил назерокодить свой проект и проверить гипотезу — насколько интересен этот рынок и есть ли в нем деньги.
Для сервиса выделил такие требования:
Рестораторам должно быть просто его использовать
Удобная админка с базовыми функциями: статистика по заказам, среднему чеку, клиентам.
Интеграция с платежными сервисами и возможность «запомнить» клиентов.
Адаптация под мобильные— и рестораторы, и клиенты чаще всего выходили в инстаграм с телефонов.
Автоматически сгенерированный мини-сайт ресторана
Что под капотом
Собрал всё на Bubble — «мобильные» Adalo и Glide не потянули бы сложную бизнес-логику.
Веб-приложение позволяет рестораторам в пару кликов загрузить блюда в сервис. Еще можно сделать аккуратный сайт с доставкой, корзиной, формой заказа. На нем будет просто зарегистрироваться и из него легко доставать статистику. Ссылка на сайт публикуется в инстаграме — туда и ведут клиентов из постов и сториз.
Конечно, они могли бы собрать лендинг на Тильде, но тогда бы пришлось заморачиваться с версткой, кастомизировать шаблоны, подключать корзину, CRM и другие компоненты. А в сервисе всё уже адаптировано под инстаграм-кухню: надо только загрузить картинки, описание блюд и цены — симпатичная верстка генерируется автоматически.
Интерфейс для ресторатора
Ресторатор регистрируется и добавляет свои заведения (можно добавить целую сеть) и у него появляется набор возможностей:
По каждому ресторану статистика ведется отдельно.
В системе есть дашборды по выручке за каждый день, количеству заказов и среднему чеку.
На вкладке «Заказы» — вся информация по текущим и уже выполненным заказам.
На вкладке «Клиенты» — базовая CRM.
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке
Дашборды со статистикой по среднему чеку, количеству посетителей и выручке
Потом он вводит все, что собирается продавать в доставке, и стоимость каждого блюда в пункт «категории, блюда и акции» в админке:
Есть возможность отметить блюдо как рекомендованное — тогда оно выводится в самом заметном блоке на страничке ресторана.
Есть раздел «Акции и скидки» — спецпредложения из него выводятся на главной в виде слайдера. Акций может быть несколько.
Как только ресторатор закинул всю информацию в админку и сохранил, он сразу может посмотреть свой сайт. Bubble генерирует дизайн сразу под мобильные устройства.
Добавление категорий блюд в интерфейсе для ресторатора
Пользовательский интерфейс
Пользователь может один раз зарегистрироваться в любом ресторане, подключенном к платформе, а потом делать заказы с этого логина во всех остальных заведениях сервиса. Но во вкладку «Клиенты» конкретного заведения он попадет, только если сделает заказ в нем.
Во время оформления заказа платформа проверяет, зарегистрирован ли пользователь. И если да — то сразу дает сделать заказ, а если нет — отправляет на почту уведомление о заказе и ссылку для подтверждения регистрации.
Внешний вид конструктора сайтов для рестораторов
На главной странице видны товары. Если нажать плюс под товаром на главной, попадаешь в подробное описание блюда — можно добавить его в корзину и выбрать количество. Перед оформлением заказа сервис еще раз уточнит количество блюд.
В корзине при оформлении заказа автоматически подтягиваются данные пользователя: имя, телефон, имейл. В стандартной комплектации Bubble уже есть Google Maps — он дает возможность настроить автодополнение адреса.
Хаки для разработчиков
Механика в проекте интересная, но в Bubble все делалось очень просто. Мне даже не пришлось подключать дополнительные плагины — хватило стандартной комплектации.
Чтобы не прописывать каждую вкладку меню и кнопки вручную, я сделал их с помощью Option Set — наборы опций. Я использую их, чтобы не надо было создавать вкладки под каждого администратора заведения. Достаточно прописать новую кнопку, элемент или вкладку меню в таком наборе опций, и они тут же появляется в админке и на всех сайтах. Например, сейчас в панели администратора есть статистика, клиенты, блюда и т.п. — если мы добавим новую строку в Option Set, вкладка под нее автоматически появится у всех рестораторов.
Настройки Optional Sets
Вся бизнес-логика для новых вкладок берется из одного Workflow. Пару месяцев назад я бы прописывал всё это руками, и у меня уже на старте получилось бы целых 7 Workflow. Со временем их становилось бы все больше и больше.
Отображение карточки товаров мы генерируем через Reusable Element — то есть если мы захотели поменять отображение какого-то типа карточки, то просто меняем опции и view автоматически обновляется на всем сайте — не приходится переверстывать отдельные страницы.
Сколько потратил на разработку
В сумме я делал приложение 25 часов — примерно неделю по 5 часов в день, но не слишком напрягаясь, это был проект по фану, не для заказчика. Делал на бесплатном тарифе.
Если бы заказывал такое в обычной студии разработки, думаю, это обошлось бы примерно в 1 млн рублей и срок был бы гораздо дольше.
Настройки блюд: можно вывести в «рекомендованное», поменять стоимость, выставить фильтры по категориям
Планы на будущее
Сейчас популярны различные агрегаторы — та же Яндекс.Еда. Мы тестируем приложение и смотрим, выстрелит ли оно. Если гипотезы подтвердятся, в следующих итерациях добавлю в личный кабинет рестораторов рассылки, CRM, программы лояльности, возможность кастомизации — цвет и форма кнопок, меню, разный дизайн категорий.
Bubble — это платформа для создания веб-приложений без навыков программирования, инструмент all-in-one. В нем есть визуальный редактор, базы данных, инструменты для бизнес-логики и работы с разными API. Он позволяет создавать полнофункциональные чаты, форумы, системы сбора и обработки заявок, таск-трекеры, маркетплейсы, CRM и дашборды. Если вам тоже интересен Bubble, присоединяйтесь к сообществу Bubble Chat & Community.
Особенности сайта кафе и ресторана
При создании сайта кафе или ресторана важно понимать, что его визуальное оформление должно усиливать чувство голода, выделяться среди сайтов похожих заведений. Поэтому нужно, чтобы все фотографии были авторскими, профессиональными, выгодно подчёркивали ваши блюда и обстановку.
Кроме этого, сайтам крупных заведений необходим модуль онлайн-бронирования столиков. Если кафе расположено в туристической зоне, важно иметь мультиязычную страницу, онлайн-консультанта со знанием английского.
Особенности создания эффективных сайтов для бизнеса
Проработка структуры сайта кафе или ресторана: какая информация должна быть на сайте
Посетители часто ищут ресторан на ходу. Они голодны, у них нет времени на поиск нужной информацию. Поэтому структура сайта должна быть логичной и простой, а навигация — интуитивно-понятной. К информации, которая поможет потенциальным клиентам сделать выбор, относится:
Обложка сайта ресторана или кафе
Создать продающий сайт ресторана невозможно без привлекательной обложки, которая возбудит аппетит посетителя. Покажите своё самое красивое блюдо, добавьте небольшую анимацию (например, имитацию пара), используйте выразительный шрифт.
УТП ресторана
Продающая обложка сайта содержит уникальное торговое предложение — короткую, но ёмкую фразу, которая подчеркнёт главное преимущество вашего ресторана. УТП должно быть конкретным. Например, «дарим бокал авторского коктейля каждому посетителю» или «1+1 на все салаты после 17.00».
Призыв к действию
После того, как посетитель ознакомился с УТП, ваша задача — сразу конвертировать его в гостя ресторана. Для этого на обложке нужно разместить призыв к действию, лучше с обратным отсчётом и обещанием небольшого бонуса. Например, «забронируйте столик сейчас и получите скидку 5%».
Меню ресторана на сайте
Профессиональные фотографии деликатесов
Посетители часто решают, в какой ресторан пойти и что там заказать, по изображениям на сайте. Поэтому не стоит использовать стоковые фотографии, если в реальности ваши блюда выглядят по-другому. Иначе клиент почувствует себя обманутым, больше не придет в это заведение.
Чтобы фотографии выглядели качественно, аппетитно, пригласите специалиста. Фуд-фотографы умеют создавать красивые композиции из продуктов, передавать атмосферу ресторана. Эта инвестиция быстро окупится благодаря потоку клиентов.
Описание блюд
Текст для сайта кафе должен быть дружелюбным, компактным, продающим. Не используйте иностранные названия продуктов, если у них есть русские синонимы. Откажитесь от замысловатых эпитетов при описании блюд — клиентов интересует, из чего они приготовлены, как их рекомендуется есть (с гарниром или без, горячими или холодными), размер порции, пищевая ценность. Рассказ об истории возникновения может подойти для авторских деликатесов, но не для пиццы или стейка.
Какие блюда больше остальных привлекают внимание
Некоторые продукты и блюда особенно привлекательны для потенциальных клиентов. К ним относятся:
В зависимости от специализации заведения, фотографии этих блюд подойдут для обложки сайта. Изображения фруктовых коктейлей можно использовать на странице смузи-бара, шоколадный торт украсит баннер кондитерской, роллы привлекут внимание любителей японской кухни.
Почему меню должно быть сверстано на страницах сайта, а не приложено файлом для скачивания
Большой процент трафика сайтов общепита приходит с мобильных устройств. Это значит, что посетителям будет намного удобнее ознакомиться с меню прямо на странице, а не скачивать отдельный файл, пытаться его открыть. Многие пользователи предпочитают ничего не скачивать с незнакомых сайтов — они просто уйдут со страницы, если не найдут нужную информацию.
Знакомство с шеф-поваром: страница о команде
Услуги кафе и ресторана
Мероприятия, проводимые в заведении
Контакты: местоположение, способы связи, часы работы
Пользователи часто ищут рестораны поблизости в таких приложениях, как Google Maps или Яндекс.Карты. Поэтому важно не только указать адрес кафе и часы работы на сайте, но и заполнить профиль компании в онлайн-карте города. Пользователь увидит вашу точную локацию, а приложение подскажет, открыт ли ресторан.
Чтобы сделать общение с рестораном комфортным, добавьте на страницу онлайн-консультанта или чат-бота. Так потенциальный клиент сможет быстро задать вопрос, без необходимости звонить администратору.
Сервис онлайн бронирования
Сайт с возможностью доставки еды
Адаптивность сайта для заведений общепита
Дизайн сайта кафе
Дизайн сайта ресторана должен отражать атмосферу заведения, его интерьер. Визуальное оформление страницы европейского ресторана будет отличаться от сайта кондитерской — в первом случае стоит отказаться от большого количества ярких элементов, декоративных шрифтов.
Чтобы сайт был не просто красивой картинкой, но и приносил прибыль, сделайте его максимально комфортным в использовании. Позаботьтесь об удобной навигации, не перегружайте верхнюю часть главной страницы. Если вы предлагаете много категорий блюд, добавьте функцию поиска.
Какие цвета разжигают аппетит
Цвета влияют на восприятие контента посетителями, их эмоции. Чтобы создать аппетитный дизайн сайта кафе, используйте тёплые оттенки красного, оранжевого, жёлтого, пурпурного. Коктейли таких цветов также более популярны среди гостей ресторанов. Избегайте синий цвет, он может подавлять аппетит.
В случае кофейни, лендинг можно оформить в шоколадных, карамельных, сливочных тонах, чтобы создать ассоциацию с напитком. Фотографии обжаренных кофейных зёрен также помогут конвертировать посетителей страницы в клиентов заведения.
Продвижение сайта ресторана и кафе
Чтобы привлечь стабильный трафик на сайт, важно использовать комплексные методы продвижения.
SEO продвижение ресторана необходимо, чтобы ваша страница отображалась среди первых при поиске в Яндекс, Гугл. Учитывая высокую конкурентность данной ниши и приоритетное размещение агрегаторов в поисковой выдаче, сайт должен быть максимально оптимизирован, чтобы попасть в ТОП. Для этого проверьте скорость загрузки страницы, размер и качество изображений, корректную интеграцию виджетов. Далее важно подобрать ключевые слова, которые часто встречаются среди интернет-запросов вашего города. Используйте их в заголовках, описаниях на странице для привлечения органического трафика.
Для раскрутки сайта ресторана также полезна реклама в социальных сетях. Создайте страницу кафе в приложении Инстаграм, добавьте много красивых фотографий, сотрудничайте с фуд-блогерами вашего города, настройте таргетированную рекламу и направляйте посетителей профиля на сайт заведения.
Из чего складывается цена на сайты кафе, ресторана, доставки еды
Почему разработку сайта для ресторана или кафе нужно доверить профессионалам
Сайт ресторана на Тильде можно создать самостоятельно при помощи шаблонов, но такая страница не позволит вам прокачать имидж заведения, отстроиться от конкурентов, привлечь много клиентов. Шаблонные сайты хуже ранжируются, плохо запоминаются, быстро теряют актуальность.
Поэтому разработку сайта ресторана стоит доверить специалистам. В студии WebValley мы проанализируем вашу целевую аудиторию, главных конкурентов. Создадим концепт проекта, оптимизируем структуру сайта, нарисуем уникальный дизайн, подключим сервисы бронирования, доставки. Наши сайты окупаются через 3−4 недели после запуска, а благодаря видео-урокам об администрировании страниц на Тильде, вам не понадобится нанимать программистов.
Как сделать интернет-магазин
Рецептов много, универсальных советов нет. Лучше избегать сложных названий и выбирать короткие слова.
Все делают по-разному: кто-то берет имя и фамилию (Гоша Рубчинский, Tommy Hilfiger), другие используют географию (Nokia, Patagonia), третьи придумывают ассоциации (магазин мебели Мебеледом, Land Rover). У кого-то название получается случайно — Стив Джобс придумал название Apple, потому что ему нравились яблоки и он хотел, чтобы компания была выше фирмы Atari в телефонной книге. Основатели Google хотели назвать проект Googol (обозначает число: единица и сто нулей), но домен googol.com был занят и они поменяли пару букв.
Придумайте много разных идей и выберите несколько вариантов названий, которые лучше всего подходят для вашего интернет-магазина. Потестируйте их — спросите, что думают о названиях ваши знакомые.
История из жизни: у одного магазина оправ и очков было название I wear eyeware — красивая игра слов, но на слух непонятно. Потом они переименовались в «Синоптикс».
В должности дизайнера я не работал уже несколько лет. До этого я был бренд-дизайнером Нокии и Электролюкса в одном из лондонских агентств, а позже дизайн-директором технологического стартапа. Тем не менее, думать как дизайнер я не перестаю никогда, поэтому у меня иногда заказывают айдентику. А иногда не заказывают. Недавно как раз такой случай произошел.
Жене написала знакомая, затевающая юридический бизнес в Германии. Я назвал некую скромную ставку фрилансера, за которую был бы готов этот бизнес оформить, но у ребят это явно не было заложено в бюджет, и они загрустили. Тогда я предложил им короткую и простую инструкцию. Как сделать логотип самим и бесплатно, будучи юристами и аудиторами. Забегая вперед скажу, что эту инструкцию они применили и, вроде бы, остались довольны.
Ниже мой концентрированный опыт. 15 лет дизайна за 30 секунд.
Что делать, если бизнес-идея есть, а денег на логотип нет? Как не опозориться?Очень просто. Нужно взять название бизнеса и написать его хорошим шрифтом на белом фоне. Аккуратно, без дополнительных смыслов, фантазий, креатива и вот этого всего.
Хорошие шрифты: Helvetica, Gotham, Bodoni, Georgia.
Примеры компаний, которые так сделали и не опозорились: American Apparel, Jeep, Panasonic, 3M, Adidas, Gap.
Tilda Publishing
Tilda помогает создавать впечатляющие сайты для бизнеса и медиа.
Публикуем новости про обновления платформы, ссылки на лучшие проекты, созданные нашими пользователями, и оригинальные статьи о дизайне и интернет-маркетинге.
Если у вас есть вопрос, связанный с работой платформы, пожалуйста, пишите на team@tilda.cc
Если вы хотите найти исполнителя сайта на Тильде или получать заказы на дизайн, пожалуйста, используйте сервис Tilda Experts http://experts.tilda.cc/ru/
Tilda Publishing запись закреплена
Открыто задание для участников Tilda Design Battle https://blog.tilda.cc/designbattle2#task.
Tilda Design Battle — это творческая битва дизайнеров на Тильде. Участвовать может любой человек, который умеет создавать сайты на платформе.
1. Выполненную работу необходимо прислать сегодня до 23:59 через форму на странице баттла.
2. Результат нужно отправить в виде ссылки на опубликованный сайт, созданный в Тильде. Ссылки на макеты из графического редактора не принимаются.
Дополнительные требования:
— страница должна быть адаптирована под разные экраны;
— нужно использовать в дизайне весь текст из ТЗ;
— уникальность решений будет учитываться особым образом.
3. После окончания приёма заявок вносить изменения в содержание или внешний вид сайта запрещено. Мы отслеживаем это по времени публикации страницы. Если страница будет переопубликована позже, организаторы имеют право дисквалифицировать участника, даже если изменения не вносились.
4. Один участник может прислать только одну работу.
5. Победителей объявим в прямом эфире на нашем YouTube-канале 29 ноября в 13:00 по московскому времени. Ссылку на трансляцию пришлем на почту.
Все условия участия и информацию о призах смотрите по ссылке: https://blog.tilda.cc/designbattle2.
Tilda Publishing запись закреплена
Tilda Design Battle 2
Уже завтра пройдёт новая творческая битва дизайнеров на Тильде! Попробуйте свои силы и вдохновитесь на создание классных сайтов в борьбе за призовые места.
Начало в 9:00 по Москве.
Подробности 
https://blog.tilda.cc/designbattle2
Начало в 9:00 по Москве.
Tilda Publishing запись закреплена
Заголовки на сайте
Заголовки позволяют человеку сканировать страницу, читать текст нелинейно и быстро находить информацию. Рассказываем, как писать и оформлять заголовки.
— Текст заголовка
Показать полностью.
Каждая новая секция сайта несёт в себе новую мысль. Кратко и чётко сформулируйте эту мысль в заголовке. Не пишите сложных фраз, человек должен считывать заголовок за миллисекунды. Вместо «Убедитесь, что курс подходит именно для вас» напишите «Для кого курс».
— Шрифт заголовка
Для заголовков можно использовать другую насыщенность шрифта или даже другой шрифт. Главное, чтобы типографика заголовка и основного текста сочетались, но заголовок сразу считывался без труда, не сливаясь с текстом.
— Размер заголовка
Заголовок, как правило, делают крупнее основного текста. Самое важное правило — все заголовки одинаковых по значению секций должны быть одинакового размера. Иначе не будет соблюдаться иерархия, и человек будет путаться на странице.
Например, если первый заголовок «О курсе» размером 62px, то заголовок следующей секции «Для кого курс» также должен быть 62px — так страница будет аккуратной, а новая секция и новая мысль будут легко считываться.
— Отступы вокруг заголовка
Отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. Отступ над заголовком лучше делать в два раза больше, чем под ним. Так заголовок не прилипнет к предыдущей секции и будет относиться к последующему тексту.
Чтобы структура страницы хорошо считывалась не только людьми, но и роботами, назначьте заголовку на обложке тег H1, а заголовкам секций — тег H2. Для поисковых систем это будет знаком хорошей разметки и правильной структуры страницы. Для добавления тега в настройках блоков с заголовками есть параметр SEO: Тег для заголовка.
Полезный пост? Расскажите в комментариях 
— Текст заголовка
Каждая новая секция сайта несёт в себе новую мысль. Кратко и чётко сформулируйте эту мысль в заголовке. Не пишите сложных фраз, человек должен считывать заголовок за миллисекунды. Вместо «Убедитесь, что курс подходит именно для вас» напишите «Для кого курс».
— Шрифт заголовка
Для заголовков можно использовать другую насыщенность шрифта или даже другой шрифт. Главное, чтобы типографика заголовка и основного текста сочетались, но заголовок сразу считывался без труда, не сливаясь с текстом.
— Размер заголовка
Заголовок, как правило, делают крупнее основного текста. Самое важное правило — все заголовки одинаковых по значению секций должны быть одинакового размера. Иначе не будет соблюдаться иерархия, и человек будет путаться на странице.
Например, если первый заголовок «О курсе» размером 62px, то заголовок следующей секции «Для кого курс» также должен быть 62px — так страница будет аккуратной, а новая секция и новая мысль будут легко считываться.
— Отступы вокруг заголовка
Отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. Отступ над заголовком лучше делать в два раза больше, чем под ним. Так заголовок не прилипнет к предыдущей секции и будет относиться к последующему тексту.
📌 Чтобы структура страницы хорошо считывалась не только людьми, но и роботами, назначьте заголовку на обложке тег H1, а заголовкам секций — тег H2. Для поисковых систем это будет знаком хорошей разметки и правильной структуры страницы. Для добавления тега в настройках блоков с заголовками есть параметр SEO: Тег для заголовка.