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

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

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

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

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

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

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

Для каталога мы использовали стандартный блок бокового меню ME901, который тоже был изменен с помощью кода. Мы сделали открытие по кнопке и добавили пункты 3 уровня.

Также код нам помог сделать разные классы дизайна меню для десктопной и мобильной версий.

Из товаров необходимо было сделать слайдер. Стандартный функционал Тильда не имеет таких возможностей, поэтому эту идею мы реализовали с помощью кода от Mo-ti.

В карточках товара мы решили добавить шапку и с помощью кода мы смогли сделать кнопку “назад”, которая возвращает пользователя именно в то место, с которого он перешел на карточку.

Помимо кода кастомизировать сайт нам помогли виджеты. С ними мы смогли сделать кнопки “Поделиться”.

И функцию отзывов от CloudComments на товарных страницах.

С помощью дополнительного CSS мы смогли сделать микровзаимодействия с пользователем: нам удалось настроить ховеры (эффект наведения) на кнопках и ссылках, сделать тени для карточек товаров.

Также благодаря модификациям с Тильдошной мы сделали фиксацию фото при скролле на товарных страницах.

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

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

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

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

73 комментария

Иван Петров

02.01.2023

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

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

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

Ответить

Stayfocused

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

Евгений

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

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

(Смешарики живут в Казахстане)

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