ecommerce

Інтернет-магазин ювелірних прикрас Luxury Life

Дизайн головної сторінки проєкту Інтернет-магазин ювелірних прикрас Luxury Life

Задача

Розробити ювелірний інтернет-магазин для ринку Канади на WordPress із підключенням оплати PayPal і Stripe, особистим кабінетом та системою кешбеку.

Зроблено

Прототипи

Дизайн

Адаптиви

Верстка

WordPress

PayPal

Stripe

Головна

Головна сторінка ювелірного інтернет-магазину поєднує зручну навігацію за категоріями прикрас (каблучки, сережки, підвіски, ланцюжки, подарункові сертифікати) та акцентні банери з акційними пропозиціями. Окремі блоки «Рекомендуємо» та «Новинки» знайомлять покупців із бестселерами, а лаконічна світла естетика підкреслює деталізацію виробів із золота та срібла.

Головна - скріншот проєкту 1

Каталог

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

Каталог - скріншот проєкту 1

Картка товару

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

Картка товару - скріншот проєкту 1

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

FAQ

Розділ поширених запитань побудований у форматі зручного акордеона, де структуровано відповіді щодо підбору розміру прикрас, догляду за сріблом, оплати через PayPal і Stripe та умов повернення. Це знімає основні заперечення покупців перед оформленням замовлення.

FAQ - скріншот проєкту 1

Оформлення замовлення

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

Оформлення замовлення - скріншот проєкту 1

Особистий кабінет

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

Особистий кабінет - скріншот проєкту 1

Модальні вікна

Для швидкого доступу до кабінету та списку бажань розробили лаконічні модальні вікна авторизації, реєстрації нового покупця та відновлення пароля. Форми містять лише необхідні поля та підтримують швидкий вхід без перезавантаження сторінки.

Авторизація

Авторизація

Відновлення пароля

Відновлення пароля

Реєстрація

Реєстрація

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

Усі 24 ключові екрани інтернет-магазину адаптовані під смартфони: від каталогу з виїзними фільтрами й картки прикраси до особистого кабінету та оформлення замовлення. Інтерфейс забезпечує зручний вибір виробів і швидку оплату зі смартфона.

Мобільна версія - мобільний інтерфейс 1
Мобільна версія - мобільний інтерфейс 2
Мобільна версія - мобільний інтерфейс 3
Мобільна версія - мобільний інтерфейс 4
Мобільна версія - мобільний інтерфейс 5
Мобільна версія - мобільний інтерфейс 6
Мобільна версія - мобільний інтерфейс 7
Мобільна версія - мобільний інтерфейс 8
Мобільна версія - мобільний інтерфейс 9
Мобільна версія - мобільний інтерфейс 10
Мобільна версія - мобільний інтерфейс 11
Мобільна версія - мобільний інтерфейс 12
Мобільна версія - мобільний інтерфейс 13
Мобільна версія - мобільний інтерфейс 14
Мобільна версія - мобільний інтерфейс 15
Мобільна версія - мобільний інтерфейс 16
Мобільна версія - мобільний інтерфейс 17
Мобільна версія - мобільний інтерфейс 18
Мобільна версія - мобільний інтерфейс 19
Мобільна версія - мобільний інтерфейс 20
Мобільна версія - мобільний інтерфейс 21
Мобільна версія - мобільний інтерфейс 22
Мобільна версія - мобільний інтерфейс 23
Мобільна версія - мобільний інтерфейс 24