Примеры интернет-магазинов созданных на Tilda

Примеры интернет-магазинов на Tilda

Tilda – конструктор с мощными инструментами для настройки внешнего вида сайта. На нём часто создают промо-страницы, лендинги, визитки специалистов, специальные проекты для СМИ. Но конструктор подходит и для запуска полнофункциональных интернет-магазинов с каталогами товаров, корзиной, разными способами оплаты и доставки.

Создать интернет-магазин на Tilda можно с помощью стандартных блоков. Если среди них нет подходящих вариантов, на помощь приходит продвинутый редактор Zero Block. В нём можно нарисовать с нуля любую секцию сайта. Функциональные возможности Tilda расширяются с помощью интеграций с другими сервисами. Поддерживается также вставка стороннего кода HTML/CSS/JavaScript.

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

1. Доставка домашней еды

Доставка домашней еды

Одностраничник для заказа домашней еды. При его разработке в основном использовали стандартные блоки Tilda, поэтому конструктор очень легко узнать — в некоторых местах проглядывает шаблонность дизайна. Свёрстано всё аккуратно, но без особой выдумки — редактор Тильды позволяет добиться куда более впечатляющего результата.

Очень не хватает фотографий. Есть только одна стандартная галерея, в которой даже не подписаны фото. Даже стандартными средствами Тильды можно было накидать фотографий в самом разном виде: галереи, слайдеры, изображение на всю ширину экрана и т.д. Есть и проблемы с интерфейсом: битые ссылки в меню и повтор элементов управления на первом же экране.

Назвать этот одностраничник интернет-магазином сложно. Но на нём установлены блоки с карточками товаров и корзиной. При нажатии на кнопку «Заказать» набор отправляется в корзину. Одновременно появляется форма оформления покупки. В ней можно изменить количество товаров и выбрать способ оплаты — кредитной картой через Тинькофф или Яндекс.

Общее впечатление: видно, что на разработку одностраничника потратили время, но он всё равно выглядит недоделанным. Битые ссылки, повторы элементов навигации, проблемы с фоном и адаптивностью меню — всё это можно исправить в редакторе Tilda за час. К функциональности интернет-магазина вопросов нет — это стандартный блок конструктора, который работает по умолчанию.

2. Магазин мебели и товаров для дома

Магазин мебели и товаров для дома

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

На главной странице — слайдер с примерами товара. На каждый слайд можно добавить ссылку, которая будет вести в каталог. Ниже — список разделов для быстрой навигации. Дальше идёт секция с распродажей, недорогими диванами, товаром недели. Следующая секция показывает часть товаров каталога. Здесь доступна фильтрация по цене, материалу, цвету, размеру, обивке. Можно также отсортировать товары по возрастанию, убыванию, названию, дате добавления в каталог.

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

Адаптивности нет. При разработке явно использовался редактор Zero Block, в котором отрисовывали все блоки. Но сделать их адаптивными забыли — или просто не стали. Макет подходит только для десктопа. На мобильном устройстве шрифты и элементы интерфейса слишком мелкие.

Общее впечатление: на первый взгляд сайт выглядит отлично. Но когда начинаешь изучать его внимательно, складывается ощущение, что это прототип, а не готовый продукт. Дизайн неадаптивный, на смартфоне пользоваться сайтом невозможно. В меню даже не битые ссылки, а просто текстовые фрагменты без адресов. Карточки товаров не заполнены, интернет-магазин до конца не настроен. При этом сайт находится в общем доступе и индексируется поисковыми роботами.

3. Ремонт квартир

Ремонт квартир

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

Магазинная функциональность представлена карточками отдельных товаров, при нажатии на которых всплывает окно с подробностями. При желании можно прикрутить к карточке кнопку «Купить», добавить корзину и страницу оформления заказа.

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

Общее впечатление: при разработке этого магазина на Tilda использовали в основном стандартные блоки. Из-за этого есть ощущение шаблонности дизайна. Зато нет проблем с адаптивностью страниц. Видно некоторые недоделки — например, адреса страниц оставлены по умолчанию, хотя в настройках можно указать любой URL. Среди явных плюсов — калькулятор ремонта. Но как таковой магазинной функциональности на сайте нет.

4. Центр дизайна и архитектуры

Центр дизайна и архитектуры

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

Видно, что работу над сайтом не закончили. Раздел с проектами находится в разработке. В карточках с новостями размещён шаблонный текст. Это вообще странное решение — публиковать сообщения в таком виде. Для новостей есть стандартный блок «Потоки», который выводит ленту сообщений.

Магазинная функциональность реализована на странице с каталогом. Здесь размещены примеры дизайна, которые предлагает компания. При нажатии на карточку всплывает окно с дополнительными фотографиями и подробным описанием. Клиент может выбрать материал отделки и указать количество метров. Цена автоматически пересчитывается в зависимости от заданных параметров.

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

5. Английская мужская обувь

Английская мужская обувь

Сайт российского представительства компании Sanders, которая занимается производством мужской обуви. На главной странице — простая галерея с фотографиями продукции, а также карточки-ссылки на каталог и шоу-рум. Это стандартные блоки Tilda, которые незначительно кастомизированы.

Магазинная функциональность реализована на отдельной странице. В каталоге не очень много товаров, поэтому нет фильтрации и сортировки. При необходимости эти возможности добавляются стандартными инструментами Tilda. При наведении курсора на карточку товара меняется фотография. Чтобы посмотреть другие изображения, прочитать подробное описание и добавить товар в корзину, нужно открыть страницу товара. Для этого используется кнопка «Подробнее».

Страница товара открывается во всплывающем окне. Здесь можно выбрать только размер обуви. Но магазинная функциональность Tilda позволяет добавлять и другие параметры, просто на этом сайте в них нет необходимости. После добавления товара в корзину появляется стандартная форма оформления заказа. В ней нужно указать ФИО, e-mail и телефон для связи.

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

Выводы

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

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

С точки зрения адаптивности у стандартных блоков Tilda проблем нет. Но если вы будете использовать при разработке сайта Zero Block, то за этим параметром нужно внимательно следить. Созданные с нуля блоки нужно адаптировать под разные экраны самостоятельно.

» Примеры сайтов » Примеры интернет-магазинов созданных на Tilda