На что способен интернет-магазин на Тильде?

Привет! Это веб-студия Молния. За 700+ наших кейсов мы убедились, что Тильда, как конструктор сайтов — это быстро и эффективно. Особенно, если дело касается интернет-магазина. В статье собрали функционал: от каталога до корзины, который одинаково удобен и для пользователя, и для бизнеса.

В теории интерфейс и возможности Тильды позволяют предпринимателям самостоятельно сделать себе сайт. На практике мы всё-таки советуем довериться дизайнерам, чтобы не получить раскрашенный шаблон вместо интернет-магазина. Но признаём, что управлять конструктором довольно просто. Это огромный плюс для бизнеса, ведь после разработки приходится регулярно обновлять ассортимент и добавлять новый контент на сайт. Давайте подробнее остановимся на инструментах, которые предлагает Тильда для онлайн-магазинов.

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

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

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

Для интернет-магазина экологичной одежды из конопли и льна noplanetb мы разработали структуру многостраничника.

Бренд предлагает 2 коллекции одежды и ряд аксессуаров. Чтобы пользователю было удобно ориентироваться на сайте, мы сделали разделение товаров на одежду и аксессуары. Это группы внутренних страниц, посвящённые каждой категории. Например: футболки, лонгсливы, брюки и т. д. А ещё продублировали все предметы одежды на отдельных страницах коллекций, чтобы донести концепции дизайнеров noplanetb.

Розовая майка относится к категориям: вся одежда, майки и топы, новинки. Помимо этого, она часть коллекции strawberry MOON. Итого: 4 разные страницы. В каталоге мы добавили товар в нужные группы, которые указали в соответствующих блоках с карточками. Поэтому, когда придёт время обновить описание или цену розовой майки, достаточно будет заменить информацию в каталоге, а не подкручивать 4 внутренние страницы. Каждому товару в каталоге присваивается индивидуальная страница, а это даёт наилучшую индексацию в поисковиках.

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

Мы привыкли видеть в интернет-магазинах и на маркетплейсах большие списки карточек, по клику на которые открывается страница или поп-ап с подробностями. Такой интерфейс можно реализовать на Тильде при помощи стандартных блоков. Если вы самостоятельно разрабатываете или дополняете сайт для своего бизнеса, то со стандартным блоком всё можно сделать быстро и без особых навыков. Это шаблон, который нужно просто заполнить в каталоге или «Контенте» конкретного блока. Он автоматически сверстается и адаптируется под все разрешения экранов, в том числе и под мобильную версию.

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

Для кейса Domma мы использовали открытую карточку товара без поп-апа. Это единственный продукт на сайте, поэтому нет необходимости прятать подробности. Здесь используется радиокнопка, заполненная цветом. В Тильде также есть функционал, который добавляет к обычной кнопке опции изображение самого продукта.

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

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

Кейс был сложным, потому что от нас требовалось упаковать 10 языков, 4 школьных предмета и русский для иностранцев в придачу. Помимо этого, у каждого языка или предмета была куча вариаций: абонемент или разовая оплата, онлайн или офлайн, урок 60 или 90 мин и т. д. Чтобы уйти от огромного числа карточек в каталоге, мы разбили всё на 3 типа занятий: индивидуальное, в группе и в мини-группе. Пользователь постепенно выбирает подходящие варианты и узнаёт стоимость своего обучения. После чего добавляет в корзину и оплачивает.

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

У стандартных карточек масса преимуществ, но иногда задача требует максимально уникального подхода. Например, создание промостраницы нового продукта. Для этого можно использовать возможности Zero Block. С нуля проектируется формат и дизайн всех элементов карточки. Располагается кнопка «Купить», которая добавляет товар в корзину, после чего подсчитывается общая стоимость покупки. Цена продукта в таком случае задаётся с помощью специальной ссылки под кнопкой. Это рабочее решение, если на сайте продаётся всего несколько товаров. В остальных случаях удобнее и практичнее будет воспользоваться стандартными карточками, чтобы не тратить много времени на их заполнение и обновление.

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

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

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

