ACORN — сучасний інтернет-магазин жіночого одягу, який ми розробили на WordPress з використанням плагіна WooCommerce. Ця CMS з таким розширенням пропонує безліч інструментів, які закривають бізнес-потреби власників інтернет-магазинів. Розглянемо, що ми реалізували під час розробки цього проєкту.

Важливо, щоб з перших секунд інтернет-магазин зацікавив потенційного покупця. Саме тому відвідувача зустрічає великий банер зі стильними сукнями, які підпадають під акційну пропозицію. Тут же ми реалізували кнопку CTA, щоб покупець зміг швидко оформити замовлення. Поговоримо детальніше про інші блоки головної сторінки.

В цій секції відображаються найновіші пропозиції. Кожен товар показано якісною фотографією. Користувачеві доступна опція «Додати в збережене». Для цього команда розробників встановила плагін «Wishlist». Під блоком ми розташували кнопку «Усі новинки». Клікнувши, користувача переносить на сторінку з усіма новими товарами. Під кожною позицією в цьому блоці вказано ціну. Крім цього, користувач одразу може переглянути доступні кольори товару.

Наступний блок головної сторінки — це категорії. Вони розміщені у формі колажу з картинками та підписами. Зображення клікабельні завдяки інтегрованим посиланням, при натисканні користувача переносить у відповідну категорію. Під колажем наші розробники імплементували кнопку «Усі категорії». При натисканні відкривається відповідна сторінка.

Розпродаж — чудовий маркетинговий хід, щоб отримати більше замовлень. В цьому блоці виводяться картки товари зі знижками. Придбати позицію теж легко, достатньо клікнути на неї та оформити замовлення.

Цей блок складається з трьох текстових секцій, які супроводжуються тематичними іконками. Під мінімалістичними візуалами розміщено короткий опис. Користувач може дізнатись більше, оскільки передбачено кнопку «Детальніше». При натисканні відвідувача переносить на статичну сторінку з відповідним контентом.

Доведено, що сайти з вбудованими соціальними мережами компанії викликають більшу довіру у користувачів. В цьому блоці ми реалізували віджет для Instagram. Виводяться картинки, які розміщено в соціальній мережі. Клікнувши, користувач може перейти на аккаунт інтернет-магазину та ознайомитись із ним детальніше.

Далі наші розробники реалізували текстовий блок. В ньому розміщено опис інтернет-магазину. Після цього блоку ми зробили футер. В ньому розміщено лого бренду, категорії каталогу, посилання на корисні сторінки для клієнтів, контактна інформація. Крім цього, ми інтегрували соціальні мережі. Щоб перейти на сторінки інтернет-магазину, достатньо клікнути по відповідним іконкам.

Продумана структура головної сторінки — це важливо, але функціональність теж грає велику роль в зручності користувача. Наші розробники впровадили такі фічі:

• Зручний кошик. Кнопка кошика знаходиться на хедері. Ми його реалізували у вигляді слайдера. При натисканні справа висувається віконце з доданими товарами. В кошику передбачено кнопку «Оформити замовлення». Після кліку користувача переносить на сторінку зі спеціальною формою.
• Швидкий пошук. Кнопка пошуку розташована на хедері. Ми реалізували пошук за допомогою технології AJAX та кастомного коду. В декілька кліків користувач може знайти товари, які його цікавлять. 
• Клікабельні контакти. В футері користувач може клікнути на номер телефону, електронну пошту або на кнопку зворотнього зв’язку. В кнопки інтегровано посилання.

Кастомність — це те, що виділяє інтернет-магазин серез конкурентів. Наші розробники сайтів на WordPress впровадили такий додатковий функціонал:

• Кастомна галерея на карточці товару. Картинка товару розбита на 4 зони. Якщо водити по ній курсором миші, змінюються картинки елемента гардеробу. Коли користувач наводить курсор на різні кольори, картинки теж змінюються.
• Швидке додавання до кошика. Після вибору кольору на карточці товару з’являються розміри. Клікнувши на розмір, товар автоматично додається в кошик. Ми реалізували це за допомогою кастомного коду JS та PHP. 
• Гамма кольорів. По дефолту в карточці товару виводиться 7 кольорів. Якщо товар доступний у більшій кількості відтінків, поряд з кольорами виводиться число з позначкою «+». Клікнувши, палітра розшириться.
• Таблиця розмірів. Вона реалізована у вигляді сайдбару. Особливість — для кожної категорії створено окрему таблицю. Наприклад, для джинсів це одні розміри, а для суконь — інші. 
• Сторінка моделей. Адміністратор сайту може вносити параметри моделей, які демонструють товари. Завдяки цьому користувач при перегляді може зорієнтуватись, як одяг буде виглядати на фігурі з його параметрами.
• Динамічна галерея. На сторінці товару користувач може вибрати колір одягу та подивитись не лише фото, але й відео. Це дозволяє більш реально оцінити, як елемент образу сидить по фігурі.
• Подобаються цілісні образи? В цьому блоці користувач може навести курсор на спеціальний знак на картинці, клікнути по ньому та швидко придбати одяг з картинки. Наші розробники реалізувати таку функцію за допомогою кастомного коду.

Наша команда впоралась зі створенням онлайн-магазину. Ми реалізували сучасні та корисні функції за короткий час. Після розробки ми протестували все, щоб впевнитись в тому, що сайт працює без збоїв. Онлайн-магазин на WooCommerce — функціональне рішення для ведення бізнесу.