Привет!

Services

Как подобрать идеальный размер баннера для слайдера на главной странице?

Maksim TourouMaksim Tourou

Выбор идеального размера для Shopify баннера зависит от особенностей слайдера, который размещен у вас на сайте. Почему? Читайте ниже.

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

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

Как выбрать размер для Shopify баннера: поэтапный гайд

Начните работу с самой верхней точки: определите размер хедера Shopify  

В этой части содержится самая главная информация, которую пользователь ищет глазами у вас на сайте. Какой размер хедера Shopify выбрать и какая информация в нем должна быть? Максимальная высота блока хедера в Shopify темах составляет 250 пикселей. Но мы советуем использовать высоту не более 120 пикселей.

Кнопки, которые стоит размещать в блоке:

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

Определите размер слайдера Shopify

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

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

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

Поймите какую задачу должен решать баннер. Он должен презентовать продукт или серию продукции? Он должен показать оригинальность или универсальность товара?

Рассчитайте размер баннера Shopify

После того, как вы выбрали размер баннера для Shopify, нужно выбрать ширину экрана, на которой он будет работать.

Мы берем во внимание размеры устройств, которые чаще всего используют посетители.

Чтобы понимать, на какой размер баннера Shopify ориентироваться советуем используем сервис gs.statcounter.com.

Из скриншота статистики делаем вывод о четырех наиболее востребованных размерах:

  • 1366✕768
  • 1920✕1080
  • 768✕1024
  • 360✕640

Итак, ширина баннера нам известна, перейдем к выбору высоты. Если вы используете широкоформатный баннер, мы советуем использовать подходящую высоту экрана. Если высота баннера фиксирована, то вам стоит выбрать между 50 и 75% высоты экрана с учетом высоты хедера. Это значит, что для ширины экрана 1366 высота баннера будет в пределах 384 - 476 пикселей.

Помещайте в баннер качественные изображения с поддержков экранов ретины 2✕.

Retina Display - это запатентованная торговая марка, используемая компанией Apple для HiDPI дисплеев высокого разрешения, которую они успешно применили в своих последних устройствах: iPad, iPhone и MacBook Pro. За счет этой технологии дисплеи обладают намного большей плотностью пикселей, нежели старые устройства (примерно 300 DPI). И за счет этого на экране выводятся более четкие изображения и плавные шрифты.

Источник: hostenko.com/wpcafe/tutorials/wordpress-themes-retina-display-ready/

Настраивайте размер Shopify баннера на наиболее востребованные размеры экранов, включая ретину.

Заполните пространство

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

Возможны несколько путей решения этой задачи:

  • разместить информацию на картинке с помощью графического редактора (например Photoshop)
  • решить задачу с помощью front-end.

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

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

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

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

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

Скорость загрузки страницы - это решающий фактор, который влияет на принятие решения покупателя остаться на сайте или уйти. Один из способов улучшения загрузки сайта это сжатие размера картинок. Чтобы ускорить работу сайта мы используем сервис tinypng.com. Он может сжимать png и jpg форматы картинок. Иногда степень сжатия может дойти до 80%. Только представьте какие возможности в скорости загрузки может открыть этот метод.

Выводы

Баннер - это первое, что видит клиент на странице вашего  интернет-магазина. Он предназначен для того, чтобы произвести “Wow эффект” на пользователя. Главная цель этого элемента -  заинтересовать его в первые 1,5 секунды просмотра страницы.

Чтобы достичь эту цель вам нужно изучить психологию вашей целевой аудитории, ее интересы и логику совершения покупки. Еще перед тем как решать куда разместить баннер, проведите UX- аналитику (user experience) интерфейса вашего интернет-магазина. Полученные данные помогут определить какую информацию ищет клиент у вас на сайте, куда кликает, зацикливается ли на главной странице и вообще, задерживается ли на ней?

Чтобы wow-effect не распылился от неверного размещения баннера, следуйте следующим советам:

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

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

Каким должен быть размер баннера в магазине Shopify

  • 1366✕768;
  • 1920✕1080;
  • 1024✕768;
  • 360✕640.

Формат слайдера

  • широкоформатный;
  • фиксированной высоты.

Выгодное размещение объекта на баннере

  • по центру;
  • справа.

Удобное размещение текста

  • на картинке;
  • отдельно.

Оптимизация изображения

  • сжатие с помощью tinypng - наиболее оптимальный размер файла для скорости загрузки.

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

Конвертируйте дизайн в продажи и не забывайте все тестировать!

Заполните форму и наш Shopify консультант поможет вам определить способы повышения вашего профессионального роста.

Мы знаем как разрабатывать eCommerce проекты

Спасибо!
Ваша заявка отправлена