Новые настройки дизайна Эквид-магазина: быстро, без кода, для любого бизнеса
25 апреля 2018, Денис Никифоров, Эквид

Новые настройки дизайна Эквид-магазина: быстро, без кода, для любого бизнеса

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

С Эквидом даже небольшой интернет-магазин может выглядеть профессионально и современно. Для этого не придется нанимать дизайнера или тратить много времени.

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

Комбинируйте разные настройки и выбирайте дизайн, который подчеркнет достоинства вашего товара

Комбинируйте разные настройки и выбирайте дизайн, который подчеркнет достоинства вашего товара

Новые настройки доступны бесплатно всем Эквид-магазинам. Чтобы попробовать их, перейдите на страницу Дизайн в панели управления Эквида.

Убедитесь, что у вас включены все обновления витрины в разделе Настройки → Обновления:

Включите эти обновления в панели управления Эквида, чтобы увидеть новые настройки дизайна

Включите эти обновления в панели управления Эквида, чтобы увидеть новые настройки дизайна

Важно: если вы используете собственную CSS-тему, новый внешний вид витрины может быть совместим с темой не полностью. Наша команда поддержки поможет, если возникнут вопросы.

Оформите витрину своего Эквид-магазина

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

1. Выберите размер изображений

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

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

Когда нужно сделать акцент на широком ассортименте (к примеру, 200 кожаных ремешков разного цвета), подойдут картинки маленького размера. Так на экране поместится больше товаров.

Фото товаров маленького, среднего и большого размера

Фото товаров маленького, среднего и большого размера

2. Подберите подходящую форму изображений

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

Используйте горизонтальные изображения, если товар в ширину больше, чем в высоту (например, обувь, велосипеды).

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

Вертикальные, горизонтальные и квадратные изображения

Вертикальные, горизонтальные и квадратные изображения

А чтобы выделить границы фотографий на фоне страницы магазина и сделать их чётче, затемните фон изображения. Сравните:

Затемните фон изображения, чтобы сделать его границы четче

Затемните фон изображения, чтобы сделать его границы четче

3. Укажите на витрине нужную информацию о товаре

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

Оставьте информацию о товаре под фото или показывайте при наведении мыши

Оставьте информацию о товаре под фото или показывайте при наведении мыши

Или отключите все надписи, оставив одно изображение. Клиент попадёт в карточку товара после клика на фото.

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

Выберите расположение информации под фотографией товара

Выберите расположение информации под фотографией товара

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

Дополнительное фото товара появляется при наведении мыши

Дополнительное фото товара появляется при наведении мыши

4. Оформите категории товаров

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

Расположите название категории на картинке, под ней, показывайте при наведении мыши или скройте

Расположите название категории на картинке, под ней, показывайте при наведении мыши или скройте

А если название категории уже есть на ваших картинках, не надо его дублировать. Просто скройте текст в настройках.

Оформите страницу товара

Как увеличить конверсию страницы товара? Показать товар с выгодной стороны и дать максимум полезной информации о нём. В этом помогут новые настройки.

1. Выберите подходящий вид страницы товара

Решите, как описание и изображения товара будут расположены на странице. Есть варианты для разных задач:

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

Информация о товаре расположена в 2 колонки, описание справа

Информация о товаре расположена в 2 колонки, описание справа

Разместить подробное описание товара. Если информации о товаре много, выберите вариант «2 колонки, описание товара под картинкой». Даже если вы разместите на странице длинную инструкцию по использованию товара, это будет смотреться гармонично.

Информация о товаре расположена в 2 колонки, описание снизу

Информация о товаре расположена в 2 колонки, описание снизу

Привлечь внимание к описанию товара. Если вы считаете, что описание вашего товара важнее фото (например, продаете сертификаты на услуги или сложные технические приборы), включите вариант «2 колонки, описание товара слева».

Информация о товаре расположена в 2 колонки, описание слева

Информация о товаре расположена в 2 колонки, описание слева

Показать всё на одном экране. Вариант в 3 колонки подходит для размещения большого количества информации на одном экране без прокрутки. Лучше всего смотрится на широком экране.

Информация о товаре расположена в 3 колонки

Информация о товаре расположена в 3 колонки

Чем больше фотографий товара, тем лучше: покажите его с разных сторон, в действии, не забудьте про детали. И выберите способ размещения этих изображений в карточке товара вашего Эквид-магазина. Поставьте дополнительные фото под главным изображением, слева от него или разместите полноразмерные фото друг за другом.

Дополнительные фото снизу, слева или одного размера с главным изображением

Дополнительные фото снизу, слева или одного размера с главным изображением

2. Выберите, какую информацию о товаре дать покупателям

У вашего товара нет артикула? Уберите галочку в настройках и это поле не будет показываться в карточке товара.

С остальной информацией то же самое: можно скрыть поля «В наличии» и «Количество», кнопки «Поделиться», параметры товаров и даже цену. Последнее пригодится, если цена зависит от данных, которые предоставляет покупатель. Например, мебель по индивидуальным меркам.

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

Данные на странице товара можно скрывать и двигать

Данные на странице товара можно скрывать и двигать

Выберите элементы навигации и цветовое оформление

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

  • Автоопределение цвета: цвета витрины магазина автоматически адаптируется к цветам вашего сайта. Опция пригодится, если вы ставите Эквид на собственный сайт и хотите, чтобы витрина вписалась в дизайн страницы.
  • Меню внизу страницы поможет покупателям быстрее переходить по разделам магазина.
  • Ссылка «Войти» нужна, если хотите, чтобы клиент мог видеть свои заказы в личном кабинете, составлять и просматривать список желаний.
  • Цепочка навигации («хлебные крошки») поможет клиенту не потеряться в магазине с большим ассортиментом и множеством категорий.
  • Поле «Сортировка» позволяет покупателям смотреть товары в удобном им порядке, сортируя по цене, названию и другим параметрам.

Другие способы менять дизайн магазина

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

  • Создайте собственную CSS-тему

    CSS-тема — набор правил, которые определяют вид каждого элемента в магазине (его цвет, размер, форму, место на странице). Вы можете самостоятельно переделать свой Эквид-магазин с помощью такой темы. Для начала прочитайте инструкцию «Как изменить дизайн в Эквиде» и посмотрите примеры в Базе знаний.

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

  • Установите тему из Магазина приложений

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

    Все приложения доступны пользователям на платных планах.

  • Используйте API Эквида
    Для разработчиков: с помощью открытого API Эквида вы можете создать тему и использовать её для собственного магазина или продавать всем желающим. Или разработать полезное приложение, добавить его в Магазин приложений и облегчить работу всем владельцам Эквид-магазинов (бесплатно или за абонентскую плату).

    Чтобы начать работу, регистрируйтесь на странице для разработчиков.

Оформите Стартовый сайт и продавайте на нём

Каждый пользователь Эквида бесплатно получает готовый одностраничный сайт со встроенным интернет-магазином — Стартовый сайт. С его помощью вы можете рассказать о вашем бизнесе в интернете и произвести впечатление на клиентов.

Оформление стартового сайта, как и витрины магазина, займёт минимум времени. В панели управления Эквида перейдите на страницу Все каналы продаж → Стартовый сайт и нажмите «Редактировать сайт»:

Редактировать стартовый сайт Эквида

Добавьте обложку, описание магазина, отзывы покупателе и контактную информацию. Пользуйтесь инструкцией по оформлению Стартового сайта.

***

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

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