Индивидуальный магазин техники. Перенос на WooCommerce.

Appliances Parts Warehouse продаёт бытовую технику и помогает покупателям подобрать запчасти в Boca Raton, Florida. Здесь покупатель выбирает не просто модель из каталога: у конкретной единицы могут быть свои фотографии, состояние, комплектность и остаток. На сайте нужно показать эти различия и помочь человеку понять, подходит ли техника для его дома.

На старте переноса в проекте уже существовали индивидуальный дизайн и магазин на Shopify. В доступных материалах были собственная Liquid-тема, шаблоны, стили, JavaScript, статический дизайн-превью, товарные данные и реальные фотографии. Затем заказчик решил перейти на WordPress и WooCommerce и разместить магазин на Spaceship.

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

VIQQ Studio перенесла витрину на WooCommerce, адаптировала её к реальным остаткам и отдельно пересобрала путь от выбора товара до оформления заказа. Финальные интеграции почты и оплаты картой оставлены отдельным этапом, зависящим от данных владельца.

Мы начали с файлов проекта, доступных данных и работающего Shopify-превью. Это позволило отделить актуальный каталог от демонстрационных записей, а готовые элементы дизайна от особенностей самой платформы.

В подтверждённом наборе для переноса было 15 реальных товарных позиций и 73 фотографии конкретных единиц. На этом этапе 14 единиц были доступны, одна уже продана. Одинаковые модели с разной комплектностью сохранили отдельные карточки. Например, варианты с пьедесталом не стали автоматически одной и той же позицией с обычной машиной.

Заказы, клиенты и реальные отзывы Shopify не переносились как будто они были доступны: полного экспорта этих данных в проекте не было. Демонстрационные товары позднее сняли с публикации. Примерные отзывы не выдавали за подтверждённые отзывы покупателей магазина.

Сам перенос сначала подготовили локально. Рабочую Shopify-витрину на этом этапе не меняли.

Для WordPress собрали отдельную тему APW. В неё перенесли визуальную структуру, шрифты, контент и изображения существующего магазина. Liquid-шаблоны заменили PHP-шаблонами, а работу с каталогом, остатками, корзиной и заказами передали WooCommerce.

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

При первом переносе обнаружились и обычные для смены CMS проблемы: потерянные классы карточек, лишние вложенные отступы, неоформленные элементы WooCommerce, огромные изображения и сломанная структура сервисных блоков. Автоматическое форматирование WordPress могло разбивать готовую разметку, а редактор удалял часть поисковой формы запчастей. Эти места исправили адресно. Форму поиска вынесли в управляемый shortcode, а готовые блоки адаптировали к способу рендеринга WordPress.

Товарные карточки пересобрали вокруг того, что покупателю нужно увидеть быстро: название, фотографию, цену, наличие и действие. Длинные названия ограничили двумя строками в списке, полное название сохранили на странице товара. Кнопки выровняли по сетке, а центы сделали менее заметными, чем основную цену.

Сравнение с ценой нового товара показывается только там, где есть подтверждённая reference price. Если её нет, магазин не рисует выдуманную скидку. Информация об экономии и наличии не должна создавать лишние строки и растягивать мобильную карточку.

Для доступной единственной единицы используется понятная отметка последнего товара. Проданная техника остаётся доступной по своей ссылке, но визуально приглушена и недоступна для покупки. Контроль количества и защита от повторной продажи остаются на стороне WooCommerce.

Фотографии можно листать в каталоге и внутри товара. Для мобильного сценария отдельно проверили свайпы, вертикальный скролл и случайные нажатия после жеста. В полноэкранном просмотре затемнён фон, доступны переключение и увеличение. Покупатель может рассмотреть именно ту технику, которая продаётся.

Сравнение объединяет доступные характеристики выбранных товаров. Внешний рейтинг модели отделён от отзывов об этой конкретной единице и от отзывов о магазине. Это помогает не подменять доверие красивыми, но неподтверждёнными цифрами.

Для покупки не требуется заранее создавать аккаунт. Покупатель выбирает самовывоз или доставку, оставляет контактные данные и оформляет заказ. В корзине и итоговом блоке видны товары, фотографии, цены и налог. Картинки в заказе ведут обратно на страницу соответствующей техники.

Добавление в корзину работает без перезагрузки товарной страницы. Сама кнопка меняет состояние, поэтому покупатель понимает, что товар уже выбран, и может перейти в корзину. Маленькое уведомление дополняет это состояние, а не заменяет его.

