Страницы продуктов: 6 магазинов с потрясающими страницами продуктов
Страницы продуктов – это последнее, что видят покупатели перед тем, как совершить покупку.
Или, если все идет не так, как планировалось, последнее, что они видят перед выходом.
Давайте разберем шесть магазинов из шести разных ниш, каждая с потрясающими страницами продуктов. Мы поместим их страницы продуктов – все они были созданы с помощью Shopify – под микроскопом, чтобы увидеть, что они делают, что вы можете воспроизвести в своем магазине.
Стандартная страница продукта
Скорее всего, какой бы шаблон дизайна вы не использовали для своего магазина Shopify, бэкэнд страницы продукта будет выглядеть примерно так:
Примерно так и появляются страницы продуктов из коробки: изображение слева; описание и кнопка «Добавить в корзину» справа; необязательные вещи, такие как кнопки социальных сетей, селектор количества и т. д.
Когда такие страницы загружаются вживую, они будут более или менее напоминать эту:
В этом нет ничего плохого. Все самое необходимое здесь. Несколько изображений, варианты цвета и (конечно же) кнопка «Добавить в корзину».
Но давайте посмотрим, как горстка оригинальных магазинов превращает стандартные страницы продуктов в яркие страницы продуктов.
Allbirds
Компания Allbirds, занимающаяся продажей обуви, создала страницу продукта, на которую мы смотрели выше. Знаете, нормальный на вид.
Но страницы продуктов Allbirds нормальны, только если вы не прокручиваете их вниз. Как только вы погрузитесь в суть дела, вы обнаружите одни из лучших продуктовых страниц.
Здесь есть за что подбодрить. Во-первых, Allbirds придерживается старой поговорки, что «форма следует за функцией». А именно, у них есть описание продукта, которое аккуратно помещается в отведенном для этого месте рядом с избранным изображением, не нарушая симметрию макета.
Но недостатка в информации нет! Потому что, когда вы нажимаете «Узнать больше», вы перенаправляетесь на якорь ниже на странице продукта.
Вот где вы найдете огромный красочный раздел, посвященный деталям, которые не помещаются наверху:
Нет правила, согласно которому описания продуктов должны ограничиваться этим маленьким уголком над кнопкой корзины. Перемещение этих деталей вниз дает Allbirds лучшее из обоих миров: тонны деталей и изображений, выделяющих продукт, и интуитивно понятный макет. (Этот макет также гарантирует, что кнопка «Добавить в корзину» остается закрепленной над сгибом. Именно там она и принадлежит.)
Еще одна замечательная вещь на страницах продуктов Allbirds – это дерзкие видеоролики, в которые они вставляют:
Когда вы нажимаете на это «изображение», вы переходите к видео, а не к другому изображению продукта. Видео простое – всего несколько секунд. Никаких номинаций на Эмми здесь нет. Но такие штрихи могут произвести революцию на страницах ваших продуктов.
Еще пара вещей, на которые стоит обратить внимание на страницах продуктов Allbirds.
Хотите, чтобы страницы вашего продукта запоминались? Как насчет большого изображения в высоком разрешении причудливого животного:
Кроме того, есть ряд преимуществ, от комфорта до удобства и заботы об окружающей среде, каждое из которых имеет свой изящный значок:
Разъемы социальных сетей на странице продукта? Да, почему бы не:
Подробнее: Примеры страниц продуктов Allbirds
Ему
Далее идет Hem, скандинавский мебельный бренд. Хем применяет хитроумные приемы, позволяющие превратить страницы продукта в нечто особенное.
Хорошо, вот основная страница продукта – верхняя часть. Если кто-то уже принял решение о покупке, он мог сразу же оформить заказ.
Подол имеет свой собственный способ экономии с дополнительными деталями. Вместо того, чтобы ссылаться на другие части страницы продукта, они используют функцию сворачивания. Этот…
… Превращается в это:
Благодаря этому макету вам не нужно прокручивать страницу вниз, чтобы получить важную информацию. Конечно, если вы действительно прокручивать вниз, все становится очень интересно.
Это первые два изображения, с которыми вы столкнетесь: одно – видео, другое – кактус.
Я не могу припомнить, чтобы когда-либо видел кактус, сидящий на диване. Тем не менее, я не забыл об этом кактусе на диване с тех пор, как увидел его. Это просто… круто. С одной стороны, дорогой диван – диван, который может похвастаться всем классом, который вы ожидаете от высококлассного скандинавского дизайна, – и маленьким кактусом с другой стороны. Странности удается создать причудливо запоминающуюся сцену.
А потом видео. Опять же, это не видеосъемка на уровне кинофестиваля. Но это движущиеся изображения, и люди любят движущиеся изображения. 26-секундное видео показывает кушетку с множества ракурсов и показывает, насколько легко ее собрать.
После этого, еще больше фотографий – большие, великолепные фотографии – с чертой написанного слова, чтобы дать покупателям любые детали, которые они могут упустить.
См. Больше: Примеры страниц товаров на подоле.
Чистые циклы
Создатель велосипедов Pure Cycles включает в свои страницы продуктов больше, чем несколько изящных элементов.
Давайте сосредоточимся на четырех тонких, но блестящих штрихах.
1 Это маленькое сердечко
Это сердце позволяет вам добавить что-нибудь в свой список желаний. Это приятный штрих по нескольким причинам: во-первых, он упрощает будущие покупки, что всегда хорошо. Во-вторых, это побуждает людей сообщать свои контактные данные, позволяя Pure Cycles ускорить будущую покупку с помощью электронной почты и скидочных кодов.
Это может быть очень удобно для покупателей. Это также, вероятно, не повредит усилиям Pure Cycles в области Facebook по привлечению покупателей к платформе социальных сетей на страницах продуктов.
3 Больше контента!
Pure Cycles предупреждает вас о том, что под сгибом этой страницы продукта есть дополнительный контент. На всякий случай кто-то ошибочно подумал, что эта страница началась и закончилась простой покупкой.
4 Прекрасное видео
Наконец, видео встроено среди фотографий продукта.
Щелкните это, и вы получите это. Нет ничего плохого в том, что 50 секунд двух симпатичных людей наслаждаются жизнью со своими велосипедами Pure Cycles:
Остальная часть страницы продукта Pure Cycles предсказуемо красива. Pure Cycles загружает его отзывами клиентов, фотографиями, плагинами для социальных сетей и деталями доставки – вещами, которые точно не поместились бы рядом с кнопкой «Добавить в корзину».
А для тех, кто жаждет конкретных деталей, Pure Cycles предлагает вам:
Подробнее: Примеры страниц продукта Pure Cycles
Несколько слов о видео о странице продукта
Теперь, если вы только что посмотрели это видео Pure Cycles, вы могли бы подумать: «Как &% $ ^ я собираюсь создать что-то подобное?»
Без сомнения, это видео довольно красивое. Подобные вещи появляются не на пустом месте.
Но видео не невозможно!
Не верите мне? Предположим, Оберло начал продавать толстовки. Кофты – это такой предмет, который определенно можно было бы использовать в видео на странице продукта – поэтому мы приготовили его! Это было создано примерно за 45 минут, от съемки до редактирования и экспорта для загрузки.
Конечно, это видео не вызовет оваций стоя. И тебя прощают, если ты не умираешь от желания купить одну из этих толстовок. Но не закатывайте глаза при мысли о съемке видео! Это не только для крупных брендов. Барьер для входа был уменьшен до крепкого кофе и iPhone.
Хорошо, переходим в наш следующий магазин.
Мастер и динамический
Master & Dynamic продает высококачественные аудио аксессуары. Верх страницы товара относительно нормальный…
… Но затем, когда вы смотрите вокруг, все становится совершенно элегантным.
Вот эта страница продукта Master & Dynamic ниже сгиба – временная шкала функций:
Это замечательно: использовать дизайн реального продукта для создания макета. Конечно, особенно идеален шнур для наушников. Но даже если вы продаете спиннеры, коврики для йоги или что-то еще, построение страницы продукта вокруг продукта дает вам согласованную структуру для работы.
Внизу, после того, как вас угостят серией завораживающих фотографий, вы получите технические характеристики.
Подробнее: Примеры главной и динамической страницы продукта
Беспроводные накладные наушники MW60
Воскресенье
Sunday Supply, австралийский магазин, продающий пляжные зонтики, широко раскрывает свои страницы с товарами. Буквально большой.
Они игнорируют стандартную схему «продукт слева, детали справа» и вместо этого выкладываются на огромные фотографии:
Даже страница продукта подарочной карты ведет с массивным изображением:
Вам не нужно далеко ходить, чтобы найти кнопку «Добавить в корзину», которая находится прямо под этим рисунком. (На кнопках Sunday Supply написано «Добавить в корзину», потому что, знаете, это пляжная тематика.)
Затем вы сталкиваетесь с некоторыми деталями продукта, которые написаны неотразимо очаровательным голосом, придающим зонту такие человеческие качества, как «любитель долгих дней на солнце и отличный компаньон».
Другие детали, такие как «Складывается до 1,2MX 0,2MX 0,2M» или «~ 7,0 кг в весе», можно найти ниже на странице, так что это все. Но почему бы не начать с забавных вещей?
Как и любой магазин по продаже пляжного снаряжения, Sunday Supply также демонстрирует свою продукцию на природе. Если вы можете использовать океан в качестве фона, почему бы и нет?
Подробнее: Примеры страниц продуктов Sunday Supply
Студия Neat
В блоках хранения и зарядки устройств Studio Neat есть страницы продуктов, которые так же классны, как и шикарные товары, которые они продают.
Инфраструктура страницы стандартная, но исключительно выполненная. Два предложения текста описания позволяют визуализировать, как предмет будет выглядеть у вас на месте – «На тумбочке или на столе…» – и прикосновения, как круговое изображение, придают ему некоторую популярность.
Чуть ниже мы сталкиваемся с видео, которое чистое и отточенное, но ничего, что потребовало бы голливудских ноу-хау.
Затем страница продукта превращается в визуальный тур по функциям, которые вы могли бы ожидать, если бы купили эту док-станцию. При этом есть акценты обычного текста («Так что, как бы вы ни катились, у вас будет место для ваших устройств»).
Наконец, на странице продукта есть несколько снимков этой док-станции для телефона в доме и офисе.
Страницы продуктов Studio Neat различаются по дизайну, и все они великолепны. Вот, например, несколько снимков со страницы продукта для булавки сенсорного экрана. Этот урок анатомии информативен и визуально убедителен.
Между тем, этот крупный план пера в действии действительно заставляет вас поиграть с ним.
Подробнее: Примеры страниц продуктов Studio Neat
Пульт дистанционного управления Apple TV
Выводы по страницам продуктов
У всех этих страниц продуктов есть несколько общих черт. Давайте поразим их в стиле tl; dr.
Там много места – используйте его
Эти страницы продуктов не позволяют пикселям тратить зря, и при этом они не уклоняются от того, чтобы заставить покупателя немного прокручиваться. Страницы продуктов родились в журналах и газетах, где место было дорого. Но онлайн вам не нужно выбирать между дополнительной картинкой и дополнительной детальной информацией. Используйте все это.
Видео и огромные картинки
Мы коснулись видео. Вы должны делать видео! И, конечно же, не забудьте фотографии. На этих страницах есть прекрасные изображения. Если вы дропшиппер, это означает, что вам не следует просто использовать фотографии своих поставщиков. Закажите свою продукцию и заберите свою. Вам не нужно продавать велосипеды или высокотехнологичное аудиооборудование, чтобы фотографии ваших товаров оживали.
Преобразование по-прежнему возможно вверху страницы
Эти потрясающие страницы продуктов помогут привлечь внимание людей, которые не хотят покупать. Вот почему мы видим фото, видео и причудливые макеты. Но не забывайте о людях, у которых уже нет кредитных карт! Если кто-то готов купить, сделайте то, что делают эти магазины, и дайте возможность покупать товары без прокрутки или поиска.
Хотите узнать больше?
Вот еще несколько статей, которые помогут вам продвинуться на страницах вашего продукта!
- Генератор слоганов
- Как писать эпические описания продуктов
- 15 удивительных советов по фотографии продукта
- 12 идей дизайна веб-сайтов для интернет-магазинов