{"id":14284,"url":"\/distributions\/14284\/click?bit=1&hash=82a231c769d1e10ea56c30ae286f090fbb4a445600cfa9e05037db7a74b1dda9","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043d\u0446\u044b \u0441 \u0441\u043e\u0431\u0430\u043a\u0430\u043c\u0438","buttonText":"","imageUuid":""}

Кейс: кастомизация интернет-магазина на Tilda с помощью кода и готовых интеграций

Интернет-магазин корейской косметики на Tilda с использованием нестандартных элементов. Сказать прямо — от стандартных решений Tilda практически ничего не осталось.

Ссылка на сайт alisha-shopper.ru. Инстаграм-аккаунт агентства «Тридцать один».

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

PS для удобства разработчиков Тильды, мы прикрепили все ссылки на кастомизации, где можно взять код. Это наша благодарность командам, которые разрабатывают кастомизации и делятся ими open source.

Подробнее о кастомизациях

Сайт сделан преимущественно в Zero Block и с помощью кода: это готовые кастомизации или же самостоятельно написанные правки через СSS или JS .

  • Отказываемся от стандартного дизайна поиска, корзины и избранного на Тильда. Эти функции по задумке были реализованы в шапке сайта. Нам удалось это сделать с помощью кастомизаций команды Mo-ti и Anku.

  • Также код нам помог сделать разные классы дизайна меню для десктопной и мобильной версий.
  • Из товаров необходимо было сделать слайдер. Стандартный функционал Тильда не имеет таких возможностей, поэтому эту идею мы реализовали с помощью кода от Mo-ti.
  • В карточках товара мы решили добавить шапку и с помощью кода мы смогли сделать кнопку “назад”, которая возвращает пользователя именно в то место, с которого он перешел на карточку.
  • Помимо кода кастомизировать сайт нам помогли виджеты. С ними мы смогли сделать кнопки “Поделиться”.
  • И функцию отзывов от CloudComments на товарных страницах.
  • С помощью дополнительного CSS мы смогли сделать микровзаимодействия с пользователем: нам удалось настроить ховеры (эффект наведения) на кнопках и ссылках, сделать тени для карточек товаров.
  • Также благодаря модификациям с Тильдошной мы сделали фиксацию фото при скролле на товарных страницах.
  • Нам даже удалось немного видоизменить корзину: благодаря этой инструкции и знаниям CSS мы добавили кнопку “Продолжить покупки” и увеличили шрифт, чтобы он был более читаемым на мобильной версии (частый "грех" мобильной версии на многих стандартных блоках в Тильде).

Вместо послесловия

Удалось ли нам сделать удобный и функциональный сайт?

Первые посетители и заказы уже есть, начался этап сбора обратной связи от клиентов, аналитики. Подключенные вебвизор, карта кликов, скролла — все это поможет нам получить данные для улучшения и развития сайта.

0
73 комментария
Написать комментарий...
Art

Грязный код. Сайт выглядит аля из 2010 года. Оптимизацией не пахнет, выполнено сео на натянутую 3-ку. Я бы поставил 2. Код не оптимизирован. Заторможенная прогрузка сайта из-за скриптов от tilda — что-то догружается, что-то появляется с задержкой. Контент местами есть, местами тютю. Как сказал бы Артёмий Лебедев — сайт говно! Я согласен.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Art

Уже 14 лет для меня создание сайтов — это больше хобби. Всё что бизнес хочет «дешёвое» пусть сами делают говно сайты на тильде и подобных. Практика доказывает, клиент с обкусанными локтями прибегает обратно. Для кого-то это 1-2 года, для особо темных требуется «наиграться в экспертов» 5 лет и более. Какой сайт, такой и бизнес.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Art

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

Ответить
Развернуть ветку
70 комментариев
Раскрывать всегда