9 способов создать высококонверсионные страницы продуктов Shopify

Для владельцев интернет-магазинов страница вашего продукта заслуживает большого внимания. Есть так много элементов, которые нужно учитывать, но также и множество возможностей для создания отличных покупок для ваших клиентов.

В этой статье мы рассмотрим некоторые области, на которых вы можете сосредоточиться, чтобы действительно оптимизировать страницы продуктов электронной коммерции для повышения конверсии, улучшения качества покупок и превращения ваших браузеров в покупателей.

1. Наметьте элементы страницы вашего продукта

Первым шагом в разработке страницы электронной коммерции, оптимизированной для конверсий, является включение элементов, которые обычно используются на успешных страницах электронной коммерции.

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

Поскольку страницы продуктов оказывают такое значительное влияние на конверсию, вы можете быть уверены, что Asos выделит ресурсы для тестирования и оптимизации каждого компонента.

Это внимание к деталям становится очевидным, если мы посмотрим, как типичная страница продукта загружается в замедленном режиме — с ограничением скорости 250 КБ/с (или при обычном 3G-соединении). Порядок загрузки каждого компонента дает нам некоторое представление о том, насколько важен каждый компонент.

Порядок загрузки элементов следующий:

• Навигация и логотип . Пользователь всегда должен знать, где он находится, и иметь возможность быстро переходить на другие страницы.
• Миниатюры продуктов. Изображения показывают, что пользователь находится на нужной странице, и дают ему предварительный просмотр страницы до того, как она полностью загрузится.
• Название продукта и панировочные сухари. Кроме того, подтвердите выбор пользователя и дайте ему возможность быстро вернуться к аналогичной категории.
• Изображение основного продукта . Фото товара — это то, что ищет покупатель. Обратите внимание, что они загружаются еще до призыва к действию, несмотря на то, что изображения обычно имеют больший размер файла.
• Призыв к действию . Кнопка добавить в корзину
• Дополнительная информация . Дополнительная информация о продукте, которая находится ниже сгиба, загружается последней.

Давайте разберем некоторые компоненты страницы продукта Asos.

2. Выделите фотографии продукта спереди и по центру

Asos — это сайт с большим количеством контента, который использует фотографии различными способами. Когда вы находитесь на главной странице, вы не увидите фотографии со ссылками на какие-либо конкретные продукты, а скорее на коллекции.

Но когда клиент переходит к продукту, это совсем другая история. Первое, что они видят, — это изображение продукта в центре. То немногое, что остается над сгибом, выровнено вокруг этой основной фотогалереи.

Мы еще поговорим о важности разнообразия фотографий, которые использует Asos, но сейчас важны позиционирование и известность. Фотографии продуктов помогают покупателям сразу узнать подробности о продукте быстрее, чем какое-либо описание, и помогают им быстрее найти продукт, который они ищут. Их нужно разместить на видном месте и быстро загрузить.

3. Четко отображайте информацию о доставке

У Asos есть не только баннер с бесплатной доставкой и возвратом, но и ссылки на информацию о бесплатной доставке по всему миру рядом с ценой. Эти типы рекламных акций электронной коммерции могут существенно повлиять на решения о покупке.

Высокая стоимость доставки оценивается как основная причина, по которой потребители отказываются от своей корзины, и 93% потребителей заявляют, что купили бы больше товаров, если бы была доступна бесплатная доставка. Зная это, Asos делает все возможное для продвижения своего предложения бесплатной доставки.

4. Включите дополнительную информацию

В то время как на странице продукта Asos может быть скудная информация в верхней части страницы, покупателю, который заинтересован в получении дополнительной информации, доступен большой объем дополнительной информации о продукте.

Поскольку покупатели не могут физически примерить продукт или задать вопросы продавцу, вы должны сделать все возможное, чтобы обучить их и дать ответы на вопросы, которые у них могут возникнуть.

Какие детали вы должны включить?

Эта информация может включать такие детали, как:

