Страница "Настройка оформления магазина"

Материал из Insales Wiki
Перейти к: навигация, поиск

Общее описание страницы "Настройка оформления магазина"

На эту страницу можно попасть, выбрав в разделе "Сайт" подраздел "Дизайн".

Страница предназначена для изменения внешнего вида интернет-магазина.


Design 1b.png
Рис. 1. Настройка управления магазина.


Блок Основная тема- текущая используемая тема(та, что видна клиентам).

  • Настройка темы - позволяет изменить настройки текущей темы;
  • Сделать копию - создает копию темы в качестве альтернативной
  • Редактор шаблонов - позволяет отредактировать текущую тему и заливать в неё файлы
  • История изменений - логи редактирования темы
  • Сохранить тему в файл - сохраняет архив со всеми фалами и шаблонами темы на локальное устройство
  • Загрузить тему из файла - позволяет загрузить архив темы для плаформы Insales(например ранее сохраненную с помощью ссылки выше)
  • Бэкапы/точки восстановления - раздел в котором вы можете создавать точки восстановления темы и загружать их.


Блок Установленные темы- отображает список остальных установленных альтернативных тем.

  • Сделать основной - делает данную тему основной. Та тема, что была основной до этого становится альтернативной.
  • Предпросмотр - ссылка для просмотра магазина на данной теме.
  • Сделать мобильной темой - делает данную тему основной мобильной темой. Доступно для тарифа Бизнес и выше.



Сохранение и восстановление темы

Backup.jpg

Область 1 - Для создания новой точки восстановления. Область 2- слева на право

  • Установить тему из данного точки восстановления
  • Скачать тему из данной точки восстановления.

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

  • Удалить точку восстановления

Смена темы оформления магазина

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Галерея тем".


Design 2b.png
Рис. 2. Выбор темы магазина.


На странице "Стандартные темы оформления" представлен список стандартных тем.

Здесь можно изменять вид страниц магазина на один из предлагаемых предопределённых.

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

  • ссылка на страницу описания темы и её возможностей с возможностью перейти в демо-магазин
  • кнопка "Установить как основную" и "Установить как основную альтернативную"
  • значок Palette.png возле названий тем, имеющих возможность "Настройка".

Для смены текущей темы на выбранную - следует щёлкнуть мышкой по кнопке "Установить как основную".

При смене темы товары, равно как и все остальные данные, никуда из магазина не исчезнут.


На выбор предлагаются следующие бесплатные готовые темы:

  • Телескоп
  • Техника
  • Стиль
  • Лайт
  • Классика
  • Лёгкость
  • Мода
  • Зелёный лист
  • Лето
  • Модерно
  • Металлик
  • Бутик
  • Lamp
  • Hi-Tech
  • Tenderness

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

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


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

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Настройка темы".


Thema 1b.png
Рис. 3. Настройка темы.


В левом верхнем углу страницы размещена кнопка возврата на страницу, с которой была вызвана настройка темы Back ico.png Ниже размещены:

  • кнопка вызова редактора, позволяющего настроить вид страницы сайта, непосредственно наблюдая результат настройки на экране (Рис. 3. поз. 1.);
  • выпадающий список для выбора ранее сохранённых или стандартных вариантов настройки темы (Рис. 3. поз. 2.);

Правее размещены:

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

  • цветом элементов дизайна,
  • шрифтом страницы,
  • видом "шапки" страниц,
  • цветом "кнопок",
  • фоновым изображением на страницах.


Примечание: страница "Настройки темы" доступна не для всех тем. Кроме того, в разных темах набор настраиваемых параметров различен. Для некоторых тем есть уже готовые варианты настроек. Хорошие готовые наборы есть у тем: "Металлик", "Мода", "Зеленый лист". Также есть варианты для тем "Лайт" и "Телескоп".

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

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

На одной страничке панели редактора настраиваются цвета различных элементов страниц:

Thema 2b.png

Другая страничка панели редактора обеспечивает выбор шрифтов и размещения фоновых изображений:

Thema 3b.png

Результат изменения настроек можно видеть на любой странице сайта, пользуясь навигацией по сайту. Для сохранения новых настроек следует щёлкнуть по кнопке "Сохранить", а для возврата к прежним - по ссылке "Отменить". Заканчивается сеанс редактирования использованием ссылки "Вернуться в бэк-офис".

Кнопка "Выключить" применяется для скрытия панели редактора.

Редактор на сайте пока работает в пробном режиме и доступен только в темах "Лайт" и "Зелёный лист". После доработки с учётом замечаний редактор на сайте будет доступен для всех тем оформления.

Текущий вариант темы

В секции "Текущий вариант темы" есть возможность выбрать из списка ранее созданных вариантов настройки нужный или сохранить текущий вариант с указанным Вами названием.