Важный этап доработки был связан с доставкой. Изначально бесплатная доставка проверялась в пределах 30 миль от склада. За пределами зоны оформление останавливалось. После уточнения бизнес-сценария мы изменили этот путь: покупатель может оставить заказ на доставку с последующим расчётом перевозки. Сайт прямо сообщает, что доставка не включена в показанную сумму и что стоимость и перевозчик будут подтверждены отдельно до отправки.

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

Ещё одна практическая деталь: выпадающие подсказки адресов. Обычных атрибутов browser autocomplete оказалось недостаточно. Мы подключили реальный поиск через Photon на данных OpenStreetMap. Выбор варианта заполняет улицу, город, штат и ZIP Code и запускает пересчёт заказа. Если сервис не находит адрес или недоступен, его можно ввести вручную.

В подтверждённой версии работает оплата наличными при получении. Интеграция карт через предоставленный владельцем платёжный gateway остаётся следующим этапом. Иконки способов оплаты не используются как доказательство работающего эквайринга.

После миграции работа продолжилась как отдельная дизайнерская доработка. Мы последовательно привели к общей логике кнопки, hover-состояния, фильтры, сравнение, формы, модальные окна, карточки и футер.

В основе оформления остались светлые нейтральные поверхности, тёмно-синие элементы управления и тёплый акцент. Для логотипа подготовили два набора по 20 направлений. Заказчик выбрал вариант 37, после чего знак адаптировали для шапки, футера, favicon и графики для отправки ссылок. Концепции и часть иллюстраций создавались с AI-инструментами; это не заявляется как ручная отрисовка или юридическая проверка товарного знака.

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

Мобильную версию проверяли отдельно. Уменьшили плотность карточек и фильтров, сделали понятнее меню, сохранили достаточные размеры нажатия, выровняли футер и его контактные данные. Для баннеров подготовили отдельные мобильные изображения, чтобы техника не пропадала за краями узкого экрана.

Визуально насыщенный магазин нельзя ускорить только заменой пары декоративных файлов. Мы отделили оригиналы фотографий для увеличения от небольших изображений для каталога и мобильного экрана.

В одном зафиксированном пакете оптимизации 12 крупных интерфейсных изображений занимали 19 689 320 байт. Их WebP-версии заняли 504 202 байта, примерно на 97,4% меньше для этого конкретного набора. Это уменьшение веса файлов, не замер ускорения всего сайта и не процент роста конверсии.

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

Владельцу нужен не только красивый сайт, но и понятный способ вести магазин. Для этого добавили раздел APW Store с быстрым переходом к товарам, заказам, обращениям и редактированию текста.

В отдельные поля вынесли заголовок и описание главной, вопросы и ответы, полные и мобильные описания услуг. В товарных данных доступны бренд, модель, состояние, вместимость, отделка и подтверждённая цена нового товара. Изменения контента хранятся в WordPress, а не исчезают после очередной выкладки темы.

Формы сайта сохраняют обращения в закрытом разделе админки. Это особенно важно, пока исходящая почта ещё не подключена: обращение не должно бесследно потеряться из-за отсутствующего SMTP.

Передачу дополнили русскоязычной инструкцией на 9 страниц со скриншотами. В ней разобраны товары, фотографии, остатки, заказы, обращения, тексты и базовые SEO-настройки. Экземпляр с доступами является закрытым клиентским документом и не используется как иллюстрация в публичном кейсе.

Тема хранится в отдельном репозитории GitHub. После push настроена автоматическая выкладка на Spaceship. Код темы обновляется отдельно от базы, заказов и загрузок, поэтому обычное обновление интерфейса не переимпортирует каталог и не возвращает проданным товарам старые остатки.

Для поисковой основы настроили понятные короткие адреса, перенаправления со старых путей, canonical, метаданные, robots и автоматически обновляемую sitemap. Страницы корзины, оформления и аккаунта не рассматриваются как страницы для поисковой выдачи. Наличие этих настроек не подменяется обещанием уже полученных позиций в Google.

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

Готовый магазин получил новую платформу без отказа от своей визуальной основы и подготовленного каталога. В результате клиент получил индивидуальную WooCommerce-витрину на своём хостинге, понятный покупательский путь, управление реальными единицами техники, удобную админку и инструкцию для самостоятельной работы.

Подтверждённый результат проекта здесь технический и операционный: магазин опубликован, торговые сценарии с наличной оплатой проверены, контент управляется владельцем, обновления идут через Git. На момент подготовки кейса нет данных, позволяющих честно заявить рост продаж, конверсии, трафика или поисковых позиций.

Почта, платёжная система и вход через Google требуют отдельных владельческих данных и последующей проверки. Их нельзя включать в список уже работающих интеграций. Подключение этих сервисов не меняет объём выполненного переноса и интерфейсной работы, но является отдельной частью запуска.