• Материал изделия
• Стиль
• Важные конструктивные особенности
• Инструкции по уходу и обслуживанию
• Информация о бренде или производителе
• Метаинформация, такая как SKU, которая может помочь клиенту провести дальнейшее исследование или связаться с вами.

Для модных брендов эти дополнительные детали могут быть особенно важны. Asos также включает измерения модели и размер одежды, чтобы покупатель мог более точно оценить, подходит ли ему этот продукт.

Почему эта дополнительная информация так важна?

С одной стороны, наличие уникальных описаний продуктов может стать отличным способом увеличить органический трафик поисковых систем. Но они также должны помочь ответить на вопрос, почему покупатель должен выбрать ваши продукты или магазин, а не конкурирующий. Предоставление этих дополнительных сведений показывает, что у вас есть более высокий уровень знаний о продукте, чем просто перечисление основных деталей, различимых на фотографии продукта.

Больше информации также означает, что клиент может сделать осознанный выбор самостоятельно, и это не только хорошо для него. Если вы поможете покупателю совершить покупку, в которой он уверен, это поможет снизить уровень поддержки клиентов и уменьшить количество возвратов.

5. Используйте четкий призыв к действию

Еще одна особенность дизайна веб-сайта Asos — это четкий призыв к действию, доступный на страницах продукта.

Нет запутанного процесса заказа. На самом деле вся необходимая клиенту информация содержится в фотографиях, названии и описании товара. Покупателю просто нужно выбрать свой размер и нажать заметную кнопку «Добавить в корзину». После этого их встречает ненавязчивое всплывающее окно, подтверждающее их выбор. Это всплывающее окно позволяет им либо быстрее завершить оформление заказа, либо продолжить покупки, прежде чем исчезнуть через несколько секунд.

Многие магазины выбирают ту или иную форму уведомления, либо перенаправляя их в корзину, либо показывая всплывающую корзину, как только товар был добавлен, или, альтернативно, вообще не принимая никаких вариантов и предоставляя покупателю право выбора. перейти к кассе. Этот подход кажется хорошей золотой серединой.

Если клиент не готов к покупке, Asos также предлагает простой способ добавить товар в избранное. В большинстве магазинов теперь есть какая-то функция списка желаний, но что хорошо в исполнении Asos, так это тот факт, что пользователю не нужно создавать учетную запись, чтобы товар по-прежнему сохранялся в течение 60 дней в кеше браузера.

Тем не менее, нажатие кнопки по-прежнему отправляет запрос обратно в Asos, поэтому они знают такие подробности, как тип пользователя, который сохраняет элемент, какой элемент сохраняется и когда он был сохранен — всю фантастическую информацию, которую они могут использовать для перенацеливания. клиент в социальных сетях.

6. Используйте белый фон на изображениях товаров.

В Pixc более 90% наших клиентов редактируют свои фотографии, удаляя фон с изображений и заменяя его белым. И это не только мы. Наличие белого (или, по крайней мере, постоянного) фона для всех изображений ваших продуктов стало стандартом для любого успешного магазина электронной коммерции.

Так почему же это так важно?

Это экономит ваши деньги

Сохранение постоянного фона ускоряет процесс добавления новых продуктов, фотографирования и редактирования. Такие магазины, как Asos, могут позволить себе иметь под рукой студию, фотографа и редактора, чтобы обеспечить единообразие макета и освещения в своих продуктах, но даже для крупных магазинов электронной коммерции использование белого фона может сэкономить много времени.

Вместо того, чтобы иметь собственную команду, вы можете просто сфотографировать свои продукты и отредактировать их для согласованности. Или, что еще лучше, отправьте их в такой сервис, как Pixc, чтобы еще больше автоматизировать процесс.

Это лучше подчеркивает ваш продукт

Без фона нет ничего, что могло бы отвлечь внимание от самого продукта. Белый фон позволяет лучше продемонстрировать более мелкие детали продукта и его особенности, которые в противном случае могли бы остаться незамеченными.

Это помогает клиентам просматривать ваши продукты

Когда все фотографии продуктов похожи, покупатель может легко просмотреть страницы вашей коллекции и выбрать продукт, который он ищет.