Выпадающий список предназначен для переключения ранее созданных вариантов или удаления одного из них (ссылка "удалить этот вариант").

Если Вы хотите переключить сайт на ранее сохранённый вариант настройки, то выберите нужный вариант из списка.


Секции настроек

На рисунке Рис. 4. Настройки. показаны полностью развёрнутые секции настроек.


Design 5b.png
Рис. 4. Настройки.


Секции:


Цвета

В секции "Цвета" можно выбрать, каким цветом будут отображаться:

  • Обычный текст.
  • Выделенный текст 1.
  • Выделенный текст 2.
  • Заголовки в шапке.
  • Текст в шапке.
  • Текст ссылки.
  • Ссылка при нажатии.
  • Границы.
  • Фон.
  • Фон блоков.

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


Design 6b.png
Рис. 5. Выбор цвета.

Шрифты

В секции "Шрифты" можно выбрать гарнитуру шрифтов "Обычный текст" или "Выделенный текст" из списка:

  • Sans-serif
    • Helvetica/Arial
    • Impact
    • Lucida Grande
    • Trebuchet MS
    • Verdana
    • DejaVu
  • Serif
    • Garamond
    • Georgia
    • Palatino
    • Times New Roman
  • Monospace
    • Courier New
    • Monaco/Lucida Console

Шапка сайта

В секции "Шапка сайта" содержатся настройки:

  • Логотип сайта
  • Выводить название магазина?
  • Изображение справа
  • Цвет шапки

Чекбокс возле каждого пункта настроек позволяет включать и выключать использование соответствующей возможности. Кнопки "Обзор" возле пунктов "Логотип сайта" и "Изображение справа" позволяют выбрать на локальном компьютере нужный файл и загрузить его на сервер. Правее кнопки размещена ссылка на файл, который используется в текущем варианте настройки. Цвет шапки настраивается так же, как и в секции "Цвета"

Фоновое изображение

В секции "Фоновое изображение" содержатся настройки:

  • Изображение,
  • Местоположение,
  • Повтор,
  • Прокрутка,

позволяющие загрузить выбрать на локальном компьютере нужный файл и загрузить его на сервер (п. "Изображение"), разместить на страницах сайта (п. "Местоположение") и управлять отображением (п.п. "Повтор" и "Прокрутка").

Сохранение настройки

После изменения значений выбранных параметров нужно щёлкнуть по кнопке "Сохранить" в нижней части страницы "Настройка темы".

Если пометить чекбокс "Сохранить текущие настройки как вариант", то будет предложено ввести название варианта, под которым и будет сохранена данная совокупность настроек.

Что изменяет настройка

Реально в результате изменения настроек меняются Liquid-объект "settings" и на основе файла *.css.liquid генерируется соответствующий файл *.css, подключенный через шаблоны. В общем списке файлов сгенерированный файл не показывается.

Редактирование темы магазина

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Редактор тем".

Редактирование темы позволяет произвольно менять вид страниц магазина.

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


Design 3b.png
Рис. 6. Редактор темы.


На странице размещён заголовок (Рис. 6. поз. 2.), левее его - кнопка для возврата на страницу, откуда была вызвана текущая Back ico.png (Рис. 6. поз. 1.)

В рамках редактирования темы имеется возможность:

  • Зона просмотра/редактирования текущего элемента (Рис. 6. поз. 11.)

Настройка темы шаблона Hi-Tech

Внесение изменений в шаблоны

Шаблоны - это текст на языке HTML со вставками на языке Liquid. Для внесения изменений в шаблоны нужно знать эти языки.

Начальную информацию о Liquid можно прочитать тут:

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

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

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

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

  • HTML - описывает общее оформление всех страниц магазина. В этом шаблоне имеется указание, в каком месте будет вставлена содержательная часть конкретной страницы. Содержательная часть страницы описывается другими шаблонами, в зависимости от типа страницы. Тип страницы соответствует названию шаблона.
  • Главная - описывает оформление главной страницы магазина.
  • Категория - описывает оформление страниц магазина, являющихся какой либо из категорий или подкатегорий витрины.
  • Товар - описывает оформление страниц магазина, являющихся описанием какого-либо товара.
  • Корзина - описывает оформление страницы магазина, отображающей корзину покупателя.
  • Страница - описывает оформление страниц магазина, которые могут содержать дополнительную информацию для покупателя.
  • Поиск - описывает оформление страницы магазина с результатами поиска товаров в магазине.
  • Блог - описывает оформление страницы магазина со списком статей
  • Статья - описывает оформление страницы магазина со статьёй
  • Сравнение - описывает оформление страницы магазина со сравнением товара
  • 404 - описывает оформление не существующей страницы магазина

