MYBB — интернет-магазин на Tilda с кастомным каталогом, нестандартными карточками товаров и быстрым оформлением заказа

О проекте

MYBB — интернет-магазин мужской одежды для высоких мужчин. У бренда очень точное позиционирование: вещи создаются для роста от 187 см, с акцентом на правильные пропорции, длину рукавов и штанин, посадку по фигуре и ощущение собранного, уверенного образа. Уже по самому сайту видно, что здесь продаётся не просто одежда, а решение конкретой проблемы аудитории, которой сложно найти вещи с нормальной длиной и посадкой.

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

Отдельная сила проекта — в нише. На сайте сразу вынесен главный смысл бренда: «больше для тех, кто выше», а в текстах и FAQ подробно раскрывается логика подбора по росту, примерки, возврата и предзаказа. Это делает магазин не просто каталогом, а понятной системой покупки для очень конкретной аудитории.

Что было сделано

Для проекта были выполнены дизайн и перенос на Tilda, а дальше — большая кастомизация ключевых e-commerce-блоков. Были реализованы: собственная верстка карточек товаров с разным отображением на десктопе и на мобильных устройствах; полностью кастомный каталог с сортировкой и выбором категорий; собственное мобильное меню; собственный поиск по сайту; сильно модифицированная корзина; система предзаказов прямо через корзину с оформлением и выбором доставки; система промокодов на первую покупку с контролем и учетом активаций; подключение приема оплаты; доставка; акцент на крупную подачу изображений в формате 9:16; логика быстрого оформления заказа без перегруза.

Какая была задача

В проектах такого типа важно понимать одну вещь: здесь сайт должен не просто «работать», а продавать через подачу. У бренда сильная визуальная составляющая, и именно поэтому стандартные решения для карточек и каталога не подходили. Был нужен интерфейс, в котором фотография вещи не ужимается до маленькой картинки, а становится главным инструментом выбора.

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

И третья задача — быстрый старт. Магазин нужно было не растягивать на месяцы согласований, а запустить в рабочем виде максимально быстро, а потом уже по ходу усиливать, расширять и докручивать функционал.

Этап 1. Индивидуальный дизайн и перенос на Tilda

Основой проекта стал полностью кастомный дизайн и перенос магазина на Tilda.

Здесь важно, что задача не сводилась к обычной адаптации блоков. У бренда очень визуальная подача, и под нее нужно было собрать интерфейс, который не мешает фото, не дробит внимание и не превращает одежду в мелкие карточки. Поэтому дизайн выстраивался вокруг крупных изображений, свободного пространства, сильной типографики и ощущения, что вещь показана почти как editorial-съёмка, а не просто как товар из каталога.

После этого проект был перенесён на Tilda, но не в логике «оставим как есть, лишь бы собрать», а в логике точной кастомизации под нужное поведение магазина.

Этап 2. Своя верстка карточек товара под десктоп и мобильные устройства

Один из самых важных блоков во всём проекте — карточка товара.

Для нее была сделана собственная верстка, причем поведение на компьютере и на мобильном устройстве отличается. На десктопе карточка работает через широкую, визуально насыщенную подачу с крупными изображениями и отдельной информационной зоной. На мобильном — через более быстрый и компактный сценарий, где человек сразу видит фото, размеры, выбор варианта, описание и кнопку действия.

Это очень важное решение, потому что один и тот же товарный интерфейс не может одинаково хорошо работать и на большом экране, и на телефоне. В обычных шаблонных сборках мобильная версия часто просто «сжимается» из десктопа. Здесь логика другая: мобильный опыт проектировался отдельно, чтобы покупка с телефона была не компромиссом, а полноценным и удобным сценарием.

Этап 3. Полностью кастомный каталог товаров

Следующий важный блок — каталог.

Для MYBB был сделан полностью кастомный каталог с сортировкой и выбором категорий. И здесь тоже отдельно учитывалось, что на компьютере и на мобильном интерфейс должен работать по-разному. На десктопе каталог может позволить себе одну плотность информации и один способ навигации, а на мобильном важнее скорость перехода и компактность.

В результате каталог был собран так, чтобы он не выглядел техническим списком товаров. Он работает как часть визуальной подачи бренда, но при этом сохраняет удобство выбора: человек может сортировать ассортимент, выбирать категории и быстро переходить к нужной модели.

Именно это в подобных проектах особенно важно: каталог не должен конфликтовать с эстетикой бренда, но и не должен жертвовать удобством ради картинки.

Этап 4. Упор на большие изображения 9:16

Отдельная особенность проекта — работа с крупными вертикальными изображениями.

Здесь акцент был сделан на формате 9:16, чтобы вещи выглядели максимально наглядно, заметно и эмоционально. Для fashion-проекта это критично. Когда одежда показана мелко или второстепенно, теряется желание рассматривать. Когда фото занимают правильное место в интерфейсе, товар воспринимается сильнее, а покупка становится проще.

Поэтому в MYBB дизайн был выстроен так, чтобы изображения не «мешали интерфейсу», а, наоборот, вели пользователя по сайту. Это хорошо видно и в карточках товара, и в каталоге, и в мобильной версии.

Этап 5. Собственное мобильное меню и собственный поиск

Для проекта были реализованы своё мобильное меню и свой поиск по сайту.

На таких магазинах это не мелкая доработка, а часть основного пользовательского опыта. Человек часто приходит на сайт с телефона, быстро листает, сравнивает, смотрит, открывает категории и возвращается обратно. Если мобильное меню неудобное, а поиск слабый, конверсия начинает теряться ещё до открытия карточки товара.

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