7. Включите хорошее сочетание фотографий

Увеличьте количество фотографий, которые вы показываете

Поскольку фотография вашего продукта так важна, важно включить множество различных снимков вашего продукта. Одна дополнительная фотография может передать больше информации, чем любое описание.

Только 0,52% потребителей хотят видеть одну фотографию, в то время как 33,16% предпочитают видеть несколько фотографий, а 58,03% хотят видеть фотографии продукта, которые показывают продукт в полном объеме.

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

Рассмотрите кадры в контексте

Контекстные фотографии, показывающие ваш продукт в действии, могут помочь разбудить воображение покупателя. Это также дает им возможность увидеть, как это выглядит за пределами демонстрационного зала.

8. Оптимизируйте метаданные изображения

Слишком много магазинов электронной коммерции разочарованы изображениями своих продуктов. В то время как такие платформы, как Shopify и BigCommerce, помогают донести сжатие и правильное соотношение сторон до масс, есть несколько других хороших привычек, которые вы всегда должны поддерживать.

Включите соответствующую метаинформацию

Надлежащие метаданные сводятся к трем вещам. Убедитесь, что ваши изображения имеют:

1. Правильные теги ALT, точно описывающие изображение
2. Соответствующие теги заголовков
3. Соответствующее имя файла с использованием дефисов (например, my-image.jpg)

Метаинформация важна для доступности, поэтому наполнение ключевыми словами осуждается (и также неэффективно). Но это дает контекст Google, который будет использовать метаданные изображения, а также контент вокруг него, чтобы помочь понять контент на странице.

Убедитесь, что ваши изображения имеют подходящий размер

Убедитесь, что они имеют одинаковую высоту и ширину. Вообще говоря, квадратные изображения будут лучше отображаться на всех устройствах. Использование прямоугольных изображений также может выглядеть неуклюже, если у вас есть продукты, которые особенно длинные или широкие.

Убедитесь, что они достаточно велики, чтобы включить масштабирование. В зависимости от того, как спроектирован ваш сайт электронной коммерции, на вашем сайте будут использоваться версии одного и того же изображения разного размера для миниатюр, изображений коллекций, изображений продуктов и функций масштабирования. Вы хотите, чтобы ваши изображения были достаточно большими, чтобы эта функция масштабирования работала, но не была излишне большой. Изображения размером от 1000 до 1600 пикселей обычно имеют хороший размер.

9. Создайте свой собственный шаблон фотографии продукта

Принимая во внимание приведенные выше советы, одним из самых простых способов обеспечить согласованность изображений вашего продукта является использование шаблона. Шаблон позволяет многократно правильно выравнивать фотографии и обеспечивать неизменность макета и размеров.

Добиться этого в Photoshop относительно просто.

• Создайте новый файл в Photoshop. Убедитесь, что цветовой режим установлен на Цвет RGB — 8 бит, разрешение не менее 72 пикселей/дюйм, а фоновое содержимое белое или прозрачное.

• Создайте новое руководство. Выберите «Новое руководство» в меню «Вид».

• Создайте направляющие полей. Создайте направляющую 10% по вертикали, 90% по вертикали, 10% по горизонтали и 90% по горизонтали. Вы также можете установить свои собственные поля.

• Создайте свои центрирующие направляющие. Создайте 50% вертикальную и 50% горизонтальную направляющие.

Вы должны закончить с этим.

Когда вы закончите, сохраните файл шаблона как обычный документ Photoshop. Ваши направляющие останутся доступными для вас в следующий раз, когда вы откроете документ.

Наличие шаблона позволяет размещать все изображения продуктов в одном и том же месте. Это также гарантирует, что все ваши изображения будут правильно масштабированы и сохранены с одинаковыми размерами.

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

Благодаря советам в этом руководстве у вас теперь есть действенные предложения, которые вы можете реализовать, чтобы начать улучшать свою страницу продукта. Теперь вам решать, как применить эти советы в своем собственном интернет-магазине, чтобы начать стимулировать продажи!