RUBBY

Как мы создавали интернет-магазин для бренда T-Skirt

кейсы
Григорий, CEO web-студии Rubby.

СРАЗУ СМОТРЕТЬ САЙТ T-SKIRT

↫ назад к списку проектов

В конце марта 2020 года мне в whatsapp написала Ольга Тимо - основатель из владелец бренда женской одежды T-Skirt.
У Ольги уже был интернет-магазин на WIX, нужно было доработать его мобильную версию. Вот такой список задач она прислала:

Проанализировав текущий сайт я предложил Ольге перенести интернет-магазин на Тильда, и вот почему:
  • WIX очень сильно тормозит сам по себе, используют старый движок. Тильда работает очень быстро.
  • вёрстка WIX рассчитана только на компьютеры с низким расширением и мобильные, возможности создать вёрстку для планшетов нет. А это влияет на SEO продвижение поисковиками. Тильда имеет расширенные настройки для вёрстки на любых устройствах.
  • WIX не имеет прямой интеграции с российскими банками, только с Яндекс.Кассой: комиссия 2,8% с каждой сделки. Тильда имеет интеграции с множеством российских банков: комиссия 1% с каждой сделки. Также есть возможность подключить международные платёжные системы.
  • WIX не имеет интеграции с учетной системой Мой склад и службами доставки СДЭК, Boxberry, Почта России. В Тильда все эти интеграции есть. К слову интернет-магазин T-Skirt на WIX не имел ни одной из этих интеграций. Они были нужны, т.к. бренд имеет три своих оффлайн магазина, необходимо синхронизировать остатки и вести общую базу клиентов.
  • WIX не имеет практически никаких инструментов SEO продвижения. Тильда сегодня имеет один из самых расширенных инструментариев для SEO продвижения.

Договорились о переносе, стоимости, сроках и начали работу.
Интересно с какими сложностями столкнулись и как их решили? Читайте далее :)

Шаг 1: Интеграция с Мой склад



Хочется отметить, что Тильда имеет прямую интеграцию с Мой склад. Она работает как часы, главное всё корректно настроить. Мы являемся сертифицированным партнёром Мой склад, поэтому с этим проблем не возникло.

Однако, в системе интеграции Мой склад есть свои особенности:


1. Мой склад синхронизирует остатки, наименования, артикулы, описание, размеры и модификации, но не синхронизирует изображения товаров. Поэтому после синхронизации пришлось в ручном режиме назначать каждому товару изображения в Тильда. Также назначили каждому добавленному изображению alt-тег для SEO продвижения картинок, супер возможность Тильда.

2. Мой склад ни с одной платформой не синхронизирует скидки. Вот это был настоящий вызов для нас. Объясню. Оффлайн продавцы T-Skirt работают через интерфейс продавца Мой склад. Скидки в Мой склад назначаются следующим образом: заходим в интерфейс скидок → формируем новую скидку → выбираем товары для скидки, размер скидки и период действия → готово. Только при таком назначении скидки видны оффлайн продавцам в интерфейсе продавца Мой склад. При таком подходе «Цена продажи» в карточке товара не меняется, а скидка назначается в момент совершения продажи. Интеграция Мой склад с любыми интернет-магазинами, в части цены, передаёт значения только цен продажи.

После мозгового штурма нашли решение. Создали новый вид цен «Цена ИМ» → через массовое изменение цен сделали «Цена ИМ» равной «Цена продажи». Далее назначили в кодах интеграции «Цена ИМ» в качестве цены продажи в интернет-магазине, а «Цена продажи» в качестве старой цены, которая перечёркивается, чтобы показать разницу новой цены и цены со скидкой.


WOW, всё заработало. Но мы тут же столкнулись с новой проблемой. В интернет-магазине перечёркнутая цена начала выводиться даже в случае, когда она равна цене со скидкой. Получилось в Тильда брелок для ключей стоит 2500 и рядом старая перечёркнутая цена тоже 2500.