Для внесения изменений в шаблон нужно шёлкнуть по ссылке под ним. Появится окно для редактирования с текстом выбранного файла шаблона. Над окном показан путь размещения и имя файла, под окном имеется кнопка "Сохранить" и ссылка "отменить" для завершения редактирования.

Более подробно о шаблонах можно прочитать в следующих статьях:

Создание сниппетов

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

Внесение изменений в стили и скрипты

В раздел стили и скрипты попадают файлы с расширениями .css или .js.

Для внесения изменений в файлы нужно щёлкнуть по ссылке под ним. Появится окно для редактирования с текстом выбранного файла стиля. Под окном имеется кнопка "Сохранить" и ссылка "отменить" для завершения редактирования.

В панели "Стили и скрипты" для изменения предлагаются следующие стили (список может отличаться в зависимости от темы):

  • content-style.css - обязательный файл, определяет внешний вид статей полных описаний товара и описаний категорий,
  • ie6.css - используется для корректировки внешнего вида сайта в браузере IE6.
  • reset.css - используется для отмены настроек стилей браузера.
  • style.css - главный файл стилей, в котором задаётся вид сайта.

В панели также есть возможность удалить любой из этих файлов.

Загрузка новых файлов

В панели "Файлы" имеется возможность загрузить новые файлы, которые можно использовать в шаблонах. При этом, если имя файла оканчивается на .js или на .css, он после загрузки на сервер отображается в панели "Стили и скрипты", Все остальные файлы попадают в панель "Файлы". В основном - это файлы изображений.

В панели также есть возможность удалить любой из имеющихся файлов, щёлкнув по иконке Del ico.png.

Для того чтобы заменить файл, надо его сначала удалить, а потом загрузить новый - одноименный. Имена файлов регистрозависимые.

Для создания фоновых градиентов и других цветных или имеющих форму объектов на любых страницах магазина можно использовать формат SVG (подробнее об SVG на wikipedia). Файлы *.SVG размещаются вместе с другими файлами темы. Ссылки на файлы из текста страниц должны при этом выглядеть как *.SVG.PNG, поскольку файлы после их загрузки преобразуются в формат PNG.

Для размещения файлов не входящих в шаблоны, следует пользоваться страницей "Файлы".

Настройка стиля оформления заказа и кабинета клиента

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

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

В общем случае (для других тем оформления и индивидуальных дизайнов) это можно сделать в разделе "Сайт", подразделе "Дизайн" по ссылке "Редактор темы", добавив файл custom_checkout.css со стилями для объектов, отображаемых в процессе оформления заказа или при входе в личный кабинет покупателя. Этот файл будет подключаться на странице оформления заказа, и в нём Вы сможете настроить логотип, цвета и фон в тон используемой темы. Посмотреть пример заполнения такого файла можно тут: custom_checkout.css.

Страница "Файлы"

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Файлы".


Design 4b.png
Рис. 7. Страница "Файлы".


На странице размещён заголовок с иконкой справки, левее - кнопка для возврата на страницу, откуда была вызвана текущая Back ico.png

На странице "Файлы" Вы можете загружать файлы и изображения, которые потом будете использовать на страницах сайта, в блоках и в описаниях категорий и товаров. Именно отсюда они будут доступны для вставки из редактора TinyMCE в операциях "вставить изображение" или "вставить ссылку".

Для выбора и загрузки файлов используйте форму (Рис. 7. поз. 1.). На размер загружаемого файла имеется ограничение - не может быть загружен файл размером более 10 мегабайт. При попытке загрузить такой файл загрузка запущена не будет, а будет показано сообщение об ошибке.

Список уже загруженных файлов в виде набора уменьшенных изображений картинок или характерных иконок для файлов других типов (.pdf, .xls, .doc, .mp3), а также имя файла, размер файла можно наблюдать в нижней части страницы.

Для поиска по названию файла можно воспользоваться формой поиска (Рис. 7. поз. 2.)

Для удаления нужных файлов нужно выделить их и выбрать варианта "Удалить" в выпадающем списке действий с файлами. (Рис. 7. поз. 3.)

Любые файлы, которые Вы загрузите на странице "Файлы" будут доступны в корне сайта магазина, кроме ранее описанных файлов скриптов (*.css, *.js), некоторых файлов со специальными именами (например sitemap.xml), файлов с мультимедиа-контентом (то есть файлов с именами *.gif, *.png, *.jpg, *.jpeg, *.bmp, *.ico, *.swt, &.svg, *.mp3, *.mp4 и т.д.).

Например, Вы можете загрузить сюда специальный файл robots.txt - он будет доступен по адресу site.ru/robots.txt. Об использовании и правилах оформления этого файла можно прочитать здесь: Использование robots.txt