Shopify demo-магазин

Global Cart: кастомная Shopify-тема в стиле Bellroy/Brooklinen и живой демо-каталог

Кастомная Liquid-тема на базе Dawn, переверстанная в минималистичный DTC-стиль Bellroy и Brooklinen, с живым каталогом из 3 коллекций и 10 товаров и отдельным Shopify-приложением на Remix для уведомлений о заказах в Telegram.

DemoShopify demo-магазин
  • Shopify
  • Liquid
  • Remix
Открыть Global Cart ↗

Проблема

Экспортно-ориентированные продавцы и заказчики, уже видевшие конкурентные Shopify-предложения на OLX и Upwork, задают конкретные вопросы: умеет ли разработчик кастомизировать Liquid-тему, а не только менять готовую тему через конструктор, и может ли он написать отдельное Shopify-приложение под нестандартную логику вроде уведомлений о заказах.

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

Кастомная тема в стиле Bellroy и Brooklinen

За основу взята Dawn — эталонная тема Shopify для Online Store 2.0 — и переверстана в минималистичный стиль экспортных DTC-брендов: тёплая палитра off-white/near-black, острые углы вместо теней и пилюль-бейджей, прописные трекинг-лейблы и воздушные отступы между секциями. Стилевой слой сделан аддитивным CSS-файлом поверх base.css, поэтому вся гибкость Dawn — цвета, радиусы, шрифты через Theme Customizer — осталась нетронутой.

Добавлены кастомные Liquid-секции, которых нет в базовой Dawn: блок преимуществ «Why buy from us» с иконками и текстом по блокам, и блок отзывов, который читает рейтинг и тексты из product-метафилда на metaobject «review» — без подключения платного приложения отзывов. Главная страница переверстана в последовательность hero → категории → бестселлеры → editorial-блок → преимущества → отзыв-цитата → подписка, с настоящими фотографиями (кожаная сумка, флэтлей аксессуаров, упакованный чемодан) вместо стоковых Dawn-иллюстраций — фото загружены в Shopify Files через Admin API и подключены как обычные редактируемые изображения темы.

Живая витрина: 3 коллекции, 10 товаров, рабочая карточка

Под тему создан реальный каталог, а не заглушки: 3 коллекции (Bags & Backpacks, Accessories, Travel Essentials) и 10 демо-товаров с ценами, описаниями и настоящими фото — от кожаного дафл-бэга до дорожного тревел-органайзера, всё созданное и опубликованное напрямую через Shopify Admin API.

Карточка товара кастомизирована под формат экспортного магазина: под ценой добавлена строка «Ships worldwide · USD», сама страница товара собрана с sticky-панелью информации, крупной галереей и связанными товарами — полностью рабочий путь от каталога до Add to cart.

Каталог с фильтрами и Telegram-уведомления о заказах

Страница коллекции использует стандартный Search & Discovery Dawn — сортировку и фильтры по наличию и цене — поверх кастомной сетки в 3 колонки с воздушными отступами, чтобы визуально она не отличалась от остальной темы.

Отдельно от темы собрано Shopify-приложение на Node.js/Remix — вариант A из технического задания: оно слушает вебхук orders/create через Shopify Admin API и отправляет уведомление о новом заказе в Telegram через Bot API, что ближе к реальным запросам локальных заказчиков, чем стандартные email-уведомления Shopify.

Результат

Тема опубликована как live-тема dev-стора globalcart-demo.myshopify.com — заказчик открывает ссылку, вводит пароль дев-стора (стандартное ограничение Shopify для Partner Development Store, снимается только переводом на платный план) и проходит весь путь: каталог → карточка товара → корзина → чекаут — на реальных данных, а не на статичных скринах.

Демо показывает три навыка одновременно: кастомизацию Liquid-темы за пределами конструктора, работу с Shopify Admin API для наполнения каталога и отдельное Shopify-приложение на Remix — именно то сочетание, которое ищут заказчики Shopify-разработки на экспортный рынок.

Другие кейсы

Flex Convert: конвертер валют и инженерных величин как отдельный продукт

Flex Convert: конвертер валют и инженерных величин как отдельный продукт

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