Этап 6. Сильно модифицированная корзина

Корзина в проекте была существенно переработана.

Обычно корзина в типовых решениях — это просто промежуточный экран перед заказом. В MYBB она стала полноценной частью сценария покупки. Здесь нужно было не просто показать состав заказа, а встроить в нее дополнительные действия, параметры оформления и будущие механики роста магазина.

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

Этап 7. Система предзаказов прямо через корзину

Отдельный сильный блок проекта — система предзаказов, которая встроена прямо в корзину.

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

На самом сайте этот сценарий уже поддержан и смыслово: в FAQ отдельно сказано, что при отсутствии нужного размера можно оформить предзаказ прямо на сайте или обратиться в поддержку, после чего клиенту сообщат дату поступления.

Это хороший пример того, как функционал и тексты на сайте работают вместе: техническая механика не висит отдельно, а встроена в общую логику бренда.

Этап 8. Промокоды на первую покупку с учетом активаций

Для проекта была реализована система промокодов, в том числе одноразовый промокод на первую покупку, с контролем и учетом активаций.

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

Для нового магазина это особенно полезно, потому что первая покупка — самая дорогая и самая сложная с точки зрения доверия. И если её можно облегчить аккуратной механикой, это даёт хороший эффект.

Этап 9. Быстрое оформление заказа без лишней перегрузки

Один из главных фокусов проекта — не просто красота, а скорость.

Сайт собирался так, чтобы человек мог максимально быстро пройти путь от просмотра вещи до заказа. Поэтому здесь всё подчинено этому принципу: крупные изображения, визуально чистый каталог, понятные параметры выбора, переработанная корзина, предзаказ внутри сайта, нужные способы оплаты и встроенная логика доставки.

С точки зрения пользователя это выглядит просто. С точки зрения разработки за этим стоит большой объём кастомной работы, потому что именно простота интерфейса чаще всего достигается не стандартными решениями, а точной настройкой каждого этапа.

Этап 10. Прием оплаты и доставка

Для проекта были подключены прием оплаты и доставка. На самом сайте также видно, что магазин поддерживает оплату картой, СБП и Долями от Т-Банка, а блоки доставки, возврата и поддержки вынесены в понятные информационные разделы. Это усиливает доверие к магазину и снимает часть сомнений ещё до оформления.

Отдельно важно, что на сайте подробно объясняется сценарий примерки: можно заказать до трёх вещей одновременно, примерить дома и оставить подходящее. Для ниши MYBB это особенно сильный аргумент, потому что проблема посадки и длины для высоких мужчин всегда острее, чем для обычного fashion-магазина.

Что в итоге получил клиент

В результате проект дал бренду не просто красивый сайт на Tilda, а очень точно собранный интернет-магазин под конкретную аудиторию и конкретный способ покупки.

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

Но главное — клиент получил не «типовой магазин на Тильде», а проект, в котором интерфейс подчинён задаче продавать красиво, быстро и удобно.

Почему такой подход работает

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

Человек не хочет долго разбираться. Он хочет быстро увидеть вещь, понять, подходит ли она ему, выбрать вариант и оформить заказ. Если интерфейс ему помогает — магазин продаёт. Если интерфейс перегружает — даже красивый визуал не спасает.

• Поэтому здесь вся работа была выстроена вокруг трёх вещей:
• дизайн, который усиливает товар;
• каталог, который не мешает выбору;
• и оформление, которое позволяет не потерять клиента на последнем шаге.

Почему со мной удобно работать

В подобных проектах важна не только техника, но и сам процесс.

Когда бизнес запускает интернет-магазин, ему редко нужен исполнитель, который будет перегружать брифами, сложными формулировками и бесконечными уточнениями. Гораздо ценнее, когда можно общаться нормально, по-человечески, быстро принимать решения и двигать проект вперед без лишнего напряжения.

Именно так и строилась работа здесь: быстро запустили основу, а дальше уже по ходу дополняли, правили и расширяли функционал, не ломая сам магазин и не превращая процесс в тяжёлую многомесячную историю.

Отзыв

Мария

«Для меня в этом проекте было очень важно не просто сделать красивый сайт, а быстро запустить работающий интернет-магазин, который уже можно показывать людям и принимать заказы. Благодаря Владимиру и выбору Tilda мы очень легко стартовали уже через 15 дней, а дальше спокойно подправляли, добавляли и расширяли нужный функционал. Этому я безмерно рада.

Отдельно хочу отметить лёгкость общения. Для меня было ценно, что меня не грузили огромными брифами, тучами вопросов и сложной терминологией. Всё обсуждалось на простом человеческом языке, спокойно, понятно и по делу.

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

Спасибо Владимиру за вкус, за включённость, за спокойную работу и за то, что проект можно было быстро запустить, а потом уже постепенно усиливать без лишнего стресса».

Итог

MYBB — это пример интернет-магазина на Tilda, где ставка сделана не на стандартную сборку, а на сильную визуальную подачу, кастомный каталог, разное поведение десктопной и мобильной версии и максимально удобный путь к оформлению заказа.

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

Как со мной связаться

Если вам нужен интернет-магазин на Tilda с кастомным дизайном, продуманным каталогом, доработанной корзиной, предзаказами и дополнительным функционалом под задачи вашего бизнеса, напишите мне.

Telegram: @vbalakin
MAX: +7 987 982-28-42

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