Интернет-магазин корейской косметики на Tilda с использованием нестандартных элементов. Сказать прямо — от стандартных решений Tilda практически ничего не осталось.
Ссылка на сайт alisha-shopper.ru. Инстаграм-аккаунт агентства «Тридцать один».
Мы реализовали: интеграцию виджетов для получения, учета и отображения отзывов, возможность делиться товарами в мессенджерах, множество кастомных блоков, а также интеграцию с интернет-эквайрингом, Мой Склад, СДЭК и Boxberry.
PS для удобства разработчиков Тильды, мы прикрепили все ссылки на кастомизации, где можно взять код. Это наша благодарность командам, которые разрабатывают кастомизации и делятся ими open source.
Подробнее о кастомизациях
Сайт сделан преимущественно в Zero Block и с помощью кода: это готовые кастомизации или же самостоятельно написанные правки через СSS или JS .
- Отказываемся от стандартного дизайна поиска, корзины и избранного на Тильда. Эти функции по задумке были реализованы в шапке сайта. Нам удалось это сделать с помощью кастомизаций команды Mo-ti и Anku.
- Для каталога мы использовали стандартный блок бокового меню ME901, который тоже был изменен с помощью кода. Мы сделали открытие по кнопке и добавили пункты 3 уровня.
- Также код нам помог сделать разные классы дизайна меню для десктопной и мобильной версий.
- Из товаров необходимо было сделать слайдер. Стандартный функционал Тильда не имеет таких возможностей, поэтому эту идею мы реализовали с помощью кода от Mo-ti.
- В карточках товара мы решили добавить шапку и с помощью кода мы смогли сделать кнопку “назад”, которая возвращает пользователя именно в то место, с которого он перешел на карточку.
- Помимо кода кастомизировать сайт нам помогли виджеты. С ними мы смогли сделать кнопки “Поделиться”.
- И функцию отзывов от CloudComments на товарных страницах.
- С помощью дополнительного CSS мы смогли сделать микровзаимодействия с пользователем: нам удалось настроить ховеры (эффект наведения) на кнопках и ссылках, сделать тени для карточек товаров.
- Также благодаря модификациям с Тильдошной мы сделали фиксацию фото при скролле на товарных страницах.
- Нам даже удалось немного видоизменить корзину: благодаря этой инструкции и знаниям CSS мы добавили кнопку “Продолжить покупки” и увеличили шрифт, чтобы он был более читаемым на мобильной версии (частый "грех" мобильной версии на многих стандартных блоках в Тильде).
Вместо послесловия
Удалось ли нам сделать удобный и функциональный сайт?
Первые посетители и заказы уже есть, начался этап сбора обратной связи от клиентов, аналитики. Подключенные вебвизор, карта кликов, скролла — все это поможет нам получить данные для улучшения и развития сайта.
А в чем смысл затраченных усилий? Не проще взять нормальный фреймворк и решать на нем задачи спокойно и штатно без уличной магии?
Любой живой магазин это далеко не только разовая акция по его созданию, а постоянное развитие функционала.
Кто потом это будет поддерживать?
А если поменяется компания-подрядчик или просто маг из её команды уйдёт?
Нормальный фреймворк это что? На минуточку весь нормальный Еком сегодня не разворачивает никаких фреймворков, а использует Shopify. На рынке СНГ идеального решения нет, Тильда - самый бюджетный и перспективный, хоть пока и сырой. Битрикс и Insales - уже вряд ли что то спасет. Про древние движки типа Opencart и даже WooCommerce молчу, это прошлый век.
Вместо того, чтобы взять норм CMS и сделать не парясь нормальный сайт)
Это как купить жигуль и менять в нем все, чтобы получился мерседес.
Подскажите, какие? А то выше пишут "Битрикс и Insales - уже вряд ли что то спасет. Про древние движки типа Opencart и даже WooCommerce молчу, это прошлый век."
по моему и этот сайт нормальный
Только к сожалению все равно мерседеса из этого не получится
Страницы по ссылкам в шапке пустые (ничего не найдено), кнопки карточек товаров "добавить в корзину" на странице "отзывы" не отрабатывают добавление (непонятно, добавился товар или нет).
Чопопало, короче
К комментам выше присоединяюсь. Смысл говорить это на тильде? Сайт простой, все карусели, корзины и т. д. делаются быстро с помощью различных библиотек.
Ну а про "кастомное добавление кнопки" это вообще смех: "мама, я в носу поковырялся!" – "молодец, сынок!" ))
Спасибо за найденный баг, поправим 👋
Что касается "Смысл говорить это на тильде? Сайт простой, все карусели, корзины и т. д. делаются быстро с помощью различных библиотек." - вот здесь не согласен.
Для клиентских сайтов крайне важна не простота создания, а простота использования. И удобство, которое дает Тильда для работы компании сейчас максимальные из всех возможных систем. Пара моментов:
1. Очень большое количество готовых бесплатных интеграций: СДЭК, онлайн-эквайринг, СRM, товарный фид, Мой Склад, 1С, Unisender и тд
2. Гигантское количество внешних кастомизаций (платных, бесплатных)
3. Большое количество недорогих специалистов (дизайнеров, разработчиков)
4. Удобная система работы с товарами
5. Визуальный интерфейс правки контента (как в стандартных блоках, так и в зеро)
Комментарий недоступен
Ага, учитывая «Сказать прямо — от стандартных решений Tilda практически ничего не осталось»
Наглядный пример того - что сайт на Тильде всегда будет выглядеть, как кривой шаблон, даже после затрат на его перепиливание
Соболезнования клиенту)))
out of pure curiosity — давно не открывал это г-но — там уже сделали в зеро блоках чтобы блоки автоматически подстраивались под контент и шли друг за другом, или так и надо как раньше при любом изменении текста все блоки следующие за ним руками передвигать, и потом еще проверять что респонсив не поехал?
Просто ахреневаю от комментов. Ребята сделали решение которое отвечало их задачам, сделали хорошо и показали это.
Но нет, вылазят разные челы, которые сами ничего кроме слов и диванной экспертизы не демонстрируют, но давай им топ 3 на тильде.
Сайт выглядит действительно неплохо, но зачем делать костыль непонятно.
Действительно сочувствую будущим аналитикам, дизам или разрабам, ведь уйдёт этот подряд и следующие ребята ахуеют.
Я не понимаю в чем проблема использовать Shopify
А здесь ведь не веб-сервис, а ваша описанная команда как-будто бы из чего-то большого. Здесь MVP и попытка начать работать с Ecomm. Первая проба.
Конечно, по-уму, это когда документация, CI/CD, хорошие технологии, проверка оптимальности кода и прочее. Но здесь другая просто стадия сайта и проекта.
Хорошая работа! Спасибо за ссылки с кодом, добавил в закладки.
Первое, что бросилось в глаза: Что так криво-то?
Элементы на английском
ну вообще сайт выглядит хорошо
Мне тильда нравится. Но есть несколько НО:
1) самое главное - почему все скриншоты у самой Тильды и автора статьи с компов, а не с телефона? Думаю, 80-90% трафика идёт на мобильных.
2) верстка в паре мест внизу "поехала"
А справедливости ради - половина скринов в статье специально и мобилки делали. Да, моб. трафик важнее сейчас 👍
Но для наглядности запись экрана и десктопа тоже делали, потому что поддерживать нужно обе версии.
Комментарий недоступен
Комментарий недоступен
Грязный код. Сайт выглядит аля из 2010 года. Оптимизацией не пахнет, выполнено сео на натянутую 3-ку. Я бы поставил 2. Код не оптимизирован. Заторможенная прогрузка сайта из-за скриптов от tilda — что-то догружается, что-то появляется с задержкой. Контент местами есть, местами тютю. Как сказал бы Артёмий Лебедев — сайт говно! Я согласен.
А по кастомизациям и их применению что скажете?
По теме кейса?
Комментарий недоступен
Удачи в поисковой оптимизации этого магазина :)
Очень круто всё реализовано, многие в комментах совершенно не понимают преимуществ Тильды над всякими фреймворками и другой чепухой, элементарно сравните бюджеты и время разработки.
И вопрос к автору, подскажите пожалуйста как вы реализовали нижний блок меню с корзиной поиском и избранным для мобильной версии? может есть ссылка на эту кастомизацию?
Добрый день. Нижнее меню на мобильном телефоне закреплено с помощью кода:
#rec500644416 (тут номер блока) {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 9998 !important;
}
Корзина, поиск и избранное реализованы с помощью кодов, указанных в самом начале https://mo-ti.ru/zerocart и https://anku.im/blog/search-on-tilda-in-popup
Добрый день! Сайт выглядит свежо! Подскажите, пожалуйста, как была реализована кнопка "назад" в карточке товара? Каким кодом или модификацией воспользовались?
Здравствуйте, спасибо! Переход реализован с помощью zero-блока, в нем значок стрелки "назад" и слово "назад", на этих двух элементах стоит линк "#back". Далее блок 123 с кодом:
$('a[href="#back"]').click(function() {
history.back();
return false;
})
Здравствуйте, очень круто! Делаете ли вы кастомные элементы для creatium.io? Хотел бы себе пару штук
Нажал кнопку "избранное" и тут такая страница.
Спасибо! Увидели баг. По иконке клик нормально отрабатывает, а вот по текстовке Избранное под ней с багом 👍
Комментарий недоступен
Добрый день!
На мой взгляд очень удобный сайт с точки зрения покупателя))
Подскажите, пожалуйста, как реализована кнопка быстрой покупки - «Добавить в корзину» прямо из разделов каталога, не заходя в карточку товара?
от слова "пример" у автора понос случится?
Реальный случай, так-то ;)
Комментарий недоступен