Для описания есть несколько форматов. Собственно, сам текст справа. Он может быть бесконечным по объёму, ограничений нет. Но по UX-правилам текст должен быть лаконичным, конечно. Здесь отображаются и характеристики товара, которые задаются в каталоге.

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

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

Стандартный функционал поп-апов предлагает в самом низу страницы карточки с другими товарами. Если пользователь провалился на внутреннюю с подробностями, то есть вероятность, что он не вернётся назад и просто закроет вкладку. Предложение посмотреть другие модели вовлекает в просмотр каталога дальше и повышает шанс продажи. Рекомендации могут создаваться под особые группы товаров или, наоборот, из всего ассортимента.

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

Стандартный функционал Тильды позволяет отмечать сердечком понравившиеся товары и собирать их в категорию «Избранное». Это дополнительная забота об удобстве пользователя на сайте. Понравившиеся товары будут храниться 30 дней.

«Избранное» может отображаться как виджет рядом с корзиной или как иконка в шапке сайта. Сердечко располагается на каждой карточке товара, а также в поп-апе возле кнопки.

Пользователь может прийти на сайт за конкретным продуктом, поэтому стоит продумать поиск по магазину. Есть встроенная строка в карточках товара. Здесь можно найти только те позиции, которые опубликованы в этом блоке. А есть поиск по всему сайту сразу. Это отдельный виджет Тильды, который чаще всего располагается в шапке.

Корзина в Тильде имеет весь необходимый стандартный функционал, а при желании дополняется с помощью различных интеграций. Предлагается 19 форматов полей для ввода самой разной информации: от контактных данных и адреса до загрузки файлов. Можно добавить поле «Промокод», которое по запросу будет делать скидку на покупку. Если у магазина более сложные акции с точки зрения арифметики, то формулу расчёта возможно задать с помощью кода. Например, как в нашем кейсе для Moscow Food Forum, когда размер скидки зависит от количества товаров: при покупке от 3-х билетов — 3%, от 5-ти билетов — 5%.

Корзина интегрируется со множеством онлайн-касс и эквайрингов для оплаты на сайте. Есть уже вшитые настройки с самыми популярными платформами: Robokassa, CloudPayments, ЮKassa, ЮMoney, Сбербанк, Тинькофф, Альфа-Банк и т. д. А в разделе «Универсальная платёжная система» есть перечень других сервисов с шаблонами для подключения. Так можно даже привязать оплату в рассрочку от Долями в интернет-магазине.

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

Интернет-магазин должен быть в равной степени удобным и для покупателя, и для бизнеса. После того как пользователь оформил заказ, запускается множество процессов по сборке, упаковке и отправке. Если поток продаж большой, то в этих делах не навести порядок без специального ПО.

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

Также можно настроить прямую интеграцию интернет-магазина на Тильде с другими CRM: amoCRM, Bitrix24, Мегаплан, Pipedrive и т. д. Или подключить сторонние сервисы для управления ассортиментом каталога и его остатками, например, МойСклад или 1С. Больше про интеграции с подобными системами можно прочесть в статье нашего арт-директора «Какими сервисами можно дополнить сайт на Тильде? 5 популярных ситуаций с решениями».

Огромный маркетплейс на Тильде не сделать, но и конструктор на это никогда не претендовал. Функционал позволяет разработать привычный и удобный интерфейс для покупок. С ним можно быстро запустить интернет-магазин и начать получать продажи. Это хорошее рабочее решение для малого и среднего бизнеса, а также для проверки гипотез.

Больше кейсов можно посмотреть на нашем сайте: flashfamily. ru

Забавные клипы ищите в группе Вконтакте: vk. com/flashfamily

Следите за внутренней кухней и полезностями в тг-канале: t. me/flash_family