Вёрстка интернет-магазина по макету и интеграция в CS-Cart
Верстаем макеты Figma в тему CS-Cart: адаптив, все состояния элементов, настройка блоков в панели управления. Обновления платформы дизайн не стирают. Верстаем и по макетам чужих дизайнеров — Figma, Illustrator, Adobe XD.
Мобильная версия по макетам — от 24 000 ₽ · главная — от 48 000 ₽ · оценка макета — за 1 рабочий день
- СрочноНет пустой корзины, ошибок формы и пагинации
- СрочноМобильный макет только для главной
- ВажноМакет шириной 1440 px, тема рассчитана на 1920 px
- ВажноШрифт без веб-лицензии
- ЖелательноБаннеры не по сетке темы
Сколько стоит вёрстка по макету
Цену фиксируем после разбора макета — поблочно, по готовым экранам.
Листайте таблицу вбок →
| Что верстаем | Цена | Срок |
|---|---|---|
| Мобильная версия по готовым макетам | от 24 000 ₽ | 2–4 недели |
| Карточка товара | от 27 000 ₽ | 1–2 недели |
| Главная страница | от 48 000 ₽ | около 2 недель |
| Витрина и кабинет маркетплейса | от 84 000 ₽ | от 4 недель |
| Магазин целиком по макетам | от 132 000 ₽ | 3–7 недель |
Суммы — по нашим оплаченным проектам, НДС 5 % включён. Цены обновлены в октябре 2026 года. Макета нет? Нарисуем и сверстаем на теме UniTheme2 — от 42 000 ₽, см. дизайн интернет-магазина. Работающий магазин целиком — обновление дизайна (редизайн).
Вёрстка в CS-Cart и вёрстка HTML-страницы
Интеграция дизайна (её ещё называют натяжкой) — перенос макета в шаблоны темы магазина так, чтобы страницами можно было управлять из панели администратора и обновлять платформу без потери вида. HTML-страница с биржи стоит 1–10 тысяч рублей, потому что это один статичный файл. Магазин на CS-Cart устроен иначе.
Шаблоны и блоки
Страница собирается из шаблонов Smarty и блоков темы. Баннеры, меню и товарные блоки потом меняются в панели управления без программиста.
Стили отдельно
Стили пишем на Less в отдельном модуле темы, изменения — в хуках. Обновление CS-Cart и темы их не затирает.
Состояния вне макета
Пустая корзина, ошибки форм, пагинация, личный кабинет, письма покупателю — в макете их обычно нет, а на сайте они нужны.
Сторонние модули
На те же шаблоны опираются модули: фильтры, отзывы, оплата, доставка. Их тоже приводим к новому виду.
Что входит в интеграцию дизайна
Фиксируем заранее, чтобы не было разночтений на приёмке.
Входит
- разбор макета и вопросы дизайнеру до начала вёрстки
- вёрстка страниц в теме магазина — UniTheme2 или своя тема
- адаптив под компьютер, планшет и телефон
- недостающие состояния — дорисовываем и согласуем с вами
- настройка блоков, меню, баннеров и цветов в редакторе темы
- сторонние модули и письма покупателю в новом стиле
- оптимизация картинок, тест в браузерах и на телефонах, перенос на сайт
Нужно от вас
- макет в Figma — или в Illustrator, Adobe XD: переведём в Figma сами (для Stomdevice это заняло 5 часов)
- шрифты с лицензией для сайта и исходники картинок
- доступ к хостингу, чтобы сделать копию магазина
- одного человека, который отвечает на вопросы по макету
Вёрстка и интеграция: наши работы
Макеты, которые мы сверстали и перенесли на сайты клиентов. RUSHEV — вёрстка по макету дизайнера клиента.
Этапы и сроки вёрстки
Сроки — по нашим проектам 2021–2026 годов.
Листайте таблицу вбок →
| Этап | Что происходит | Срок |
|---|---|---|
| Разбор макета | проверяем ширины, состояния, шрифты; задаём вопросы дизайнеру; фиксируем цену | 1–5 дней |
| Вёрстка | страница — от 2 дней до 2,5 недели, главная — около 2 недель, магазин — 3–7 недель | от 2 дней |
| Тест | тест-план, браузеры и телефоны; правим до нуля открытых ошибок | 1–3 недели |
| Перенос на сайт | в согласованное время, со списком ручных настроек | 1–6 дней |
| Гарантия | ошибки вёрстки после запуска исправляем бесплатно | 30 дней |
Маркетплейс СТР: все страницы по макетам сверстали за 22 дня, на тесте прошли 108 тест-кейсов.
Как мы проверяем вёрстку
Сдаём вёрстку с тест-отчётом, а не «посмотрите, всё ли нормально».
Каждую страницу — на трёх ширинах: 1920, 1024 и 390 px.
Chrome, Safari, Firefox и Edge, реальные телефоны и BrowserStack.
Каталог, карточка, корзина, оформление заказа, личный кабинет и письма.
Ошибки исправляем до нуля открытых: на Herbaria нашли и закрыли 85, на CET Group — 82.
Если что-то из макета нельзя сделать на платформе, предлагаем решение и пишем его в отчёт.
После запуска исправляем ошибки вёрстки бесплатно.
Что говорят клиенты
Отзывы о дизайне, вёрстке и тестировании с независимых площадок.
CET Group · Рейтинг Рунета
«Сроки были очень сжатые… очень внимательно отнёсся к ТЗ и всем пожеланиям. Мелкие погрешности были исправлены за считанные минуты». Ноябрь 2024.
Клумба · отзыв клиента
«За несколько месяцев сотрудничества сайт не узнать. Преобразился внешне… Спасибо вашей команде, программистам, дизайнерам». Ноябрь 2025.
Шарм Рус Дистрибьюшн · Рейтинг Рунета
«Перед выдачей клиенту тестируют, как работает, потом выдают готовый и проверенный вариант». Ноябрь 2025.
Вопросы о вёрстке
Отвечаем на то, что спрашивают перед заказом.
Мобильная версия по готовым макетам — от 24 000 ₽, карточка товара — от 27 000 ₽, главная — от 48 000 ₽, магазин целиком — от 132 000 ₽. Точную цену фиксируем после разбора макета.
Одна страница — от 2 дней до 2,5 недели, главная — около 2 недель, магазин — 3–7 недель плюс тест.
Да. Верстали макеты дизайнеров клиента для RUSHEV, Balad Al Khair и Stomdevice. Отклонения от макета согласуем и записываем в отчёт.
Лучше Figma. Макеты из Illustrator или Adobe XD переведём в Figma сами.
Недостающие экраны и состояния дорисуем в стиле макета и согласуем с вами до вёрстки.
Чаще всего на UniTheme2: штатные страницы темы не нужно верстать заново. Свою тему без готовой тоже делаем — как для LED Outfitters.
Сохранится: стили лежат в отдельном модуле темы, изменения — в хуках и шаблонах темы, ядро CS-Cart мы не правим.
В CS-Cart верстаются шаблоны, блоки, состояния и письма, которые потом настраивают в панели управления, и всё это переживает обновления платформы. HTML-страница — один статичный файл.
По тест-плану: три ширины экрана, четыре браузера, телефоны, оформление заказа. Правим до нуля открытых ошибок и сдаём тест-отчёт.
Да: 30 дней после запуска исправляем ошибки вёрстки бесплатно.
Пришлите макет — оценим за 1 рабочий день
Ссылка на Figma или файл, адрес магазина и срок, к которому нужно. В ответ — цена, срок и вопросы по макету.
Заказать
вёрстку
Узнайте, что изменить, чтобы получать больше продаж.
