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-просування

Хочете такий самий проєкт?

Опишіть завдання – протягом робочого дня відповімо із запитаннями та попередньою оцінкою термінів.

Відповімо протягом робочого дня
Написати нам