Адаптация шаблона TemplateMonster под Shopify

Задача

Магазин украшений ANTIC пришёл с готовым решением в голове: на TemplateMonster нашёлся HTML-шаблон, дизайн которого клиенту нравился, и хотелось получить ровно такой же интернет-магазин на Shopify. Загвоздка в том, что шаблоны с TemplateMonster — это статичная связка HTML, CSS и JavaScript. Красивые страницы там уже есть, но за ними нет ни каталога, ни корзины, ни оформления заказа. Для ювелирного магазина картинка важна вдвойне: украшение продаёт крупное детальное фото, поэтому терять внешний вид шаблона было нельзя, а вот превратить его в рабочую платформу — обязательно.

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

Что сделали

HTML-шаблон нельзя просто загрузить в Shopify и включить — платформа ждёт свою структуру темы: layout, templates, sections и snippets, а данные подтягиваются через объекты Liquid. Поэтому мы разбирали исходную вёрстку по кусочкам и собирали её заново уже по правилам Shopify. Статичные карточки товара из шаблона превращались в циклы по объектам product и collection, хардкод-цены и картинки — в динамические поля, а разметка меню и футера переезжала в редактируемые секции, чтобы контент-менеджер ANTIC мог править витрину без программиста. Каталог украшений мы переносили так, чтобы крупные фотографии сохраняли исходное качество и правильно раскладывались в сетке.

• Переписали HTML на Liquid (язык шаблонов Shopify)
• Настроили логику корзины и чекаута
• Адаптировали блоки под мобильные устройства
• Импортировали товары

Отдельно занялись мобильной версией. Шаблоны с TemplateMonster обычно адаптивны на бумаге, но после переезда в Liquid и появления живого каталога поведение блоков меняется: где-то ломается сетка карточек, где-то съезжает шапка или фильтры. Мы прошли по ключевым экранам — главная, каталог, карточка украшения, корзина — и довели их до аккуратного вида на смартфонах, потому что для ювелирного магазина мобильный трафик критичен.

Мультиязычность

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

Вариант 1: Приложение (Langify)

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

• Переводы хранятся в приложении
• Проще и дешевле в настройке
• Одна подписка Shopify

Вариант 2: Мульти-стор

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

• 4 отдельных магазина (ru.site.com, en.site.com и т.д.)
• Полный контроль над каждой версией
• Сложнее управлять остатками
• 4 подписки Shopify

Результат

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

• Адаптированный дизайн с TemplateMonster под Shopify
• Верстка темы с нуля на Liquid
• Мультиязычность на 4 языках
• Импортированные товары
• Готовая база для перевода контента