Кейс: кастомизация интернет-магазина на Tilda с помощью кода и готовых интеграций
Интернет-магазин корейской косметики на Tilda с использованием нестандартных элементов. Сказать прямо — от стандартных решений Tilda практически ничего не осталось.
Ссылка на сайт alisha-shopper.ru. Инстаграм-аккаунт агентства «Тридцать один».
Мы реализовали: интеграцию виджетов для получения, учета и отображения отзывов, возможность делиться товарами в мессенджерах, множество кастомных блоков, а также интеграцию с интернет-эквайрингом, Мой Склад, СДЭК и Boxberry.
PS для удобства разработчиков Тильды, мы прикрепили все ссылки на кастомизации, где можно взять код. Это наша благодарность командам, которые разрабатывают кастомизации и делятся ими open source.
Подробнее о кастомизациях
Сайт сделан преимущественно в Zero Block и с помощью кода: это готовые кастомизации или же самостоятельно написанные правки через СSS или JS .
- Отказываемся от стандартного дизайна поиска, корзины и избранного на Тильда. Эти функции по задумке были реализованы в шапке сайта. Нам удалось это сделать с помощью кастомизаций команды Mo-ti и Anku.
- Для каталога мы использовали стандартный блок бокового меню ME901, который тоже был изменен с помощью кода. Мы сделали открытие по кнопке и добавили пункты 3 уровня.
- Также код нам помог сделать разные классы дизайна меню для десктопной и мобильной версий.
- Из товаров необходимо было сделать слайдер. Стандартный функционал Тильда не имеет таких возможностей, поэтому эту идею мы реализовали с помощью кода от Mo-ti.
- В карточках товара мы решили добавить шапку и с помощью кода мы смогли сделать кнопку “назад”, которая возвращает пользователя именно в то место, с которого он перешел на карточку.
- Помимо кода кастомизировать сайт нам помогли виджеты. С ними мы смогли сделать кнопки “Поделиться”.
- И функцию отзывов от CloudComments на товарных страницах.
- С помощью дополнительного CSS мы смогли сделать микровзаимодействия с пользователем: нам удалось настроить ховеры (эффект наведения) на кнопках и ссылках, сделать тени для карточек товаров.
- Также благодаря модификациям с Тильдошной мы сделали фиксацию фото при скролле на товарных страницах.
- Нам даже удалось немного видоизменить корзину: благодаря этой инструкции и знаниям CSS мы добавили кнопку “Продолжить покупки” и увеличили шрифт, чтобы он был более читаемым на мобильной версии (частый "грех" мобильной версии на многих стандартных блоках в Тильде).
Вместо послесловия
Удалось ли нам сделать удобный и функциональный сайт?
Первые посетители и заказы уже есть, начался этап сбора обратной связи от клиентов, аналитики. Подключенные вебвизор, карта кликов, скролла — все это поможет нам получить данные для улучшения и развития сайта.
Страницы по ссылкам в шапке пустые (ничего не найдено), кнопки карточек товаров "добавить в корзину" на странице "отзывы" не отрабатывают добавление (непонятно, добавился товар или нет).
Чопопало, короче
К комментам выше присоединяюсь. Смысл говорить это на тильде? Сайт простой, все карусели, корзины и т. д. делаются быстро с помощью различных библиотек.
Ну а про "кастомное добавление кнопки" это вообще смех: "мама, я в носу поковырялся!" – "молодец, сынок!" ))
Спасибо за найденный баг, поправим 👋
Что касается "Смысл говорить это на тильде? Сайт простой, все карусели, корзины и т. д. делаются быстро с помощью различных библиотек." - вот здесь не согласен.
Для клиентских сайтов крайне важна не простота создания, а простота использования. И удобство, которое дает Тильда для работы компании сейчас максимальные из всех возможных систем. Пара моментов:
1. Очень большое количество готовых бесплатных интеграций: СДЭК, онлайн-эквайринг, СRM, товарный фид, Мой Склад, 1С, Unisender и тд
2. Гигантское количество внешних кастомизаций (платных, бесплатных)
3. Большое количество недорогих специалистов (дизайнеров, разработчиков)
4. Удобная система работы с товарами
5. Визуальный интерфейс правки контента (как в стандартных блоках, так и в зеро)
Webasyst не рассматривали?