not the same
● E-commerce · США

Supdec Graphix: перенос магазина наклеек на Yii 2 с новым дизайном

Supdec Graphix делает виниловые наклейки и графику для автомобилей и продаёт их покупателям в США. Весь проект – наш: мы обновили дизайн, переписали магазин на Yii 2, сделали удобную админку, сохранили позиции в поиске при переезде.

Клиент
Supdec Graphix, виниловые наклейки для авто
Что сделали
Дизайн, вёрстка, разработка на Yii 2, перенос данных, SEO-миграция
Стек
Yii 2 (advanced), PHP, PayPal, Authorize.Net
Сайт
supdec.com
Проект Supdec Graphix
01 О проекте

У клиента уже был работающий и хорошо проиндексированный магазин, но код и дизайн устарели. Задача – полный рефакторинг: новый современный дизайн, перенос на актуальный PHP-фреймворк, удобная панель администратора, способы оплаты и доставки для заказов в США. Главное условие – не потерять позиции в поиске при переезде.

Что сделали
UX/UI-дизайнАдаптивная вёрсткаРазработка на Yii 2Панель администратораПеренос базы данныхSEO-миграция и 301-редиректыSEO-продвижениеНастройка аналитики
Технологии
Yii 2PHPUI/UXSEOPayPalAuthorize.Net
02 Дизайн

Стиль

Дизайн построен на исходных цветах бренда: градиент от жёлтого к оранжевому в боковом меню, зелёная шапка и крупные фото автомобилей с наклейками. Шрифт Montserrat с широкими заглавными заголовками.

Оранжевый, акценты и кнопки
#FC5825
Жёлтый, начало градиента
#FBC800
Зелёный, шапка и подвал
#A4C46C
Светло-серый фон
#EFEFEF
Серый, текст
#666666
ШрифтыMontserrat
03 Экраны

Главная страница

Слева всегда открыт каталог: блок «Top 5 categories» и полный список категорий по маркам авто. В центре – плитка популярных разделов с фото машин, ниже лента новинок.

Главная
Обратная связь и «Where is my order»
Обратная связь и «Where is my order»
04 Мобильная версия

Мобильная версия

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

Главная
Главная
Каталог
Каталог
Карточка товара
Карточка товара
05 Задача

Задачи

  • 01Обновить дизайнРазработать современный дизайн с учётом исходных цветов бренда и сверстать его адаптивно.
  • 02Перенести код на фреймворкПереписать магазин со старого кода на актуальный PHP-фреймворк Yii 2.
  • 03Сделать удобную админкуДать команде клиента панель для управления контентом, товарами и заказами.
  • 04Подключить оплату и доставкуНастроить способы оплаты и доставки для заказов, которые отправляются в США.
  • 05Сохранить и развивать позиции в поискеПереехать так, чтобы проиндексированный сайт не потерял трафик.
06 Ключевые решения

Ключевые решения

Каталог и фильтры
Решение 01

Каталог и фильтры

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

Карточка и быстрый просмотр
Решение 02

Карточка и быстрый просмотр

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

Решение 03

Корзина и оформление

Корзина с промокодом и короткое оформление заказа: после регистрации поля заполняются автоматически. Оплата через PayPal и Authorize.Net.

Решение 04

Личный кабинет

Превью всех заказов и подробная история, инвойс в PDF, сохранённые адреса доставки и персональная скидка. По трекинг-номеру заказ можно отследить прямо на сайте.

Решение 05

Панель администратора

Админка на Yii 2: конструктор главной страницы и форм обратной связи, управление заказами, создание, редактирование и клонирование товаров, модули доставки.

Решение 06

Переезд без потери SEO и продвижение

Перенесли основную часть базы: историю заказов, клиентов, товары и их опции. Сохранили ссылки на товары и картинки, настроили 301-редиректы со старого домена на новый и подключили аналитику.

07 Стек

Интеграции и стек

Yii 2 (advanced)PHPПанель администратораPayPalAuthorize.NetPDF-инвойсыОтслеживание заказа по трек-номеру301-редиректыВеб-аналитикаSEO-продвижение

Хотите такой же проект?

Опишите задачу – в течение рабочего дня ответим с вопросами и предварительной оценкой сроков.

Ответим в течение рабочего дня
Написать нам