Как создать главную страницу интернет-магазина

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

Все блоки в библиотеке удобно разделены по темам

1. Слайдер

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

Готовый блок из раздела «Превью» и наш вариант после заполнения

2. Популярные товары

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

Готовый блок из раздела «Превью» мы настроили под интернет-магазин

3. О нас

Итак, посетитель уже понимает, где находится, и ваша эстетика ему близка — иначе он бы уже ушел с сайта. Самое время рассказать о том, какие люди, идеи и процессы стоят за этими вещами и фотографиями. Создаем раздел «О нас». Выбираем один из готовых блоков в разделе «Базовые блоки», добавляем фото и текст. Мы решили сконцентрировть внимание на самой марке и рассказали об идее и процессе производства. Можно также рассказать о создателях, тогда и фото нужно подобрать соответствующее — с командой :)

В разделе «Базовые блоки» мы нашли подходящий вариант, добавили свои тексты и фото и изменили цвет фона

4. Подписка на рассылку и Инстаграм

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

В готовом блоке из раздела «Социальные сети» легко подключить свой Инстаграм и аккаунт в MailChimp для формы подписки

5. Инфополоса

Чтобы сообщить посетителям об актуальной акции, добавляем инфополосу. Размещаем ее в самом верху страницы, выделяем цветом и в нескольких словах рассказываем об акции: сроки, скидка/предложение, промокод, ссылка на подробности. Готово!

Добавить инфополосу на сайт можно в разделе Оформление > Инфополоса

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

Благодарим бренд SUNxMOON за предоставленные изображения.