Интернет-магазин корейской косметики на Tilda с использованием нестандартных элементов. Сказать прямо — от стандартных решений Tilda практически ничего не осталось.
Ссылка на сайт alisha-shopper.ru. Инстаграм-аккаунт агентства «Тридцать один».
Мы реализовали: интеграцию виджетов для получения, учета и отображения отзывов, возможность делиться товарами в мессенджерах, множество кастомных блоков, а также интеграцию с интернет-эквайрингом, Мой Склад, СДЭК и Boxberry.
PS для удобства разработчиков Тильды, мы прикрепили все ссылки на кастомизации, где можно взять код. Это наша благодарность командам, которые разрабатывают кастомизации и делятся ими open source.
Подробнее о кастомизациях
Сайт сделан преимущественно в Zero Block и с помощью кода: это готовые кастомизации или же самостоятельно написанные правки через СSS или JS .
- Отказываемся от стандартного дизайна поиска, корзины и избранного на Тильда. Эти функции по задумке были реализованы в шапке сайта. Нам удалось это сделать с помощью кастомизаций команды Mo-ti и Anku.
- Для каталога мы использовали стандартный блок бокового меню ME901, который тоже был изменен с помощью кода. Мы сделали открытие по кнопке и добавили пункты 3 уровня.
- Также код нам помог сделать разные классы дизайна меню для десктопной и мобильной версий.
- Из товаров необходимо было сделать слайдер. Стандартный функционал Тильда не имеет таких возможностей, поэтому эту идею мы реализовали с помощью кода от Mo-ti.
- В карточках товара мы решили добавить шапку и с помощью кода мы смогли сделать кнопку “назад”, которая возвращает пользователя именно в то место, с которого он перешел на карточку.
- Помимо кода кастомизировать сайт нам помогли виджеты. С ними мы смогли сделать кнопки “Поделиться”.
- И функцию отзывов от CloudComments на товарных страницах.
- С помощью дополнительного CSS мы смогли сделать микровзаимодействия с пользователем: нам удалось настроить ховеры (эффект наведения) на кнопках и ссылках, сделать тени для карточек товаров.
- Также благодаря модификациям с Тильдошной мы сделали фиксацию фото при скролле на товарных страницах.
- Нам даже удалось немного видоизменить корзину: благодаря этой инструкции и знаниям CSS мы добавили кнопку “Продолжить покупки” и увеличили шрифт, чтобы он был более читаемым на мобильной версии (частый "грех" мобильной версии на многих стандартных блоках в Тильде).
Вместо послесловия
Удалось ли нам сделать удобный и функциональный сайт?
Первые посетители и заказы уже есть, начался этап сбора обратной связи от клиентов, аналитики. Подключенные вебвизор, карта кликов, скролла — все это поможет нам получить данные для улучшения и развития сайта.
Грязный код. Сайт выглядит аля из 2010 года. Оптимизацией не пахнет, выполнено сео на натянутую 3-ку. Я бы поставил 2. Код не оптимизирован. Заторможенная прогрузка сайта из-за скриптов от tilda — что-то догружается, что-то появляется с задержкой. Контент местами есть, местами тютю. Как сказал бы Артёмий Лебедев — сайт говно! Я согласен.
А по кастомизациям и их применению что скажете?
По теме кейса?
О какой кастомизации речь идёт речь? Я её не вижу от слова совсем. Вижу костыли. Поставить кнопку написать Whatsapp — это кастомизация и юзабилити для сайта? Боже упаси. В целом, работа — топорная, ни чем не отличается от миллионов бутафорских сайтов, которые после сдачи наполняет заказчик «на свой вкус», как и положено говно сайтам.
Кнопки соц. шеринга - это плагин. Так в кейсе и написано.
Но вот:
- таб-бар в адаптиве
- карусели с товарами
- закрепленный на экране блок фото товара
- скрытое большое меню с удобной вложеностью
- хлебные крошки с работающей навигацией "Назад"
и тд
Это ведь все улучшения UX, которые часто и на целиком самописном сайте не реализовываются. А здесь же на очень бюджетном движке сделаны и работают без сбоев.
Поясните отличие костыля от кастомизации тогда? Реально интересно увидеть примеры.
Какие UX или продуктовые улучшения можно сделать на любом другом движке, которые повлекут за собой улучшение сайт?
«Это ведь все улучшения UX, которые часто и на целиком самописном сайте не реализовываются»
В точности до наоборот, реализовываются и гибкие решения находятся.
«Какие UX или продуктовые улучшения можно сделать на любом другом движке, которые повлекут за собой улучшение сайт?»
Есть замечательное решение — это постоянно смотреть на лучшие интернет-магазины и брать на реализацию тот опыт, который ближе + изучать поведенческий фактор. Создание сайта — это бесконечная война идей и технических нюансов. Подсказать не могу, это как пальцем в небо.
И да, если ты не пришёл просто срубить бабос с клиента и забыть о нём, то думайте о том, как потом собираешься этого самого клиента поддерживать. Любая CMS требует своевременного обновления, а если её порезал на свой вкус и цвет, переписал код в плагине и т.д, то при последующем обновлении, часть «трудов» просто слетит. Через 2-3 года, и вовсе забудешь, что там и как допиливал. А теперь представь что таких клиентов у тебя десятки. сотни.
Мой опыт — это смотреть на свою cms.