{"id":13851,"url":"\/distributions\/13851\/click?bit=1&hash=cee68209c60c746dc6bfd8466db5d93bb423cad3839f3acb2a2f49576b3e800c","title":"\u041a\u0430\u043a \u043d\u0430\u0445\u043e\u0434\u044f\u0442 \u0442\u0435\u0445, \u043a\u043e\u0433\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"adc3521d-eabb-5dae-a761-d3b3e63d3df0","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

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

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

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

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

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

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

0
67 комментариев
Написать комментарий...
Иван Петров

А в чем смысл затраченных усилий? Не проще взять нормальный фреймворк и решать на нем задачи спокойно и штатно без уличной магии?

Любой живой магазин это далеко не только разовая акция по его созданию, а постоянное развитие функционала.

Кто потом это будет поддерживать?
А если поменяется компания-подрядчик или просто маг из её команды уйдёт?

Ответить
Развернуть ветку
Подходящий хот-дог

Нормальный фреймворк это что? На минуточку весь нормальный Еком сегодня не разворачивает никаких фреймворков, а использует Shopify. На рынке СНГ идеального решения нет, Тильда - самый бюджетный и перспективный, хоть пока и сырой. Битрикс и Insales - уже вряд ли что то спасет. Про древние движки типа Opencart и даже WooCommerce молчу, это прошлый век.

Ответить
Развернуть ветку
14 комментариев
Евгений

Вместо того, чтобы взять норм CMS и сделать не парясь нормальный сайт)

Это как купить жигуль и менять в нем все, чтобы получился мерседес.

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

Подскажите, какие? А то выше пишут "Битрикс и Insales - уже вряд ли что то спасет. Про древние движки типа Opencart и даже WooCommerce молчу, это прошлый век."

Ответить
Развернуть ветку
4 комментария
Ирина Неретина

по моему и этот сайт нормальный

Ответить
Развернуть ветку
Любовь Сотникова

Только к сожалению все равно мерседеса из этого не получится

Ответить
Развернуть ветку
Хороший Человек

Страницы по ссылкам в шапке пустые (ничего не найдено), кнопки карточек товаров "добавить в корзину" на странице "отзывы" не отрабатывают добавление (непонятно, добавился товар или нет).

Чопопало, короче

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

Ну а про "кастомное добавление кнопки" это вообще смех: "мама, я в носу поковырялся!" – "молодец, сынок!" ))

Ответить
Развернуть ветку
Антон Коченевский
Автор

Спасибо за найденный баг, поправим 👋

Что касается "Смысл говорить это на тильде? Сайт простой, все карусели, корзины и т. д. делаются быстро с помощью различных библиотек." - вот здесь не согласен.

Для клиентских сайтов крайне важна не простота создания, а простота использования. И удобство, которое дает Тильда для работы компании сейчас максимальные из всех возможных систем. Пара моментов:
1. Очень большое количество готовых бесплатных интеграций: СДЭК, онлайн-эквайринг, СRM, товарный фид, Мой Склад, 1С, Unisender и тд
2. Гигантское количество внешних кастомизаций (платных, бесплатных)
3. Большое количество недорогих специалистов (дизайнеров, разработчиков)
4. Удобная система работы с товарами
5. Визуальный интерфейс правки контента (как в стандартных блоках, так и в зеро)

Ответить
Развернуть ветку
1 комментарий
Драгоценный чувак

Отличная работа и наглядный пример противникам и критикам Тильды!

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

Ага, учитывая «Сказать прямо — от стандартных решений Tilda практически ничего не осталось»

Ответить
Развернуть ветку
2 комментария
Ivan Kolpakov

Наглядный пример того - что сайт на Тильде всегда будет выглядеть, как кривой шаблон, даже после затрат на его перепиливание

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

Соболезнования клиенту)))
out of pure curiosity — давно не открывал это г-но — там уже сделали в зеро блоках чтобы блоки автоматически подстраивались под контент и шли друг за другом, или так и надо как раньше при любом изменении текста все блоки следующие за ним руками передвигать, и потом еще проверять что респонсив не поехал?

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

Сайт выглядит действительно неплохо, но зачем делать костыль непонятно.

Действительно сочувствую будущим аналитикам, дизам или разрабам, ведь уйдёт этот подряд и следующие ребята ахуеют.
Я не понимаю в чем проблема использовать Shopify

Ответить
Развернуть ветку
Антон Коченевский
Автор

А здесь ведь не веб-сервис, а ваша описанная команда как-будто бы из чего-то большого. Здесь MVP и попытка начать работать с Ecomm. Первая проба.

Конечно, по-уму, это когда документация, CI/CD, хорошие технологии, проверка оптимальности кода и прочее. Но здесь другая просто стадия сайта и проекта.

Ответить
Развернуть ветку
Алексей Крупенко

Хорошая работа! Спасибо за ссылки с кодом, добавил в закладки.

Ответить
Развернуть ветку
Sei D.

Первое, что бросилось в глаза: Что так криво-то?

Ответить
Развернуть ветку
Sei D.

Элементы на английском

Ответить
Развернуть ветку
7 комментариев
Олег Делинков

ну вообще сайт выглядит хорошо

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

Мне тильда нравится. Но есть несколько НО:

1) самое главное - почему все скриншоты у самой Тильды и автора статьи с компов, а не с телефона? Думаю, 80-90% трафика идёт на мобильных.

2) верстка в паре мест внизу "поехала"

Ответить
Развернуть ветку
Антон Коченевский
Автор

А справедливости ради - половина скринов в статье специально и мобилки делали. Да, моб. трафик важнее сейчас 👍

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

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

Есть же drupal

Ответить
Развернуть ветку
Аккаунт заморожен

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

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

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

Ответить
Развернуть ветку
Антон Коченевский
Автор

А по кастомизациям и их применению что скажете?
По теме кейса?

Ответить
Развернуть ветку
3 комментария
Аккаунт заморожен

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

Ответить
Развернуть ветку
3 комментария
Dmitry Supruniuk

Просто ахреневаю от комментов. Ребята сделали решение которое отвечало их задачам, сделали хорошо и показали это.

Но нет, вылазят разные челы, которые сами ничего кроме слов и диванной экспертизы не демонстрируют, но давай им топ 3 на тильде.

Ответить
Развернуть ветку
Артур Малосиев

Удачи в поисковой оптимизации этого магазина :)

Ответить
Развернуть ветку
Салахиддин Сапархан

Здравствуйте, очень круто! Делаете ли вы кастомные элементы для creatium.io? Хотел бы себе пару штук

Ответить
Развернуть ветку
Максим

Нажал кнопку "избранное" и тут такая страница.

Ответить
Развернуть ветку
Антон Коченевский
Автор

Спасибо! Увидели баг. По иконке клик нормально отрабатывает, а вот по текстовке Избранное под ней с багом 👍

Ответить
Развернуть ветку
Аккаунт заморожен

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

Ответить
Развернуть ветку
Егор Т.

от слова "пример" у автора понос случится?

Ответить
Развернуть ветку
Учащийся спрей

Реальный случай, так-то ;)

Ответить
Развернуть ветку
Аккаунт заморожен

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

Ответить
Развернуть ветку
Читать все 67 комментариев
null