Fitsole x SALT AND PEPPER: кастомный e-commerce на Shopify API для египетского ритейлера

SALT AND PEPPER — студия веб-разработки, которая специализируется на технически сложных сайтах с нестандартной анимацией и креативным фронтендом. В этом кейсе рассказываем, как разработали интернет-магазин для Fitsole — египетского sportswear-ритейлера с 8 офлайн-магазинами в Каире и каталогом 1000+ SKU. Реализовали кастомный фронтенд с интеграцией Shopify по API, оптимизировали загрузку для медленного интернета в Египте и запустили временную версию на шаблоне, чтобы клиент не потерял деньги на актуальной коллекции. Проект получил Site of the Day и Developer Award от Awwwards, Winner of the Day от CSSDA и номинацию Ecommerce of the Year на Annual Awwwards 2023.

Дизайн-студия DashDigital из Кейптауна обратилась к нам за разработкой онлайн-магазина для их клиента из Египта. У Fitsole 8 магазинов в Каире. Однако они хотели расширить свою географию на всю страну, а в перспективе и выйти на рынок соседних стран. Для этого им было необходимо начать продавать онлайн. Сайт предпологал уникальный дизайн и больше тысячи позиций товаров в каталоге.

Во время работы над дизайном сайта выяснилось, что у клиента была закуплена большая партия товаров, которую по контракту можно было продавать только онлайн. Проблема заключалась в том, что это была актуальная коллекция – если бы мы ждали запуска, товары сильно потеряли бы в цене. Чтобы решить эту проблему, мы запустили временную версию на шаблоне Shopify. Так клиент смог загрузить все товары, начать пользоваться платформой и продавать с сайта. А у нас появился работающий магазин в Shopify, с которым мы могли интегрироваться впоследствии.

У DashDigital была экспертиза в дизайне сникер-шопов – буквально за год до Fitsole они запустили аналогичный сайт для клиента в Кейптауне. Однако, тот проект был сверстан на шаблонах Liquid Shopify, что значительно осложняло поддержку и развитие проекта. У нас же к этому моменту было запущено четыре проекта с кастомным фронтом и интеграцией с Shopify по API. Учитывая размер проекта и намерение Fitsole поддерживать и развивать сайт после запуска, все сошлись на том, что нужно следовать нашему подходу с разделением фронта и Shopify.

Благодаря этому мы реализовали все UI/UX решения дизайн-команды, сохранили высокую производительность сайта на всех устройствах, и в процессе е-ком логика не пострадала. Даже наоборот – за счет кастомного фронта мы смогли реализовать несколько quality of life фич, которые было невозможно реализовать на Liquid без десятка костылей.

Уже на финишной прямой, на этапе QA, мы столкнулись с проблемами реального мира – интернет в Египте очень медленный. Получилось так, что у всех в мире сайт работает отлично, а у ЦА в Египте – нет. Пришлось шаманить с кэшированием, настройками CDN, оптимизацией картинок и дроблением API запросов. Но в итоге мы смогли заставить сайт нормально работать в большинстве случаев. Правда, в пустыне все еще не очень грузилось. Но тут уже дело явно не в сайте.

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

Помимо этого сайт получил несколько международных наград, включая номинацию на Ecommerce of the Year на Annual Awwwards 2023.