Дизайн и верстка

Дизайн, верстка и подключение англоязычной версии магазина настольных игр crowdgames.ru на InSales. Адаптивная верстка, Liquid, модули фильтров, упрощенный заказ, мультиязычность — отдельная витрина под англоговорящую аудиторию, а не автоперевод русской темы.

Задача

У магазина настольных игр crowdgames.ru уже была работающая витрина на InSales, но и интерфейс, и весь контент были русскоязычными. Клиенту понадобилась отдельная англоязычная версия — crowdgames.us — чтобы показать каталог англоговорящей аудитории: коллекционерам, покупателям зарубежных изданий, международному рынку настолок. Формулировка была «под ключ»: не просто прогнать тексты через переводчик в существующей теме, а сделать дизайн, верстку и подключение полноценного магазина.

Основная сложность тут не в переводе, а в самой платформе. InSales заточен под русскоязычный рынок, и полноценной мультиязычности из коробки в нём нет — язык интерфейса, шаблоны и структуру каталога приходится разводить руками. Поэтому англоязычную витрину мы собирали как самостоятельный проект: свой дизайн под латиницу, отдельная адаптивная верстка на Liquid и переработанные модули магазина, а не языковой слой поверх русской темы. Так проще держать контроль над каждой надписью и не ловить русские строки там, где их быть не должно.

Что сделали

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

  • Дизайн в трёх разрешениях экрана — макеты десктопа, планшета и мобайла с проработкой раскладки каталога и карточки товара под каждую ширину.
  • Адаптивная верстка на Liquid — шаблоны собирали на родном шаблонизаторе InSales, с медиазапросами вместо отдельной мобильной версии: одна верстка на все устройства.
  • Настройка модуля фильтров — фильтрация каталога настолок по параметрам, чтобы покупатель отсеивал игры по нужным характеристикам, а не листал весь список подряд.
  • Модуль упрощённого заказа — оформление в один шаг, без лишних полей и обязательной регистрации, чтобы сократить путь от карточки товара до оплаты.
  • Расширенное меню (Custom menu) — многоуровневая навигация по разделам каталога вместо стандартного плоского меню InSales.
  • Виджет Instagram — лента магазина прямо на витрине: живой контент и социальное подтверждение без ручного обновления блока.
  • Мультиязычность — весь интерфейс, служебные надписи и элементы витрины переведены на английский, включая те строки, что InSales по умолчанию отдаёт по-русски.

Отдельно про мультиязычность на InSales: привычного «переключателя языка» платформа не даёт, поэтому английские строки зашиваются в шаблоны и настройки магазина напрямую. Любую служебную надпись — от кнопки «в корзину» до текстов на странице оформления заказа — приходится ловить и переводить вручную в Liquid, иначе она вылезет по-русски посреди англоязычной витрины. Именно эта ручная работа и отличает настоящую англоязычную версию от машинного перевода поверх русской темы.

Технологии

Стек — стандартный для кастомной темы InSales, без тяжёлых фреймворков. Разметку и логику вывода держали на Liquid, клиентский интерактив — на jQuery.

  • Liquid — родной шаблонизатор InSales: на нём собрана вся разметка, вывод каталога и карточек, условная логика для англоязычной витрины.
  • jQuery — интерактивные элементы витрины: обработчики фильтров, меню, корзины и прочего клиентского поведения.
  • Слайдеры и попапы — настроены не из коробки, а под макет: баннеры на главной, быстрый просмотр и модальные окна под дизайн магазина.
  • Асинхронная подгрузка изображений — обложки товаров подгружаются по мере прокрутки, чтобы каталог с большим числом картинок не тормозил первую отрисовку страницы.

Результат

Готовая англоязычная версия магазина настольных игр crowdgames.us на InSales, собранная под ключ. Адаптивная верстка на Liquid работает на десктопе, планшете и мобайле; на витрине — фильтры каталога, упрощённый заказ, расширенное меню и виджет Instagram, а интерфейс полностью переведён на английский. Магазин запущен как самостоятельная англоязычная витрина на InSales CMS, а не как перевод поверх русской темы — с отдельным дизайном под латиницу и переведёнными вручную служебными строками.

Технологии

InSales Liquid jQuery Адаптивная верстка Мультиязычность Дизайн E-commerce