Інтернет-магазин бренду жіночого одягу (США)
Унікального сайту на готовому шаблоні не існ… А ніт, ось же він — інтернет-магазин дизайнерського одягу на WordPress. Цього разу вебнавти драйвили модну індустрію разом з американським брендом With love for you. Розповідаємо, як у симбіозі бренд-дизайну та стандартної теми WooCommerce народжується унікальний і функціональний інтернет-магазин — з варіативними товарами, захищеними платежами, автоматизованою доставкою, а також розрахунком податків і купонів на знижки.
Як усе починалося
With love for you — це американський модний бренд, натхненний талантом української дизайнерки Айни Гассе. З любов’ю до життя, міста та всього світу — так звучить філософія бренду, продумана та втілена в Instagram у зв’язці дизайнерки та SMM-спеціалістки Webnauts. Згодом інстаграмний бутик з кіношною естетикою мігрував на платформу WordPress і був наділений конкретними функціями онлайн-магазину.
Фірмовий стиль для модного бренду
Бренд-історія With love for you розпочалася з розробки фірмового стилю — від логотипа до листівки, що кладеться до посилок з одягом. Стиль бренду був детально розкритий на сторінках гайдлайну — зводу правил з використання візуалу: логотипа, шрифтів, кольорів і графічних елементів.
Мінімалістичний дизайн транслює концепцію бренду Less is more, що відображена не лише в стилі одягу, а й стилі життя сучасної жінки в мегаполісі. Цей образ, підкріплений фірмовим стилем, був покладений в SMM-стратегію для просування бренду в Instagram, а згодом — інтернет-магазину на WordPress.
Позачасові колекції, створені українською дизайнеркою з італійських тканин, розліталися зі складу в Нью-Джерсі до шаф американських і канадських модниць. До кожної посилки додавалися 2 двосторонні листівки з подякою за замовлення, а також листівка-інструкція щодо догляду за одягом:
Аби познайомити модних жительок Нью-Йорка з новим брендом, дизайнерка Webnauts також розробила рекламну листівку та буклет для розсилки по будинках, ресторанах і б’юті-салонах мегаполіса:
Візуальний брендинг + тема WooCommerce = унікальний онлайн-магазин
Аби створити неповторний онлайн-магазин на WordPress, необов’язково малювати дизайн з нуля чи повністю покладатися на стандартний шаблон. Можна пристосувати готову тему відповідно до фірмового стилю та маркетингових потреб, що ми, власне, і зробили.
Базою для інтернет-магазину With love for you стала преміумтема WooCommerce . Ми повністю адаптували дизайн згідно з візуальними правилами гайдлайну та отримали сайт, який став органічним продовженням ідей модного бренду.
Для зручного онлайн-шопінгу ми врахували найменші дрібниці, зокрема додали фавікон — іконку перед назвою вебсторінки в браузері, що дозволяє не загубити інтернет-магазин з-поміж безлічі відкритих вкладок:
А потрапити в товарний каталог можна прямо з першого екрана. Головна сторінка сайту зустрічає анімованими слайдами з приємними пропозиціями, кожна з яких веде навпростець до «вітрини». Та що там — майже всі «дороги» ведуть до каталогу.
Досить важливі для модного бренду розділи JOURNAL і LOOKBOOK, які надихають статтями та ідеями стильних образів, можна знайти в зручному меню з розумним пошуком, кошиком і кабінетом користувача.
Товарний каталог
Сторінка каталогу товарів має декілька режимів перегляду та зручний фільтр. Кожну картку традиційно супроводжує назва та ціна товару, а наведення курсора викликає анімацію з додатковим фото й такими функціями, як швидкий перегляд, додавання в кошик і список бажань. Ці опції зручні для користувача, бо звільняють від необхідності залишати поточну сторінку, і вигідні для продавця, бо збільшують відсоток конверсії на сайті.
Картка варіативного товару
Товарна сторінка має функцію перегортування між картками, ховер-ефект збільшення фото та можливість вибору різних параметрів продукту (розмір, колір абощо).
Можливість створювати варіативні товари дозволяє продавцю витрачати менше часу на наповнення сайту та уникнути хаосу в інтернет-магазині. Приміром, замість того, щоб створювати 3 товарні картки з пончо сірого, бежевого та чорного кольору, адміністратор онлайн-магазину створює сторінку з одним товаром різних кольорів. Своєю чергою користувачу не потрібно шукати пончо потрібного кольору в каталозі, — для цього достатньо вибрати колір на сторінці без перезавантаження.
Зручний шопінг і різноманітний асортимент дає власникам магазину конкурентну перевагу, збільшує продажі та підвищує лояльність клієнтів.
Традиційно картка містить ціну, опис і наявність товару, а також характеристики, відгуки та умови покупки. Чудовим способом просування сайту є можливість поділитися товаром через пошту та соціальні мережі, а затримати користувача на сторінці та підвищити чек дозволяє блок супутніх товарів.
Якщо додати товар у кошик або вішліст, він автоматично з’явиться в шапці сайту — кошику чи кабінеті покупця відповідно (причому незалежно від того, зареєстрований користувач або ні).
Кошик товару
Товарний кошик має вигляд зручної бічної панелі, що з’являється в момент додавання товару чи кліка на іконку кошика в меню. Кошик дозволяє підрахувати вартість покупки й доставки, а також застосувати промокод і відразу перейти до сторінки чек ауту.
Повноцінна сторінка товарного кошика являє собою 1-й крок оформлення замовлення. Про це свідчить прогрес бар — навігаційний ланцюжок, який є індикатором пройденого шляху до покупки. Творці теми Woocommerce запевняють, що ця функція збільшує конверсію на 30%.
Кошик не просто підсумовує вартість покупки з урахуванням промокоду, а дозволяє відразу зазначити дані для доставки, дізнатися суму податку та оплатити замовлення за допомогою PayPal. Або ж перейти до 2-го кроку — чек ауту з додатковими способами оплати та доставки.
Функціональність інтернет-магазину на WordPress
Оформлення замовлення
Розглянемо ключовий функціонал інтернет-магазину в процесі оформлення замовлення.
Перед тим, як почати заповнення платіжних даних, сторінка чек ауту пропонує бувалим клієнтам ввійти в акаунт, а також нагадує про можливість ввести промокод, якщо він ще не був застосований у кошику раніше.
У міру того, як користувач заповнює персональні дані, інформація щодо покупки оновлюється. Наприклад, в момент введення адреси доставки в США до замовлення автоматично підтягується сума споживчого податку залежно від штату. Це пов’язано з особливостями податкової системи країни.
Якщо загальна сума кошика задовольняє покупця, він вибирає зручний спосіб оплати — через Stripe, PayPal або Klarna.
Інтеграція з платіжними системами Stripe, PayPal і Klarna
Наявність декількох зручних і надійних способів оплати дозволяє відповідати потребам якомога більшої аудиторії користувачів. Відсутність звичного платіжного сервісу може призвести до втрати покупця в найвирішальніший момент. Аби користувачі могли оплачувати покупки відразу, післяплатою чи на виплату, ми інтегрували інтернет-магазин з різними популярними системами — Stripe, PayPal і Klarna.
Stripe — міжнародна платіжна система, що дозволяє миттєво, зручно та безпечно здійснювати захищені платежі в інтернеті за допомогою кредитних і дебетних карт.
Основні налаштування для інтеграції ми здійснили на стороні Stripe та під’єднали технологію до інтернет-магазину WooCommerce на панелі управління сайтом WordPress:
PayPal — міжнародна електронна система, що забезпечує надійність онлайн-платежів за допомогою карт VISA, MasterCard, American Express і не тільки. Так виглядає налаштування інтеграції платіжної системи в онлайн-магазині WooCommerce в адмін-панелі WordPress:
Klarna — міжнародний платіжний і торговельний сервіс, який пропонує гнучкі платежі в інтернеті — прямі, післяплатою та на виплату. Причому технологія дозволяє вбудувати в інтернет-магазин як усі, так і окремі варіанти оплати.
Доставка для покупців США та Канади з ShipStation
За автоматизацію доставки замовлень інтернет-магазину відповідає сервіс ShipStation. Система дозволяє оформлювати доставку за допомогою популярних міжнародних сервісів (UPS, DHL Express і USPS), розраховувати вартість і відстежувати відправлення, друкувати транспортні етикетки тощо.
Для інтеграції сервісу з інтернет-магазином WooCommerce ми налаштували регіони, методи та вартість доставки:
Автоматичний розрахунок податків з WooCommerce
Податкова система США передбачає наявність споживчого податку на товари Sales tax — аналог звичного для нас податок на додану вартість. Однак у нас він регулюється на рівні держави, а в Америці — на рівні штату, тому податкова ставка коливається від 2,9 до 7,25%.
Для автоматичного розрахунку податку на товари додаткова інтеграція зі сторонніми сервісами не знадобилася — ми налаштували ставки для США та Канади вручну в адмінці WooCommerce:
Налаштування промокодів з плагіном WooCommerce
Ніщо так не стимулює продажі, як система промокодів на сайті інтернет-магазину. Варіантів використання знижкових купонів може бути безліч, а принцип роботи — всього один: ввести промокод на сайті, побачити нову вигідну ціну, приємно здивуватися та оплатити замовлення.
Щоб створення промокоду для адміністратора сайту було таким само простим, як і застосування знижки для клієнтів With love for you, ми реалізували можливість генерації купонів за допомогою плагіну WooCommerce Advanced Coupons. Винагороджувати й тим самим підвищувати лояльність своїх клієнтів можна всього в пару кліків — достатньо вибрати потрібне налаштування та згенерувати промокод за датою, відсотком або фіксованою знижкою:
Просте адміністрування сайту
Розробити інтернет-магазин на базі WordPress і налаштувати інтеграції з сервісами оплати та доставки недостатньо. З кожною новою партією товарів, а в нашому випадку — колекцією одягу, необхідно регулярно оновлювати каталог. Для цього в адмін-панелі WooCommerce є всі необхідні інструменти, що дозволяють створювати та наповнювати картки контентом без жодного рядка коду:
Завдяки інтеграції теми WooCommerce з популярним редактором Elementor додавати, редагувати та публікувати статті в блозі теж не становитиме великих труднощів:
Адаптивність онлайн-магазину
Коли мова йде про онлайн-магазин модного бренду, було б злочином не нагадати про моду на функціональність і комфорт. Аби клієнтки With love for you насолоджувалися власним відображенням у дзеркалі в одязі бренду, спочатку вони мають отримати позитивний досвід завдяки коректному відображенню сайту на своєму пристрої. З огляду на закономірний розвиток сектору mobile commerce особливу увагу ми приділили мобільній версії сайту, що дозволяє легко здійснювати модні покупки прямо зі смартфона.
Підсумки
Це була історія співпраці, що почалася з SMM і завершилася повноцінним сайтом інтернет-магазину на WooCommerce. Однак для модного бренду With love for you це стало потужним трампліном для того, щоб заявити про себе на ринку США та Канади. Для цього ми розробили фірмовий стиль і впровадили його спочатку на сторінку Instagram, потім на платформу WordPress, і зрештою — в посилки з одягом. Коли цілісність бренду була досягнута за допомогою дизайну, ми реалізували безпечну оплату варіативних товарів з автоматичним розрахунком доставки, податків і промокодів. На виході клієнт отримав функціональний онлайн-магазин з нестандартним дизайном фірмового стилю на стандартній темі WooCommerce.
Комментарии