Дизайн Эквида: полная инструкция по оформлению интернет-магазина

24 марта 2017 – Евгений Казначеев, Эквид
Как выделиться среди конкурентов: уникальное торговое предложение и правила его создания
24 марта 2017 – Евгений Казначеев, Эквид

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

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

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

Мы поделили все способы на 3 уровня, в зависимости от глубины изменений, времени и умений, которые вам потребуются.

Уровень 1: Быстро и просто

Fast and Easy

Изменения, которые можно сделать за несколько кликов.

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

1. Оформите стартовый сайт Эквида и начните продавать, если собственного сайта пока нет

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

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

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

2. Быстрые изменения дизайна для тех, у кого есть свой сайт

Эквид без проблем встраивается и гармонично выглядит на сайте на WordPress, Adobe Muse, Wix, Tilda или любой другой платформе или конструкторе. Изменить оформление такого магазина просто:

Шаг 1. Темы для конструкторов сайтов

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

Для сайта на WordPress

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

Для сайта на Adobe Muse

Для сайта на Tilda шаблоны можно выбрать после регистрации на tilda.cc.

Для сайта на Wix выберите подходящий шаблон в специальном разделе на wix.com.

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

Цветовые настройки магазина на Wix

Шаг 2. Автоопределение цвета

Теперь Эквид умеет автоматически подстраивать цвета и оформление витрины под дизайн сайта, на который установлен магазин.

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

Автоопределение цвета работает в Эквид-магазине по умолчанию. Если в вашем магазине оно по каким-то причинам отключено, включите на странице Настройки → Дизайн:
Автоопределение цвета в Эквид-магазине

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

3. Параметры внешнего вида

Вам нужно убрать поле «Количество» на странице товара, потому что все изделия в магазине в единственном экземпляре? Или может быть хотите скрыть артикул товара?

Такие элементы оформления магазина можно менять, добавлять или убирать в один клик на странице Настройки → Дизайн в панели управления Эквид-магазина:
Параметры внешнего вида в Эквиде

4. Язык витрины магазина

Витрина Эквид-магазина переведена более чем на 45 языков. Когда покупатель заходит на сайт, Эквид автоматически определяет подходящий язык на основе настроек браузера посетителя.

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

Например, если вы продаете только на Россию и не готовы сотрудничать с иностранными клиентами. Тогда в панели управления Эквид-магазина перейдите на страницу Настройки → Общие → Языки и отключите все варианты, кроме русского.

Уровень 2: Экспериментатор

Adventurer

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

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

Всё это можно сделать без специальных технических навыков. Попробуйте эти способы:

1. Приложения для дизайна магазина

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

Store Designer

Необходимо перекрасить кнопку «Купить» в красный цвет? Установите приложение Store Designer и настраивайте цвета кнопок, текстов и фона в своём Эквид-магазине.

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

Попробуйте Store Designer бесплатно в течение недели, далее — около 295 рублей ($4,99) в месяц.

Theme Designer

Похожее приложение для оформления Эквид-магазина — Theme Designer.

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

Настройка темы с собственными цветами стоит около 1300 рублей ($22). Перед оплатой вы можете предварительно просмотреть, как будет выглядеть магазин, и, если нужно, что-то исправить.
Theme Designer

В целом приложение Theme Designer не такое удобное в работе, как Store Designer, зато пользоваться многими инструментами можно бесплатно.

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

2. Готовые решения из Базы знаний

В Базе знаний собраны ответы на частые вопросы о работе Эквид-магазина. Мы постоянно пополняем её новыми статьями с советами и инструкциями.

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

По сути все эти решения — кусочки кода, который нужно просто скопировать и вставить в CSS-тему Эквид-магазина на странице Настройки → Дизайн → CSS-темы пользователя в панели управления.

Например, чтобы изменить иконку корзины, на странице Настройки → Дизайн создайте новую CSS-тему, добавьте в неё нужный код и сохраните:
CSS-тема пользователя Эквида

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

2. Готовые CSS-темы

Оформите Эквид-магазин нестандартно с помощью одной из десятков готовых тем от наших партнеров-разработчиков. Выбрать и купить готовую CSS-тему можно на Thematizr.com.

На сайте Thematiz.com есть темы, подходящий под любой дизайн. Их можно использовать без специальных знаний о CSS

На сайте Thematiz.com есть темы, подходящий под любой дизайн. Их можно использовать без специальных знаний о CSS

Добавить CSS-тему можно в панели управления на странице Настройки → Дизайн.

4. Разработка индивидуальной темы

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

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

Уровень 3: Мастер

Veteran

Для тех, кто хочет полностью переделать дизайн магазина и разбирается в HTML, CSS и API.

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

Если вы технически подкованы (или наняли специалиста-разработчика), то можете переделать свой Эквид-магазин самостоятельно с помощью создания собственной CSS-темы или API Эквида.

1. Собственная CSS-тема

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

Создайте собственную тему на странице Настройки → Дизайн

Создайте собственную тему на странице Настройки → Дизайн

CSS-тема создается с нуля. Для начала прочитайте инструкцию «Как изменить дизайн в Эквиде» и посмотрите примеры в Базе знаний.

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

2. Используйте API Эквида, чтобы добавить к магазину новые возможности

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

Например, создать новую CSS-тему и использовать её для собственного магазина, магазинов своих клиентов, или продавать всем желающим.

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

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

***

Читайте также: Как сделать профессиональные картинки для категорий товаров.

Об авторе

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

Будьте в курсе!

Подпишитесь на еженедельную подборку вдохновляющих статей по электронной коммерции

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

Читайте также