Страница "Настройка оформления магазина" — различия между версиями

Материал из Insales Wiki
Перейти к: навигация, поиск
(Новая: =Страница "Настройка оформления магазина"= На эту страницу можно попасть, войдя в подраздел "Дизайн" р...)
 
(Смена темы оформления магазина)
 
(не показана 321 промежуточная версия 5 участников)
Строка 1: Строка 1:
=Страница "Настройка оформления магазина"=
+
__TOC__
  
На эту страницу можно попасть, войдя в подраздел "Дизайн" раздела "Витрины"
+
=Общее описание страницы "Настройка оформления магазина"=
  
Страница предназначена для изменения внешнего вида интернет-мазазина.
+
На эту страницу можно попасть, выбрав в разделе "Сайт" подраздел "Дизайн".
  
Для этого имеется несколько возможностей:
+
Страница предназначена для изменения внешнего вида интернет-магазина.
  
* [[Смена темы магазина|сменить тему оформления магазина]],
 
* [[Редактирование темы магазина|отредактировать выбраннyю тему]],
 
* [[Внесение изменений в шаблоны|внести изменения в шаблоны]],
 
* [[Внесние изменений в стили|внести изменения в стили]].
 
  
==Смена темы магазина===
+
[[Изображение:Design_1b.png]]<br>'''Рис. 1. Настройка управления магазина.'''
  
Позволяет ...
 
На выбор предлагаются следующие готовые темы:
 
  
#Телескоп
+
Блок '''Основная тема'''- текущая используемая тема(та, что видна клиентам).
#Техника
+
 