Написали в поддержку Тильда, и за 24 часа они исправили эту ошибку системы. Теперь, если цена совпадает, то на сайте отображается только «Цена ИМ». Уважаю поддержку Тильда за оперативность решения тех или иных системных ошибок.
Отлично, синхронизация настроена и работает, что дальше!

Шаг 2: Корзина с новым дизайном и возможностями



Внешний вид
Как реализована корзина в Тильда по-умолчанию мне не нравится. Она имеет плавающую иконку и открывается в pop-up по центру экрана при клике на каждый товар. Это никуда не годится в 2020 году. Посмотрите сами.

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


Как реализована корзина можете посмотреть на сайте интернет-магазина T-Skirt.

Интеграции корзины
Для полноценной работы корзины нужно было интегрировать интернет-магазин с платёжной системой. Сначала была выбрана для интеграции Яндекс.Касса, но мы переубедили заказчика и сделали прямую интеграцию с Альфа Банком. Так заказчик будет платить не 2,8%, а 1% комиссии с каждой сделки.
Связались с банком, запросили боевые настройки и необходимые доступы, произвели все манипуляции - готово.
Добавили в корзину несколько способов оплаты:
  • Банковской картой онлайн
  • Оплата в магазине (только при самовывозе)


Также стояла задача создать интеграцию со СДЭК с автоматическим расчётом стоимости доставки, исходя из веса, объёма товара и удалённости заказчика.

Создали в корзине несколько способов доставки:
  • Самовывоз
  • Доставка T-Skirt (пределы МКАД)
  • Доставка T-Skirt (до 10 км от МКАД)
  • СДЭК по России
  • Доставка в Казахстан и Белоруссию
  • Международная доставка


Получили необходимые конфигурации от СДЭК → выбрали самый подходящий тариф → интегрировали все необходимые коды → протестировали → супер, готово.
Теперь была готова интеграция товаров с Мой склад, создана эстетически красивая корзина с интеграциями Альфа Банка и СДЭК.

Поехали дальше.

Шаг 3: Дизайн интернет-магазина T-Skirt



Главным цветом сайта стал пастельный розовый цвет - код EBD3D4. Основным шрифтом был выбран - Futura PT.
О дизайне и эстетике можно писать много, но лучше самостоятельно оценить его красоту на сайте интернет-магазина T-Skirt.


Из нестандартных задач решили кодом следующие:
1. уменьшили стандартное расстояние между изображениями товаров в мобильной версии. Смотрите было и стало.


2. Кодом изменили надпись «Нет в наличии» на надписи «Скоро в наличии», плюс скорректировали её цвет.

Шаг 4: Интеграция триггерных писем и сервиса рассылок Unisender

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


Далее приступили к более сложному - грамотной настройке сервиса рассылок. Что сделали:
  • верифицировали домен в постмастерах Яндекс, Google и Mail
  • добавили записи DKIM и SPF
  • создали почту noreply@t-skirt.ru для рассылок
  • создали почту для сбора аналитики жалоб fbl@t-skirt.ru, это особое требование почтовых сервисов
  • интегрировали Unisender с Тильда и создали форму подписки на сайте
  • создали письмо с подтверждением клиента о подписке, а также ссылки и причины отписки


Шаг 5: Финальный тест интернет-магазина и интеграций



Ещё несколько дней проверяли работоспособность всех функций. Далее презентация заказчику. Подключение домена. Финал.


Бонус
Создал для вас онлайн-калькулятор стоимости разработки интернет-магазина на Тильда в web-студии Rubby. В нём вы выбираете необходимые интеграции и сразу получаете стоимость разработки.

➝ Онлайн калькулятор


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

Эта статья в Яндекс Дзен.

ПОСМОТРЕТЬ САЙТ T-SKIRT

↫ назад к списку проектов

Made on
Tilda