Профессиональный пилинг или сыворотку покупают только тогда, когда понятно, что средство сделает с кожей и что будет, если не подойдёт. Поэтому магазину профессиональной косметики мало красивой витрины: ему нужны доказательства эффекта, отзывы и простой заказ. Рассказываю, как я собрал такой магазин для Fillers Shop.
Задача: продавать профессиональную косметику без консультанта рядом
Fillers Shop продаёт косметику бренда WIQO и инновационный пилинг PRX-T33 — средства, которые раньше в основном покупали косметологи для работы в кабинете. Теперь их всё чаще берут и для домашнего ухода: женщины и мужчины, подростки с проблемной кожей, специалисты, которым нужен надёжный поставщик. Магазин обещает оригинальную продукцию по доступным ценам, а сайт должен был это обещание показать.
У таких покупателей разный опыт, но вопросы одни: что делает средство, сколько процедур нужно, когда виден результат, сколько это стоит и можно ли вернуть деньги. Под эти вопросы я и выстроил страницы магазина. Сайт полностью на английском языке.
Главная: от первого экрана к каталогу и консультации
Первый экран посвящён главному товару — пилингу PRX-T33. Слева заголовок, короткий текст о том, что средство восстанавливает кожу, разглаживает морщины, уменьшает пигментацию, следы акне и растяжки, и четыре значка с фактами о процедуре: 3–5 сеансов, 30 минут на процедуру, без периода восстановления, результат виден сразу. Справа — крупное фото процедуры, под текстом — кнопка «Buy».
Дальше главная идёт в таком порядке:
- каталог «WIQO product» — восемь карточек товара с кнопкой «Show more» для остальных;
- блок «Results» — фото до и после процедуры и текст о том, как меняется кожа;
- аккордеон частых вопросов о пилинге PRX-T33;
- форма бесплатной консультации по средствам WIQO и PRX-T33 — имя, телефон и кнопка отправки;
- блок «About» о магазине и подвал с меню, страницами доставки, контактов и политики конфиденциальности.
В шапке всегда под рукой меню, строка поиска по товарам и корзина с выпадающим списком.
Каталог и карточки товаров
Карточка в каталоге простая: фото на белом фоне, название, цена и кнопка «Add to cart». Товар добавляется в корзину прямо с главной, без перехода на отдельную страницу, — это удобно тем, кто уже знает, что ему нужно, например косметологам, которые докупают привычные средства.
Страница товара собрана так, чтобы решение можно было принять на одном экране:
- хлебные крошки и галерея фото с переключением точками;
- название и четыре главных эффекта средства — увлажнение, меньше мелких морщин, более плотная и гладкая кожа, быстрее обновление клеток;
- цена со старой ценой и три ступени «from 1 / from 2 / from 3» — при покупке нескольких упаковок цена за штуку ниже;
- счётчик количества и кнопка «Buy now»;
- строка о гарантии возврата денег в течение 90 дней;
- описание товара и блок «Featured Products» с рекомендуемыми средствами внизу страницы.
Рейтинг и отзывы прямо в карточке
Для косметики отзывы — главный аргумент, поэтому они стоят на странице товара, а не на отдельной странице. Слева — средняя оценка и распределение отзывов по звёздам полосками от пяти до одной. Справа — сами отзывы: имя покупателя, отметка проверенной покупки, оценка, заголовок, текст, кнопки «Share» и «Comments» и вопрос «Was this review helpful?». Под отзывом может отвечать сам магазин — такой ответ виден покупателю и показывает, что за товаром кто-то стоит.
Оформление заказа и быстрые способы купить
Страница оформления — одна форма «Where should we ship?»: имя, фамилия, адрес доставки, индекс, город, штат, e-mail для чека и телефон для курьера. Галочка «Billing Address is same as Shipping Address» избавляет от повторного ввода адреса, рядом — сводка заказа и оплата. Под формой — напоминание, что данные защищены и зашифрованы, и блок гарантии возврата за 90 дней.
Не каждому хочется заполнять адрес, поэтому на сайте есть ещё три пути к покупке:
- «Buy in one click» — всплывающее окно с одним полем телефона;
- «Call me» — заказ обратного звонка;
- форма обратной связи с выбором, как удобнее получить ответ: e-mail или сообщение;
- форма бесплатной консультации на главной.
Внизу экрана при первом визите появляется баннер cookie с кнопками «Configure», «Decline» и «Accept all»: необязательные cookie включаются только с согласия посетителя.
Что важно в интернет-магазине профессиональной косметики
Косметика для профессионального ухода — ниша, где покупатель платит за эффект и рискует собственной кожей. По опыту этого проекта магазину в этой нише нужно:
- объяснять действие средства простыми словами и короткими фактами: сколько процедур, сколько времени, нужен ли период восстановления;
- показывать результат — фото «до/после» убеждают сильнее любых описаний;
- держать отзывы и рейтинг рядом с ценой, а не прятать их;
- снимать страх покупки гарантией возврата и понятными условиями доставки;
- давать скидку от количества — косметологи и постоянные покупатели берут средства упаковками;
- оставлять путь к человеку: консультация и обратный звонок нужны тем, кто сомневается.
Магазин, который подходит и косметологу, и новому покупателю
Fillers Shop получился небольшим, но законченным магазином: главная продаёт ключевой товар и показывает каталог, карточка отвечает на все вопросы перед покупкой, а оформление не задерживает покупателя дольше нужного. Опытный косметолог добавляет товар в корзину прямо из каталога, новый покупатель читает отзывы и смотрит результаты, а тот, кто сомневается, оставляет телефон и получает консультацию. Такой подход подходит любому магазину с дорогими средствами, где решение о покупке зависит от доверия.
Детали проекта
Тип проектаинтернет-магазин
КатегорияИнтернет-магазин
ТехнологииHTML5, CSS3, JavaScript
Рольразработка интернет-магазина: вёрстка главной, каталога, карточки товара и оформления заказа, корзина, поиск, попапы и формы
КлиентFillers Shop
Странаанглоязычный рынок
Что сделано
- Сверстал главную: первый экран с пилингом PRX-T33, каталог WIQO, результаты «до/после», FAQ, консультация и «About»
- Сделал каталог с карточками товара, кнопкой «Add to cart» и подгрузкой по «Show more»
- Собрал шапку с меню, поиском по товарам и выпадающей корзиной
- Сверстал карточку товара: галерея, эффекты средства, цена со ступенями от количества, счётчик, «Buy now», гарантия возврата
- Сделал блок рейтинга с распределением по звёздам и отзывы с ответами магазина
- Добавил рекомендуемые товары внизу карточки
- Сверстал оформление заказа: форма доставки, «billing = shipping», сводка заказа и оплата
- Сделал попапы «Buy in one click» и «Call me», форму обратной связи и форму консультации
- Добавил баннер cookie с кнопками «Configure», «Decline» и «Accept all»
Результат
- Англоязычный интернет-магазин с каталогом, карточкой товара, корзиной и оформлением заказа
- Цена от количества в карточке подталкивает брать несколько упаковок
- Эффект средства, отзывы и гарантия возврата видны ещё до оплаты
- Четыре пути к заказу: корзина, покупка в один клик, обратный звонок и консультация