Дизайн Стартового сайта (старая версия)

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

Эта статья о старой версии Стартового сайта, которая больше не доступна для новых пользователей Эквида. Если вы хотите отредактировать дизайн основной версии Стартового сайта (сейчас доступна по умолчанию), прочитайте статью о редактировании Стартового сайта →

Оформление обложки Стартового сайта

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

starter site cover design

Чтобы изменить дизайн обложки:

Войдите в Панель управления Эквида → Сайт.
Нажмите Редактировать сайт.
Нажмите Темы оформления и выберите тему для вашего магазина.
Чтобы далее отредактировать отдельные элементы обложки, перейдите в раздел Вступление и обложка.

Шаг 1. Выберите вариант расположения вступления и описания на обложке:

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

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

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

Шаг 2. Выберите тип фона в секции Вступление и обложка → Фон → Настройки фона:

Цвет. Заливка одним цветом подойдёт тем, кто хочет сделать магазин в минималистичном стиле и тем, кто хочет сочетать цветной фон с изображением.
Градиент. Добавит оригинальности в оформление обложки. Можно выбрать готовый градиент из галереи или смешать два цвета, а также самостоятельно установить угол градиента.
Изображение. Загрузите фотографию себя или команды, ваших товаров, процесса производства или любое фото, которое привлечет внимание посетителя и заинтересует его. Используйте изображение формата JPG, PNG или GIF, размером 1000 x 667 пикселей или больше.

Если у вас нет подходящей фотографии для обложки, посмотрите сайты со стоковыми фотографиями, например, Shutterstock, Depositphotos, Pixabay.

Затемнение. Делает текст более выразительным. Используйте одноцветный слой или градиент с произвольным углом на ваш вкус.
Видео. Загружайте видео с Youtube или Vimeo. Видео оживляет сайт и помогает лучше продемонстрировать товары или процесс производства. Просто вставьте ссылку на видео в текстовое поле и сохраните изменения — на фоне обложки появится видео.

Шаг 3. Включите/отключите кнопку «В магазин»

Под названием и описанием магазина расположена кнопка перехода в магазин. Она одним кликом переносит покупателя к списку товаров. По умолчанию включена и называется «В магазин». Вы можете переименовать кнопку в поле Текст на кнопке. Например, если вы продаете билеты на какое-либо мероприятие, назовите кнопку «Забронировать места». Кнопка «Скачать» хорошо подойдет для магазина электронных книг, изображений и других электронных товаров.

Вы можете задать цвет кнопки «В магазин» в секции «Оформление текста», смотрите шаг 4.

Шаг 4. Задайте свой цвет, размер и шрифт

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

Чтобы цвета текстов хорошо сочетались с фоном обложки, используйте такие сайты, как Canva и Color Hunt. Там вы найдете подборки палитр, которые показывают хорошие цветовые сочетания. Используйте их для вдохновения и как пример цветов для оформления вашего магазина.
Если вы используете изображение для обложки, то загрузите его в специальный сервис, например, Image Color Picker. Там вы получите точные коды цветов, которые есть на вашем изображении.

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

Шаг 5. Загрузите логотип

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

Оригинальное изображение должно быть не меньше 140 x 140 пикселей (для Ретины — не менее 280 x 280 пикселей). Если оригинал изображения большой, Эквид автоматически подгонит его под блок размером 480 x 140 пикселей.
Поддерживаемые форматы: JPEG, PNG, GIF.

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

Вы можете загрузить отдельный логотип для счетов. По умолчанию, он также будет использоваться в уведомлениях о заказе. Чтобы использовать другой логотип для уведомлений, загрузите его в Панели управления Эквида → Уведомления → Логотип для уведомлений.

Скройте логотип, если хотите использовать его только как фавикон, с помощью CSS кода:

Зайдите в Панель управления Эквида → Дизайн.
Промотайте вниз до пункта Создать свою CSS тему и нажмите Создать тему.
Если у вас уже есть активная CSS тема, добавьте код в нее. Для этого на странице настроек дизайна нажмите Редактировать тему.
В открывшемся окне нажмите на кнопку Новая CSS тема. Придумайте ей название, например, «Удаление логотипа» и вставьте в окно следующий код:

div.cover__logo {
 display: none;
}

Включите и сохраните новую тему.

Готово! Обновите страницу витрины, чтобы увидеть изменение.

Шаг 6. Скройте/оставьте стрелку прокрутки

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

Шаг 7. Добавьте контактную информацию в шапку сайта

В Меню в шапке сайта выберите, какую информацию о магазине вы хотите показывать в шапке сайта: номер телефона, аккаунты в соцсетях, ссылки на карту с адресом и на график работы магазина, ссылки на разделы сайта (О нас, Адрес, Контакты), иконку корзины.

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

Изменение настроек дизайна витрины

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

Ecwid starter site design

Параметры дизайна магазина полностью повторяют опции в Панели управления Эквида → Дизайн и применяются ко всем витринам вашего магазина.

Шаг 1. Настройте внешний вид иконок товаров и категорий

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

Если вам важно уместить максимальное количество товаров на одной странице, включите маленькие картинки.

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

Шаг 2. Настройте внешний вид страниц каталога

Перейдите в меню Список товаров и категорий, чтобы настроить внешний вид страниц каталога. Выберите настройки внешнего вида страниц товаров и категорий:

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

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

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

Шаг 3. Настройте дизайн карточки товара

В меню Страница товара выберите, какую информацию о товаре вы хотите показывать и в каком виде.
Вид страницы. Выберите две или три колонки в зависимости от того, как вы хотите преподнести информацию о товаре:
- «Две колонки, описание товара справа». Используйте этот вариант, если вам важно показать изображение товара.
- «Две колонки, описание товара под картинкой». Лучше подходит для длинных описаний.
- «Две колонки, описание товара слева». Хороший вариант, чтобы привлечь внимание покупателей в первую очередь к описанию товара.
- «Три колонки». Используйте, если хотите показать максимум информации на экране. Особенно хорошо выглядит на широких экранах.
Галерея изображений. Выберите, где вы хотите показывать дополнительные изображения относительно основного изображения товара.

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

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

Шаг 4. Завершите настройку

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

Выключение навигационной цепочки в разделе «Прочее» отключает навигационные цепочки одновременно на страницах категорий и товаров.

Использование готовых тем и приложений сторонних разработчиков

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

Например, приложение Tabber позволяет добавить в описание товара вкладки, с помощью которых вы можете разбить информацию о товаре на логические части. С приложением Imagize можно загрузить изображения товара с обзором 360 градусов.

Список готовых тем и полезных инструментов для улучшения внешнего вида вашего Стартового сайта можно найти в Магазине приложений Эквида, во вкладке Дизайн.

Создание CSS темы (продвинутый уровень)

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

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