Интернет-магазин бренда женской одежды (США)
Уникального сайта на готовом шаблоне не суще… А нет, вот же он — интернет-магазин дизайнерской одежды на 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 и не только. Так выглядит настройка интеграции платёжной системы в админ-панели WordPress онлайн-магазина WooCommerce:
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.
Комментарии