Интернет-магазин для «Зимушки».

Вводные

«Зимушка» — магазин меховых головных уборов из Пятигорска: шапки, береты, платки с мехом и снуды из норки, вязаной норки и песца. Продавец — ИП, отправляет заказы по России и СНГ. К нам пришли за интернет-магазином под ключ: старый сайт на Joomla устарел и не давал владельцу самому вести ассортимент.

Что было на входе:

• 161 товар в 13 разделах: у половины — размеры, многие модели — в нескольких цветах;
• старый сайт с адресами вида /katalog/…html, которые уже знали поисковики и покупатели;
• условия работы, которые нужно показать честно: оплата при получении до 20 000 ₽, бесплатная доставка от 50 000 ₽, размерная сетка, уход за мехом;
• владелец, который будет вести магазин сам — без программиста и без знания WordPress.

Задача: сделать всё с нуля — дизайн, вёрстку, каталог, корзину и оформление заказа, админку под владельца — и запустить на рабочем домене. Срок — две недели.

Как работали

Проект собрали за две недели командой из дизайнера, программиста и верстальщика. Платформа — WordPress 7 + WooCommerce 11, тема написана с нуля под этот магазин, без готовых шаблонов и конструкторов.

Порядок работы:

• разобрали ассортимент: типы изделий, мех, цвета, линейки, размеры — из этого выросла структура каталога и фильтров;
• сделали дизайн-систему и главную, затем каталог, карточку товара, корзину и оформление заказа;
• перенесли 161 товар с 379 фотографиями, страницы и условия доставки и оплаты;
• собрали админку под владельца, редиректы со старых адресов, карту сайта и базовое SEO;
• перенесли сайт на домен клиента, выпустили SSL и открыли поисковикам.

Дизайн: бумага и уголь

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

Из чего собран визуальный язык:

• Три гарнитуры, у каждой своя работа: Oswald капсом — заголовки и вордмарк, Onest — интерфейс и текст, JetBrains Mono — служебный слой: номера секций, крошки, цены и мех в карточках.
• Логотип «ЗИМУШКА» — вектор, снятый из контуров того же Oswald, что стоит в заголовках; иконка сайта — буква «З» из него же.
• Полноширинные блоки от края до края, волосяные линейки вместо панелей с тенями, скругления почти нет.
• Стекло на закреплённой шапке, кнопках поверх фото и панели фильтров.
• Движение: появление блоков, бегущие строки, счётчики и снег на странице — всё выключается при prefers-reduced-motion.

Каталог и карточка товара

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

В карточке товара — лента кадров с просмотром на весь экран и двукратным увеличением, цвета модели, размеры как вариации WooCommerce, «мех крупно», похожие модели и нижняя панель покупки, которая не теряется при прокрутке. Быстрый просмотр открывает карточку прямо из списка.

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

Админка под владельца

Стандартная админка WooCommerce перегружена настройками, в которых легко что-то сломать. Мы сделали отдельную роль «управляющий магазином» и своё меню: заказы со счётчиком новых, товары, главная страница, настройки магазина, страницы, инструкция.

Карточка товара в админке вместо вкладок WooCommerce получила блок «свойства шапки»: размеры, цена, старая цена для скидки, отметки «новинка / хит / акция», тип, мех, цвет, линейка. Несколько размеров автоматически делают товар вариативным, один — простым. В «настройках магазина» владелец правит контакты, мессенджеры, условия доставки и оплаты, почту для заказов и реквизиты — и они подставляются в документы и подвал сами. Главную тоже можно править: фото и тексты первого экрана, плитки разделов, «о нас», галерею.

Перенос, скорость и SEO

Старые адреса не потеряли: 119 адресов прежнего сайта из веб-архива ведут на нужные страницы нового. Карта сайта, robots.txt, заголовки и описания страниц, разметка schema.org для магазина, товаров и хлебных крошек — всё готово к индексации с первого дня.

По скорости: главная открывается за 0,8 с вместо 2,5, каталог — за 1,4 с вместо 3,7. Причиной медленных страниц были запросы к базе на каждый товар — теперь атрибуты и мета читаются одним запросом. Из шаблона убрано всё лишнее WordPress: jQuery, эмодзи, скрипты WooCommerce — тема работает через свои запросы.

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

Результат

За две недели «Зимушка» получила интернет-магазин под ключ на zimavita.ru: 161 товар, 13 разделов, фильтры, корзина с настоящими заказами, админка, в которой владелец ведёт товары, заказы и главную без программиста.

Результат: магазин запущен на рабочем домене с SSL, открыт поисковикам, старые адреса переведены на новые, страницы загружаются в три раза быстрее, чем на первой сборке.