Настройка оформления интернет-магазина. Часть 3 - Настройки темы

Пошаговые мануалы /

Настройки темы


На страницу настроек темы можно попасть из подраздела “Дизайн” раздела “Сайт” нажав на ссылку “Настройки темы”.

Настройки темы
Рисунок 3. Настройки темы

В верхнем углу страницы слева находится кнопка в виде стрелки, нажатие которой откроет предыдущую страницу бэк-офиса интернет-магазина. Ниже нее размещены следующие функциональные элементы:
  • выпадающий список, позволяющий выбрать стандартный или же ранее сохраненный вариант настройки темы (Позиция 1, Рис. №3);
  • секция настроек с их заголовками (Позиция 2, Рис. №3);
  • чекбокс, позволяющий сохранить текущие настройки в качестве одного из их вариантов (Позиция 3, Рис. №3);
  • кнопка “Сохранить”, нажатие которой приведет к сохранению изменений в текущий вариант настройки (Позиция 4, Рис. №3).

Кроме вышеперечисленных функциональных блоков страницы “Настройки темы” на ней может присутствовать еще один блок под названием “Настройка темы на сайте”. Он доступен не для всех тем, а присутствующие в его редакторе параметры могут отличаться в различных темах оформления интернет-магазина. Достаточно содержательные наборы настроек есть у тем “Мода”, “Металлик” и “Зеленый лист” и др.

Воспользовавшись редактором блока “Настройка темы на сайте” можно изменить следующие параметры темы:
  • цвет элементов дизайна;
  • цвет “кнопок”;
  • фоновое изображение на страницах;
  • шрифт страницы;
  • “шапку” страницы.

Настройка темы на сайте
Если нажать ссылку “Настроить тему на сайте”, откроется главная страница вашего интернет-магазина с панелью редактора, размещенной сверху нее (Позиция 3. Рис. №4).

Страница с панелью редактора настроек
Рисунок 4. Страница с панелью редактора настроек

Все внесенные изменения будут видны на любой странице сайта. Это позволит сравнивать различные значения параметров на разных страницах интернет-магазина для выбора оптимальных для текущей темы. Чтобы сохранить внесенные изменения следует нажать кнопку “Сохранить”, для отмены изменений и возврата прежних значений воспользуйтесь ссылкой “Отменить” (Позиция 1, Рис. №4). Чтобы выключить верхнее меню редактора настроек нажмите кнопку “Выключить”, тогда как нажатие ссылки “Вернуться в бэк-офис” откроет прежнюю страницу настроек темы оформления (Позиция 2, Рис. №4).

Текущий вариант темы
В блоке “Текущий вариант темы” можно выбрать один из ранее созданных вариантов настроек оформления темы или удалить один из них. После выбора из выпадающего списка одного из вариантов появляется возможность редактировать его настройки, отражаемые в правой части страницы. После выбора варианта оформления темы и (или) внесения в него изменений следует нажать кнопку “Сохранить” для их внедрения в функционал интернет-магазина.

Секция настроек
Ниже на Рисунке №5 показана секция настроек со всеми открытыми ее заголовками.

Настройки оформления темы
Рисунок 5. Настройки оформления темы

Названия секций:
  • Цвета
  • Границы
  • Фон
  • Кнопки
  • Шрифты
  • Изображения

Цвета
Секция “Цвета” позволяет выбрать цвет отображения следующих элементов:
  • Текст ссылки в основной панели
  • Тень ссылок, находящихся в шапке и подвале
  • Ссылка меню, находящаяся в шапке и подвале
  • Текст страницы
  • Выделенный текст
  • Альтернативный текст
  • Ссылка меню при наведении на нее указателя мыши, активный элемент меню
  • Ссылки в боковой панели и их тень
Нажатие по квадратику образца цвета, а также после клика по коду цвета откроется визуальное средство выбора нужного цвета. Выбрать его можно как посредством визуального средства, так и простым вводом кода цвета.

Выбор цвета
Рисунок 6. Выбор цвета

Границы
В секции “Границы” можно устанавливать цвет:
  • Обводки элементов форм;
  • Подчеркивания и разделителя боковой панели с основной панелью.
Выбор нужного цвета осуществляется вышеописанными способами.

Фон
Секция “Фон” позволяет поменять значения следующих параметров фона:
  • Выбор между изображением и однотонным цветом фона;
  • Местоположение изображения
  • Повтор изображения
  • Прокрутка изображения
  • Фон основной панели сайта
  • Фон, а также градиент боковой панели сайта
Значения местоположения, повтора и прокрутки фона важны только при использовании фонового изображения. Они позволяют указать способ отображения фона вашего интернет-магазина на всех страницах сайта.

Кнопки
В секции “Кнопки” есть возможность задать цвета следующих параметров кнопок:
  • Текст кнопок
  • Фон стандартных кнопок
  • Фон кнопок покупка\оформление заказа
  • Фон кнопок удаления товара
  • Фон кнопок пагинации и фон выбранного одного из свойств товара
Выбор цвета для любого из параметров выполняется по аналогии с описанными в разделе “Цвета” способами.

Шрифты
Секция “Шрифты” позволяет выставить один или всю гарнитуру шрифтов для обычного и выделенного текста. Выбору доступны следующие семейства и наименования шрифтов:
  • Sans-Serif
    • Helvetica
    • Arial
    • Impact
    • Lucida Grande
    • Trebuchet MS
    • Verdana
    • DejaVu Sans
  • Serif
    • Garamond
    • Times New Roman
    • Georgia
    • Palatino
  • Monospace
    • Monaco/Lucida Console
    • Courier New

Изображения
В секции “Изображения” можно выбрать или загрузить логотип сайта, а также изображение в форме поиска. Пункт “Отображать название магазина?” позволяет управлять видимостью названия интернет-магазина при использовании логотипа. Если в логотипе магазина название уже фигурирует, то его повторное отображение в виде текста может оказаться не желательным.

Сохранение результатов настройки
Для сохранения всех внесенных изменений в параметры настроек необходимо нажать кнопку “Сохранить”, находящуюся внизу страницы.

Технические детали операции сохранения
После сохранения результатов проводимых изменений система меняет Liquid-объекты “settings”, а также создает файл .css на основе файла .css.liquid. В списке файлов новый сгенерированный файл виден не будет.

Содержание:

Настройка оформления интернет-магазина. Часть 1 — Общее описание страницы
Настройка оформления интернет-магазина. Часть 2 — Выбор темы оформления интернет-магазина
Настройка оформления интернет-магазина. Часть 3 — Настройки темы
Настройка оформления интернет-магазина. Часть 4 — Редактирование темы интернет-магазина
Настройка оформления интернет-магазина. Часть 5 — Страница “Файлы”

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.