Как изменить дизайн в Эквиде

Дата последнего изменения:
  1. Важность дизайна
  2. Как изменить дизайн Эквида?
  3. Как применить изменения в CSS только к конкретным страницам в магазине?
  4. Ой, кажется я напутал с CSS кодом и получил не то, что хотел. Как отменить изменения?

Важность дизайна

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

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

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

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

Как изменить дизайн Эквида?

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

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

Можно включить тему «Хамелеон» (доступна для пользователей плагина для WordPress.org) и позволить Эквиду автоматически подстроить свою цветовую под дизайн страницы, на которой установлен магазин. 

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

Готовая CSS тема

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

Кроме того, вы можете купить готовую CSS тему для Эквид и установить ее. Перейдите по ссылкам, чтобы ознакомиться с темами для Эквид, которые предлагают сторонние веб дизайнеры: темы от Thematizr, E-shop и другие.

Тема «Хамелеон»

Если ваш Эквид магазин установлен с помощью официального плагина для WordPress.org, вы можете воспользоваться отличным решением для автоматической подстройки дизайна магазина под стиль вашего сайта — темой «Хамелеон».

«Хамелеон» определит основные цвета вашего сайта и использует их в витрине Эквид магазина, изменив стандартные цвета текста, ссылок и кнопок.

Чтобы включить тему «Хамелеон», в Панели управления WordPress, перейдите во вкладку «Магазин Ecwid» → «Дополнительные». Включите тему, поставив галочку, и сохраните изменения:

Создание CSS темы

Вы также можете написав собственную CSS тему, создав уникальный дизайн для магазина. CSS (en. Cascading Style Sheets - Каскадные таблицы стилей) — специальный язык для описания внешнего вида HTML документа (веб страницы).

CSS правило имеет следующую структуру:

селектор {

свойство: значение

}

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

div.button {

color: #fff

}

Данное правило задает элементу с селектором “div.button” свойство «цвет» со значением «белый».

Список CSS свойств и допустимых для них значений можно найти в Справочнике CSS от HTML Book. 

Как изменить внешний вид элемента

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

Для этого мы будем использовать веб-инспектор браузера. Чтобы открыть веб-инспектор: 

  • в браузере Google Chrome, Opera и FireFox кликните по интересующем вас элементу правой кнопкой мыши и выберите «Инспектировать элемент» .
  • в браузере Internet Explorer:
  1. Нажмите F12, чтобы открыть Инструменты разработчика
  2. Нажмите Ctrl + B
  3. Кликните по нужному элементу мышкой.
  • в браузере Safari включите меню «Разработка» (ссылка на инструкцию). Кликнув правой кнопкой мыши по элементу, выберите «Инспектировать элемент». 

Так выглядит веб-инспектор в браузере Google Chrome.

 

На снимке экрана в качестве элемента выбрана текстовая метка «В наличии». Инспектор показывает класс данного элемента и CSS правило, которое к нему применяется. Правило задает метке зеленый цвет оттенка #0e766d. 

Пример CSS кода

Предположим, что мы хотим задать метке «В наличии» другой цвет и сделать шрифт покрупнее. Пусть метка будет синего цвета (оттенок #4285F4), а размер шрифта — 16px. 

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

NOTE: Лучше всего выбрать редактор простого текста, например WordPad (Блокнот) или редактор, поддерживающий CSS разметку типа Sublime Text. Текстовые редакторы типа Word, OpenOffice и прочие могут отформатировать текст и в итоге получится некорректный CSS код. 

Открываем фигурную скобку после названия класса и задаем свойства «цвет» (color) и «размер шрифта» (font-size): 

div.ecwid-productBrowser-details-inStockLabel {

color: #4285F4;

font-size: 16px;

}

NOTE: Обратите внимание на то, что свойства отделяются точкой с запятой. Последнее свойство обычно не отделяется точкой с запятой, но если вы ее поставите — ничего страшного! Правило будет работать, а вам не нужно будет помнить об этом, если решите отредактировать код в дальнейшем. 

Код готов. Копируем его из текстового редактора в CSS тему для Эквида. В Панели Управления магазином перейдите на страницу Дизайн. Если вы уже создали свою CSS тему, добавьте код в тело темы и не забудьте активировать тему и сохранить изменения. 

Если у вас активна Стандартная тема, нужно создать новую тему, так как вносить изменения в Стандартную тему нельзя:

  • кликните «Новая CSS тема»
  • скопируйте код в тело темы
  • активируйте новую тему и сохраните изменения. 

Теперь вы можете вернуться на страницу товара, обновить ее и проверить, изменился ли цвет и размер шрифта у надписи «В наличии». 

Если вы не видите никаких изменений на странице, напишите нам! Мы проверим ваш код и поможем найти решение. 

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

Некоторые изменения в CSS можно применять не ко всему магазину, а к конкретным страницам товаров или категорий. Например, можно для одних товаров кнопку «Купить» можно сделать красной, а для других - синей. Примеры таких CSS кодов вы найдете в статье: How to apply CSS changes only to particular pages in Ecwid 

Ой, кажется я напутал с CSS кодом и получил не то, что хотел. Как отменить изменения?

Ничего страшного! Просто включите стандартную тему в настройках на странице Дизайн и магазин примет первоначальный вид.

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 3 из 8
Остались вопросы?
Обратитесь за помощью
  • Форум

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

  • Связь с техподдержкой

    Есть вопросы? Свяжитесь с нами, мы будем рады вам помочь.

  • Состояние сервиса

    Страница с информацией о запланированных технических работах и текущем состоянии сервиса.