#Стиль
+
* '''Настройка темы''' - позволяет изменить настройки текущей темы;
#Лайт
+
* '''Сделать копию''' - создает копию темы в качестве альтернативной
#Классика
+
* '''Редактор шаблонов''' - позволяет [[#Редактирование темы магазина|отредактировать текущую тему и заливать в неё файлы]]
#Лёгкость
+
* '''История изменений''' - логи редактирования темы
#Мода
+
* '''Сохранить тему в файл''' - сохраняет архив со всеми фалами и шаблонами темы на локальное устройство
#Лето  
+
* '''Загрузить тему из файла''' - позволяет загрузить архив темы для плаформы Insales(например ранее сохраненную с помощью ссылки выше)
#Зеленый лист
+
* '''Бэкапы/точки восстановления''' - раздел в котором вы можете создавать точки восстановления темы и загружать их.
 +
 
 +
 
 +
Блок '''Установленные темы'''- отображает список остальных установленных альтернативных тем.
 +
 
 +
* '''Сделать основной''' - делает данную тему основной. Та тема, что была основной до этого становится альтернативной.
 +
* '''Предпросмотр''' - ссылка для просмотра магазина на данной теме.
 +
* '''Сделать мобильной темой''' - делает данную тему основной мобильной темой. Доступно для тарифа Бизнес и выше.
 +
 
 +
 
 +
* '''Галерея тем оформления''' - позволяет [[#Смена темы оформления магазина| утсноваить тему оформления магазина]] на другую из предлагаемого списка;
 +
 
 +
 
 +
 
 +
==Сохранение и восстановление темы==
 +
 
 +
[[Файл:Backup.jpg]]
 +
 
 +
Область 1 - Для создания новой точки восстановления.
 +
Область 2- слева на право
 +
* Установить тему из данного точки восстановления
 +
* Скачать тему из данной точки восстановления.
 +
Вы сможете добавлять, удалять нужные файлы, редактировать существующие прямо у себя на компьютере. Тема скачивается в виде ZIP-архива, содержащего файлы в структуре директорий. Архив следует распаковать, сохраняя эту структуру, файлы, подлежащие правке - отредактировать. После того как Вы сделали собственную тему или отредактировали существующую, нужно вновь запаковать её в ZIP-архив, сохранив структуру директорий. После этого можно загрузить её обратно на сервер и использовать в оформлении магазина.
 +
* Удалить точку восстановления
 +
 
 +
=Смена темы оформления магазина=
 +
 
 +
На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Галерея тем".
 +
 
 +
 
 +
[[Изображение:Design_2b.png]]<br>'''Рис. 2. Выбор темы магазина.'''
 +
 
 +
 
 +
На странице "Стандартные темы оформления" представлен список стандартных тем.
 +
 
 +
Здесь можно изменять вид страниц магазина на один из предлагаемых предопределённых.
 +
 
 +
Предлагаемые темы представлены в виде таблицы, в левой колонке которой показан скриншот страницы магазина. В правой колонке для каждой темы указано название и содержатся:
 +
*ссылка на страницу описания темы и её возможностей с возможностью перейти в демо-магазин
 +
*кнопка "Установить как основную" и "Установить как основную альтернативную"
 +
*значок [[Изображение:palette.png]] возле названий тем, имеющих возможность [[#Внесение изменений в настройки|"Настройка"]].
 +
 
 +
Для смены текущей темы на выбранную - следует щёлкнуть мышкой по кнопке "Установить как основную".
 +
 
 +
''При смене темы товары, равно как и все остальные данные, никуда из магазина не исчезнут.''
 +
 
 +
 
 +
На выбор предлагаются следующие бесплатные готовые темы:
 +
 
 +
*<b>Телескоп</b>
 +
*<b>Техника</b>
 +
*<b>Стиль</b>
 +
*<b>Лайт</b>
 +
*<b>Классика</b>
 +
*<b>Лёгкость</b>
 +
*<b>Мода</b>
 +
*<b>Зелёный лист</b>
 +
*<b>Лето</b>
 +
*<b>Модерно</b>
 +
*<b>Металлик</b>
 +
*<b>Бутик</b>
 +
*<b>Lamp</b>
 +
*<b>Hi-Tech</b>
 +
*<b>[[Tenderness]]</b>
  
 
При смене темы следует иметь в виду, что от выбора темы зависит набор возможностей, которые будет иметь магазин.
 
При смене темы следует иметь в виду, что от выбора темы зависит набор возможностей, которые будет иметь магазин.
Предлагаемые темы содержат возможности, указанные в таблице:
 
  
 +
Предлагаемые темы содержат ряд общих и индивидуальных возможностей, указанных ниже.
 +
 +
<!-- ==Таблица возможностей тем==
 +
===Возможности имеющиеся во всех темах===
 +
*Редактор тем: Шаблоны / Стили и скрипты / Файлы 
 +
*Навигационные панели
 +
*Описание категорий
 +
*Выбор модификаций товара
 +
*Скидки на заказ
 +
*Обратная связь (с покупателем)
 +
*Можно подключить свой домен - включается на тарифах Стартовый, Стандартный, Продвигающий, Бизнес и Бизнес+
 +
*Гибкая настройка стоимости доставки - включается на тарифах Стартовый, Стандартный, Продвигающий, Бизнес и Бизнес+
 +
*Выгрузка на площадки (Яндекс.Маркет и др.) - включается на тарифах Стандартный, Продвигающий, Бизнес и Бизнес+
 +
*Скидки по купонам - включается на тарифах Стандартный, Продвигающий, Бизнес и Бизнес+
 +
*Личный кабинет, накопительные скидки - включается на тарифах Стандартный, Продвигающий, Бизнес и Бизнес+
 +
*Группы клиентов и скидки для них - включается на тарифах Продвигающий, Бизнес и Бизнес+
 +
*Разделение прав пользователей - включается на тарифах Продвигающий, Бизнес и Бизнес+
 +
*Автосинхронизация цен и остатков - включается на тарифах Бизнес и Бизнес+
 +
*Интеграция с 1С - включается на тарифах Бизнес и Бизнес+
 +
 +
===Таблица сравнения индивидуальных возможностей тем===
 
{| border="1"
 
{| border="1"
 
| rowspan="2" |Возможности темы
 
| rowspan="2" |Возможности темы
| colspan="9" |Номер темы в спмске
+
| colspan="12" |Темы. Возможности: <b>0</b> - нет, <b>1</b> - есть, <b>Л</b> - любой, <b>д</b> - ограничено дизайном
|1
 
|2
 
|3
 
|4
 
|5
 
|6
 
|7
 
|8
 
|9
 
 
|-
 
|-
|Баннеры
+
|Телескоп
|1
+
|Техника
|1
+
|Стиль
|1
+
|Лайт
|0
+
|Классика
|0
+
|Лёгкость
|0
+
|Мода
|0
+
|Зелёный<br>лист
|0
+
|Лето
|0
+
|Модерно
 +
|Металлик
 +
|Бутик
 
|-
 
|-
|Старая цена
+
|Редактор тем: Настройки темы
|1
 
|1
 
|1
 
|1
 
|0
 
|1
 
|0
 
|0
 
|0
 
|-
 
|Сопутствующие товары
 
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
|0
 
|0
 
 
|1
 
|1
|0
 
 
|0
 
|0
 
|1
 
|1
|-
 
|Описание подкатегорий
 
|1
 
|1
 
|0
 
 
|1
 
|1
 
|1
 
|1
Строка 87: Строка 138:
 
|1
 
|1
 
|-
 
|-
|Фильтрация товаров по параметрам
+
|Редактор тем: Настройка темы прямо на сайте
|1
 
 
|1
 
|1
 
|1
 
|1
 
|0
 
|0
|1
 
|1
 
|1
 
|1
 
|1
 
|-
 
|Сортировка товаров
 
|1
 
 
|1
 
|1
 
|0
 
|0
|1
 
 
|0
 
|0
 
|1
 
|1
 
|1
 
|1
|1
 
|-
 
|Синхронизация со складом
 
|1
 
|1
 
|0
 
|0
 
|0
 
|0
 
|0
 
|0
 
|0
 
|-
 
|Панели блоков
 
|0
 
 
|0
 
|0
 
|0
 
|0
 
|1
 
|1
 
|0
 
|0
|0
 
|0
 
|0
 
|1
 
 
|-
 
|-
|Навигационные панели
+
|Число готовых вариантов дизайна сайта
 +
(находятся в "Настройки темы")
 +
|4шт.
 
|1
 
|1
 
|1
 
|1
 +
|2шт.
 
|1
 
|1
 
|1
 
|1
 +
|8шт.
 +
|3шт.
 
|1
 
|1
 
|1
 
|1
 +
|7шт.
 +
|2
 +
|-
 +
|Блог
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
|-
 
|Скидки на заказ
 
 
|1
 
|1
 
|1
 
|1
Строка 152: Строка 181:
 
|1
 
|1
 
|-
 
|-
|Выбор модификаций товара
+
|Поиск
 
|1
 
|1
 
|1
 
|1
Строка 160: Строка 189:
 
|1
 
|1
 
|1
 
|1
 +
|1
 +
|0
 +
|0
 
|1
 
|1
 
|1
 
|1
 
|-
 
|-
|Переключатель языков
+
|Панели блоков
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 +
|0
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 +
|0
 +
|0
 +
|0
 
|1
 
|1
|1
 
|-
 
|Уровень вложенности категорий
 
|2
 
|3
 
|2
 
 
|3д
 
 
 
 
|3д
 
|}
 
''Обозначения:'' <b>0 - нет, 1 - есть, Л - любой, д - ограничено дизайном</b>
 
 
==Редактирование темы магазина==
 
 
Позволяет ...
 
 
 
 
 
 
==Внесение изменений в шаблоны==
 
 
Позволяет ...
 
 
Для изменения предлагаются следующие шаблоны:
 
*HTML
 
*Главная
 
*Категория
 
*Товар
 
*Корзина
 
*Страница
 
*Поиск
 
 
==Внесние изменений в стили==
 
 
Позволяет ...
 
 
==Загрузка новых изображений==
 
 
На странице имеется возможность загрузить новые изображения, которые можно использовать в шаблонах и страницах.
 
 
==Сохранение а восстановление темы==
 
 
На странице можно скачать текущую тему. Вы сможете добавлять, удалять нужные файлы, редактировать существующие прямо
 
у себя на компьютере. Тема скачивается в виде ZIP-архива, содержазего файлы в структуре директорий. Архив следует
 
распаковать, сохраняя эту структуру, файлы, подлежвщие правке - отредактировать. После того как Вы сделали
 
собственную тему или отредактировали существующую, нужно вновь запаковать её в ZIP-архив, сохранив структуру
 
директорий. После этого можно загрузить её обратно на сервер и использовать в оформлении магазина.
 
=Страница "Настройка оформления магазина"=
 
 
На эту страницу можно попасть, войдя в подраздел "Дизайн" раздела "Витрины"
 
 
Страница предназначена для изменения внешнего вида интернет-мазазина.
 
 
Для этого имеется несколько возможностей:
 
 
* [[Смена темы магазина|сменить тему оформления магазина]],
 
* [[Редактирование темы магазина|отредактировать выбраннyю тему]],
 
* [[Внесение изменений в шаблоны|внести изменения в шаблоны]],
 
* [[Внесние изменений в стили|внести изменения в стили]].
 
 
==Смена темы магазина===
 
 
Позволяет ...
 
На выбор предлагаются следующие готовые темы:
 
 
#Телескоп
 
#Техника
 
#Стиль
 
#Лайт
 
#Классика
 
#Лёгкость
 
#Мода
 
#Лето
 
#Зеленый лист
 
 
При смене темы следует иметь в виду, что от выбора темы зависит набор возможностей, которые будет иметь магазин.
 
Предлагаемые темы содержат возможности, указанные в таблице:
 
 
{| border="1"
 
| rowspan="2" |Возможности темы
 
| colspan="9" |Номер темы в спмске
 
|1
 
|2
 
|3
 
|4
 
|5
 
|6
 
|7
 
|8
 
|9
 
 
|-
 
|-
 
|Баннеры
 
|Баннеры
Строка 273: Строка 215:
 
|0
 
|0
 
|0
 
|0
 +
|0
 +
|0
 +
|1
 
|0
 
|0
 
|0
 
|0
Строка 278: Строка 223:
 
|0
 
|0
 
|-
 
|-
|Старая цена
+
|АвтоВывод артикула товара на сайт
|1
+
|0
|1
+
|0
 +
|0
 
|1
 
|1
 +
|0
 +
|0
 +
|0
 
|1
 
|1
 
|0
 
|0
|1
 
 
|0
 
|0
 
|0
 
|0
Строка 290: Строка 238:
 
|-
 
|-
 
|Сопутствующие товары
 
|Сопутствующие товары
 +
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|0
 
|0
 +
|1
 +
|1
 +
|1
 
|0
 
|0
|1
 
 
|0
 
|0
 
|0
 
|0
 
|1
 
|1
 
|-
 
|-
|Описание подкатегорий
+
|Старая цена
 +
|1
 +
|1
 
|1
 
|1
 
|1
 
|1
Строка 309: Строка 262:
 
|1
 
|1
 
|1
 
|1
|1
+
|0
 +
|0
 
|-
 
|-
|Фильтрация товаров по параметрам
+
|Сортировка товаров  
 
|1
 
|1
 
|1
 
|1
 +
|0
 
|1
 
|1
 
|0
 
|0
Строка 319: Строка 274:
 
|1
 
|1
 
|1
 
|1
 +
|1
 +
|0
 +
|0
 +
|0
 +
|-
 +
|Фильтрация товаров по параметрам
 
|1
 
|1
 
|1
 
|1
|-
 
|Сортировка товаров
 
 
|1
 
|1
 
|1
 
|1
|0
 
 
|1
 
|1
|0
 
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
|-
 
|Синхронизация со складом
 
 
|1
 
|1
 +
|0
 +
|0
 
|1
 
|1
 +
|-
 +
|Фильтрация товаров по свойствам
 +
|0
 
|0
 
|0
 
|0
 
|0
 
|0
 
|0
 +
|1
 
|0
 
|0
 
|0
 
|0
 
|0
 
|0
 +
|0
 +
|0
 +
|1
 
|0
 
|0
 
|-
 
|-
|Панели блоков
+
|Отзывы на товар
 
|0
 
|0
 
|0
 
|0
 
|0
 
|0
|1
 
 
|0
 
|0
 
|0
 
|0
Строка 353: Строка 316:
 
|0
 
|0
 
|1
 
|1
|-
+
|0
|Навигационные панели
+
|0
|1
+
|0
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
 
|1
 
|1
 
|-
 
|-
|Скидки на заказ
+
|Переключатель языков
 
|1
 
|1
 
|1
 
|1
Строка 375: Строка 331:
 
|1
 
|1
 
|1
 
|1
 +
|0
 +
|0
 +
|0
 
|-
 
|-
|Выбор модификаций товара
+
|Кнопка "Под заказ" при нулевом остатке товара
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|1
 
|-
 
|Переключатель языков
 
|1
 
 
|1
 
|1
 
|1
 
|1
Строка 395: Строка 342:
 
|1
 
|1
 
|1
 
|1
 +
|0
 
|1
 
|1
 
|1
 
|1
 +
|0
 +
|0
 +
|0
 
|-
 
|-
 
|Уровень вложенности категорий
 
|Уровень вложенности категорий
|2
+
|3
 
|3
 
|3
 
|2
 
|2
 
 
|3д
 
 
 
 
 
 
 
|
+
|Л
|}
+
|Л
''Обозначения:'' <b>0 - нет, 1 - есть, Л - любой, д - ограничено дизайном</b>
+
|1
 +
|3
 +
|4
 +
|-
 +
| rowspan="2" |Возможности темы
 +
|Телескоп
 +
|Техника
 +
|Стиль
 +
|Лайт
 +
|Классика
 +
|Лёгкость
 +
|Мода
 +
|Зелёный<br>лист
 +
|Лето
 +
|Модерно
 +
|Металлик
 +
|Бутик
 +
|-
 +
| colspan="12" |Темы. Возможности: <b>0</b> - нет, <b>1</b> - есть, <b>Л</b> - любой, <b>д</b> - ограничено дизайном
 +
|} -->
 +
 
 +
=Настройка темы=
 +
 
 +
На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Настройка темы".
 +
 
 +
 
 +
[[Изображение:Thema_1b.png]]<br>'''Рис. 3. Настройка темы.'''
 +
 
 +
 
 +
В левом верхнем углу страницы размещена кнопка возврата на страницу, с которой была вызвана настройка темы [[Изображение:Back_ico.png]]
 +
Ниже размещены:
 +
*[[#Настройка темы на сайте|кнопка вызова редактора]], позволяющего настроить вид страницы сайта, непосредственно наблюдая результат настройки на экране (Рис. 3. поз. 1.);
 +
*[[#Текущий вариант темы|выпадающий список]] для выбора ранее сохранённых или стандартных вариантов настройки темы (Рис. 3. поз. 2.);
 +
 
 +
Правее размещены:
 +
 
 +
*[[#Секции настроек|набор заголовков свёрнутых секций настроек]], содержащих различные группы настроек (Рис. 3. поз. 3.);
 +
*[[#Сохранение настройки|кнопка "Сохранить" с чекбоксом "Сохранить текущие настройки как вариант"]] (Рис. 3. поз. 4.).
 +
 
 +
Используя страницу "Настройки темы", можно создавать, сохранять и переключать варианты настройки сайта магазина, отличающиеся
 +
*'''цветом''' элементов дизайна,
 +
*'''шрифтом''' страницы,
 +
*'''видом "шапки"''' страниц,
 +
*'''цветом "кнопок"''',
 +
*'''фоновым изображением''' на страницах.
 +
 
 +
 
 +
'''Примечание:''' страница "Настройки темы" доступна не для всех тем. Кроме того, в разных темах набор настраиваемых параметров различен. Для некоторых тем есть уже готовые варианты настроек. Хорошие готовые наборы есть у тем: "Металлик", "Мода", "Зеленый лист". Также есть варианты для тем "Лайт" и "Телескоп".
 +
 
 +
==Настройка темы на сайте==
 +
 
 +
После щелчка по кнопке "Настройка темы на сайте", Вам будет показана стартовая страница сайта магазина, а выше неё - панель редактора, позволяющего менять значения ряда настроек, влияющих на внешний вид всех страниц сайта.
 +
 
 +
На одной страничке панели редактора настраиваются цвета различных элементов страниц:
 +
 
 +
[[Изображение:Thema_2b.png]]<br>
 +
 
 +
Другая страничка панели редактора обеспечивает выбор шрифтов и размещения фоновых изображений:
 +
 
 +
[[Изображение:Thema_3b.png]]<br>
 +
 
 +
Результат изменения настроек можно видеть на любой странице сайта, пользуясь навигацией по сайту. Для сохранения новых настроек следует щёлкнуть по кнопке "Сохранить", а для возврата к прежним - по ссылке "Отменить". Заканчивается сеанс редактирования использованием ссылки "Вернуться в бэк-офис".
 +
 
 +
Кнопка "Выключить" применяется для скрытия панели редактора.
 +
 
 +
Редактор на сайте пока работает в пробном режиме и доступен только в темах "Лайт" и "Зелёный лист". После доработки с учётом замечаний редактор на сайте будет доступен для всех тем оформления.
 +
 
 +
==Текущий вариант темы==
 +
 
 +
В секции "Текущий вариант темы" есть возможность выбрать из списка ранее созданных вариантов настройки нужный или сохранить текущий вариант с указанным Вами названием.
 +
 
 +
Выпадающий список предназначен для переключения ранее созданных вариантов или удаления одного из них (ссылка  '''"удалить этот вариант"''').
 +
 
 +
Если Вы хотите переключить сайт на ранее сохранённый вариант настройки, то выберите нужный вариант из списка.
 +
 
 +
 
 +
==Секции настроек==
 +
На рисунке Рис. 4. Настройки. показаны полностью развёрнутые секции настроек.
 +
 
 +
 
 +
[[Изображение:Design_5b.png]]<br>'''Рис. 4. Настройки.'''
 +
 
 +
 
 +
Секции:
 +
*[[#Настройки темы|Настройки темы]].
 +
*[[#Цвета|Цвета]].
 +
*[[#Шрифты|Шрифты]].
 +
*[[#Шапка сайта|Шапка сайта]].
 +
*[[#Фоновое изображение|Фоновое изображение]].
 +
 
 +
 
 +
 
 +
===Цвета===
 +
В секции "Цвета" можно выбрать, каким цветом будут отображаться:<b>
 +
*Обычный текст.
 +
*Выделенный текст 1.
 +
*Выделенный текст 2.
 +
*Заголовки в шапке.
 +
*Текст в шапке.
 +
*Текст ссылки.
 +
*Ссылка при нажатии.
 +
*Границы.
 +
*Фон.
 +
*Фон блоков.
 +
</b>
 +
После щелчка "мышью" по квадратику с образцом цвета или по полю ввода с кодом цвета, выбранного для правки элемента изображения, появляется средство для выбора цвета указанием нужного. Можно и просто ввести код необходимого цвета в поле ввода.
 +
 
 +
 
 +
[[Изображение:Design_6b.png]]<br>'''Рис. 5. Выбор цвета.'''
 +
 
 +
===Шрифты===
 +
 
 +
В секции "Шрифты" можно выбрать гарнитуру шрифтов '''"Обычный текст"''' или '''"Выделенный текст"'''  из списка:<b>
 +
*Sans-serif
 +
**Helvetica/Arial
 +
**Impact
 +
**Lucida Grande
 +
**Trebuchet MS
 +
**Verdana
 +
**DejaVu
 +
*Serif
 +
**Garamond
 +
**Georgia
 +
**Palatino
 +
**Times New Roman
 +
*Monospace
 +
**Courier New
 +
**Monaco/Lucida Console
 +
</b>
 +
 
 +
===Шапка сайта===
 +
 
 +
В секции "Шапка сайта" содержатся настройки:<b>
 +
*Логотип сайта
 +
*Выводить название магазина?
 +
*Изображение справа
 +
*Цвет шапки
 +
</b>
 +
Чекбокс возле каждого пункта настроек позволяет включать и выключать использование соответствующей возможности. Кнопки "Обзор" возле пунктов "Логотип сайта" и "Изображение справа" позволяют выбрать на локальном компьютере нужный файл и загрузить его на сервер. Правее кнопки размещена ссылка на файл, который используется в текущем варианте настройки. Цвет шапки настраивается так же, как и в секции "[[#Цвета|Цвета]]"
 +
 
 +
===Фоновое изображение===
 +
 
 +
В секции "Фоновое изображение" содержатся настройки:<b>
 +
*Изображение,
 +
*Местоположение,
 +
*Повтор,
 +
*Прокрутка,</b>
 +
позволяющие загрузить выбрать на локальном компьютере нужный файл и загрузить его на сервер (п. "Изображение"), разместить на страницах сайта (п. "Местоположение") и управлять отображением (п.п. "Повтор" и "Прокрутка").
 +
 
 +
==Сохранение настройки==
 +
 
 +
После изменения значений выбранных параметров нужно щёлкнуть по кнопке "Сохранить" в нижней части страницы "Настройка темы".
 +
 
 +
Если пометить чекбокс "Сохранить текущие настройки как вариант", то будет предложено ввести название варианта, под которым и будет сохранена данная совокупность настроек.
 +
 
 +
==Что изменяет настройка==
 +
 
 +
Реально в результате изменения настроек меняются Liquid-объект "settings" и на основе файла ''*.css.liquid'' генерируется соответствующий файл ''*.css'', подключенный через шаблоны. В общем списке файлов сгенерированный файл не показывается.
 +
 
 +
=Редактирование темы магазина=
 +
 
 +
На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Редактор тем".
 +
 
 +
Редактирование темы позволяет произвольно менять вид страниц магазина.
 +
 
 +
Перед редактированием темы рекомендуется [[Страница "Настройка оформления магазина"#Сохранение и восстановление темы|сохранить текущую тему]] для возможности её восстановления, в случае нежелательных последствий редактирования.
 +
 
 +
 
 +
[[Изображение:Design_3b.png]]<br>'''Рис. 6. Редактор темы.'''
 +
 
 +
 
 +
На странице размещён заголовок (Рис. 6. поз. 2.), левее его - кнопка для возврата на страницу, откуда была вызвана текущая [[Изображение:Back_ico.png]] (Рис. 6. поз. 1.)
 +
 
 +
В рамках редактирования темы имеется возможность:
 +
 
 +
* '''[[#Внесение изменений в шаблоны|изменения шаблонов]]''' (Рис. 6. поз. 3.),
 +
* '''список созданных сниппетов''' (Рис. 6. поз. 4.),
 +
* '''[[#Создание сниппетов|создания cниппетов]]''' (Рис. 6. поз. 5.),
 +
* '''[[#Внесение изменений в стили и скрипты|изменения стилей и скриптов]]''' (Рис. 6. поз. 6.),
 +
* '''загрузка своих стилей с скриптов''' (Рис. 6. поз. 7.),
 +
* '''список остальных файлов темы''' (Рис. 6. поз. 8.),
 +
* '''[[#Загрузка новых файлов|загрузки файлов]]''' (Рис. 6. поз. 9.).
 +
* '''[[Theme_settings|Редактирование раздела "Настройки темы"]]''' (Рис. 6. поз. 10.)
  
==Редактирование темы магазина==
+
* '''Зона просмотра/редактирования текущего элемента''' (Рис. 6. поз. 11.)
  
Позволяет ...
+
[[Настройка темы шаблона Hi-Tech]]
  
 
==Внесение изменений в шаблоны==
 
==Внесение изменений в шаблоны==
  
Позволяет ...
+
Шаблоны - это текст на языке HTML со вставками на языке Liquid. Для внесения изменений в шаблоны нужно знать эти языки.
 +
 
 +
Начальную информацию о Liquid можно прочитать тут:
 +
 
 +
* [[Liquid|Описание языка Liquid]]
 +
 
 +
Шаблоны позволяют изменять вид страниц магазина, то есть компоновку, места размещения, размеры, цвет, фон и другие параметры различных частей страницы с отображённой на этих частях информацией.
 +
 
 +
В шаблон передаётся список переменных (набор данных) для отображаемой страницы, которые могут отображаться или не отображаться на странице, в зависимости от содержания (текста) шаблона.
 +
 
 +
В шаблоне также описана логика отображения переданных шаблону данных, которая описывает зависимость способа отображения этих данных от их содержания.
 +
 
 +
В панели "Шаблоны" для изменения предлагаются следующие шаблоны, каждый из которых соответствует типу страницы:
 +
 
 +
*<b>HTML</b> - описывает общее оформление всех страниц магазина. В этом шаблоне имеется указание, в каком месте будет вставлена содержательная часть конкретной страницы. Содержательная часть страницы описывается другими шаблонами, в зависимости от типа страницы. Тип страницы соответствует названию шаблона.
 +
*<b>Главная</b> - описывает оформление главной страницы магазина.
 +
*<b>Категория</b> - описывает оформление страниц магазина, являющихся какой либо из категорий или подкатегорий витрины.
 +
*<b>Товар</b> - описывает оформление страниц магазина, являющихся описанием какого-либо товара.
 +
*<b>Корзина</b> - описывает оформление страницы магазина, отображающей корзину покупателя.
 +
*<b>Страница</b> - описывает оформление страниц магазина, которые могут содержать дополнительную информацию для покупателя.
 +
*<b>Поиск</b> - описывает оформление страницы магазина с результатами поиска товаров в магазине.
 +
*<b>Блог</b> - описывает оформление страницы магазина со списком статей
 +
*<b>Статья</b> - описывает оформление страницы магазина со статьёй
 +
*<b>Сравнение</b> - описывает оформление страницы магазина со сравнением товара
 +
*<b>404</b> - описывает оформление не существующей страницы магазина
 +
 
 +
Для внесения изменений в шаблон нужно шёлкнуть по ссылке под ним. Появится окно для редактирования с текстом выбранного файла шаблона. Над окном показан путь размещения и имя файла, под окном имеется кнопка "Сохранить" и ссылка "отменить" для завершения редактирования.
 +
 
 +
Более подробно о шаблонах можно прочитать в следующих статьях:
 +
 
 +
*[[Variables|Шаблоны и переменные в них]]
 +
*[[Objects|Использование Liquid]]
 +
*[[%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_Liquid|Примеры применения Liquid]]
 +
*[[Работа с корзиной]]
 +
 
 +
==Создание сниппетов==
 +
 
 +
Сниппеты позволяют вставлять в документ заранее подготовленный и часто используемый фрагмент текста, верстки или кода. Подробнее механизм описан [[Liquid#Include|здесь]].
 +
 
 +
==Внесение изменений в стили и скрипты==
 +
 
 +
В раздел стили и скрипты попадают файлы с расширениями .css или .js.
 +
 
 +
Для внесения изменений в файлы нужно щёлкнуть по ссылке под ним. Появится окно для редактирования с текстом выбранного файла стиля. Под окном имеется кнопка "Сохранить" и ссылка "отменить" для завершения редактирования.
 +
 
 +
В панели "Стили и скрипты" для изменения предлагаются следующие стили (список может отличаться в зависимости от темы):
 +
 
 +
*'''content-style.css''' - обязательный файл, определяет внешний вид статей полных описаний товара и описаний категорий,
 +
*'''ie6.css''' - используется для корректировки внешнего вида сайта в браузере IE6.
 +
*'''reset.css''' - используется для отмены настроек стилей браузера.
 +
*'''style.css''' - главный файл стилей, в котором задаётся вид сайта.
 +
 
 +
В панели также есть возможность удалить любой из этих файлов.
 +
 
 +
==Загрузка новых файлов==
 +
 
 +
В панели "Файлы" имеется возможность загрузить новые файлы, которые можно использовать в шаблонах. При этом, если имя файла оканчивается на .js или на .css, он после загрузки на сервер отображается в панели "Стили и скрипты", Все остальные файлы попадают в панель "Файлы". В основном - это файлы изображений.
 +
 
 +
В панели также есть возможность удалить любой из имеющихся файлов, щёлкнув по иконке [[Изображение:Del_ico.png]].
 +
 
 +
Для того чтобы заменить файл, надо его сначала удалить, а потом загрузить новый - одноименный. Имена файлов '''регистрозависимые'''.
 +
 
 +
Для создания фоновых градиентов и других цветных или имеющих форму объектов на любых страницах магазина можно использовать формат SVG (подробнее [http://insales.us1.list-manage.com/track/click?u=da70e5d4bf7f0ad9f21b8b2c9&id=0d23c5aacc&e=b569869d0c об SVG на wikipedia]). Файлы '''*.SVG''' размещаются вместе с другими файлами темы. Ссылки на файлы из текста страниц должны при этом выглядеть как '''*.SVG.PNG''', поскольку файлы после их загрузки преобразуются в формат PNG.
 +
 
 +
Для размещения файлов не входящих в шаблоны, следует пользоваться страницей [[#Страница "Файлы"|"Файлы"]].
 +
 
 +
==Настройка стиля оформления заказа и кабинета клиента==
 +
 
 +
В бэк-офисе имеется возможность настраивать внешний вид страницы оформления заказа и личного кабинета покупателя, их можно стилизовать под оформление магазина. Со временем во все темы будет добавлена возможность это делать "настройками".
 +
 
 +
В простом варианте эта возможность поддерживается в теме "Металлик". Настраивая дизайн путём выбора цветов, шрифтов, задавая фоновые картинки для магазина, Вы тем самым настраиваете и страницы оформления заказа и личного кабинета. Они будут в том же стиле, что и сам магазин.
 +
 
 +
В общем случае (для других тем оформления и индивидуальных дизайнов) это можно сделать в разделе "Сайт", подразделе "Дизайн" по ссылке "Редактор темы", добавив файл '''custom_checkout.css''' со стилями для объектов, отображаемых в процессе оформления заказа или при входе в личный кабинет покупателя. Этот файл будет подключаться на странице оформления заказа, и в нём Вы сможете настроить логотип, цвета и фон в тон используемой темы. Посмотреть пример заполнения такого файла можно тут: [http://www.insales.ru/css/custom_checkout.css custom_checkout.css].
 +
 
 +
=Страница "Файлы"=
 +
 
 +
На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Файлы".
 +
 
  
Для изменения предлагаются следующие шаблоны:
+
[[Изображение:Design_4b.png]]<br>'''Рис. 7. Страница "Файлы".'''
*HTML
 
*Главная
 
*Категория
 
*Товар
 
*Корзина
 
*Страница
 
*Поиск
 
  
==Внесние изменений в стили==
 
  
Позволяет ...
+
На странице размещён заголовок с иконкой справки, левее - кнопка для возврата на страницу, откуда была вызвана текущая [[Изображение:Back_ico.png]]
  
==Загрузка новых изображений==
+
На странице "Файлы" Вы можете загружать файлы и изображения, которые потом будете использовать на страницах сайта, в блоках и в описаниях категорий и товаров. Именно отсюда они будут доступны для вставки из [[Как работать в HTML-редакторе TinyMCE|редактора 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. Об использовании и правилах оформления этого файла можно прочитать здесь: [http://help.yandex.ru/webmaster/?id=996567#1111364 Использование robots.txt]
у себя на компьютере. Тема скачивается в виде ZIP-архива, содержазего файлы в структуре директорий. Архив следует
 
распаковать, сохраняя эту структуру, файлы, подлежвщие правке - отредактировать. После того как Вы сделали
 
собственную тему или отредактировали существующую, нужно вновь запаковать её в ZIP-архив, сохранив структуру
 
директорий. После этого можно загрузить её обратно на сервер и использовать в оформлении магазина.
 

Текущая версия на 14:09, 25 марта 2014

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

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

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


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