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

Для перехода на эту страницу перейдите в подраздел “Дизайн” раздела “Сайт” бэк-офиса интернет-магазина и нажмите ссылку “Редактор тем”.

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


Рисунок 7. Редактор темы

Сверху страницы расположен ее заголовок (Позиция 2, Рис. №7), а слева от него находится кнопка в виде стрелки (Положение 1, Рис. №7), нажатие которой приведет к возврату на предыдущую страницу бэк-офиса.

Страница редактирования темы позволяет совершать следующие действия:

• изменять шаблоны (Позиция 3, Рис. №7);
• создавать новые шаблоны (Позиция 4, Рис. №7);
• редактировать сниппеты (Позиция 5, Рис. №7);
• добавлять сниппеты (Позиция 6, Рис. №7);
• создавать новые сниппеты (Позиция 7, Рис. №7);
• изменять стили и скрипты темы (Позиция 8, Рис. №7);
• добавлять созданные ранее скрипты и стили (Позиция 9, Рис. №7);
• создавать стили и скрипты (Позиция 10, Рис. №7);
• редактировать файлы темы (Позиция 11, Рис. №7);
• добавлять файлы в тему (Позиция 12, Рис. №7);
• вносить изменения в настройки темы (Позиция 13, Рис. №7).

Изменение шаблона

Шаблоны представляют собой HTML-код со вставками кода языка Liquid. Чтобы иметь возможность редактировать шаблон, необходимо иметь достаточные знания в областях HTML-верстки и программирования на Liquid.

Использование шаблона позволяет определить вид следующих составляющих страниц:

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

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

На странице редактирования шаблонов возможно редактирование следующих типовых шаблонов страниц:

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

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

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

Редактирование стилей и скриптов

В разделе скриптов и стилей содержатся только файлы расширений .js и .css. Чтобы изменить содержание одного из этих файлов нужно выбрать его в левой панели страницы. Для завершения редактирования следует воспользоваться кнопками внизу страницы: “Сохранить” – для сохранения изменений и “отменить” – для отмены всех сделанных правок.

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

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

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

Чтобы иметь возможность удалить файл или изменить его название сначала необходимо нажать на него. После этого он отобразится в главной панели (Позиция 14, Рис. №7), а справа от его названия в заглавии панели появятся соответствующие функциональные пиктограммы.

Чтобы заменить существующий файл на новый его сначала нужно удалить, а потом загрузить новый файл с таким же названием и расширением. Следует иметь ввиду, что имена файлов регистрозависимые, то есть файлы “Image.gif” и “image.gif” система воспримет как разные.

Для того чтобы создать фоновые градиенты или другие цветные объекты для их изображения на любой из страниц интернет-магазина, следует воспользоваться возможностями формата SVG. Найти загруженные SVG-файлы можно будет в секции всех файлов темы. В тексте страниц ссылки на такие файлы нужно оформлять в виде “путь_к_файлу/имя_файла.SVG.PNG”. Это объясняется тем, что после загрузки файлов SVG-формата они преобразуются в PNG-формат.

Для загрузки файлов, использование которых в шаблонах не планируется, следует воспользоваться страницей “Файлы”.

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

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

• зайти в подраздел “Дизайн” раздела “Сайт” и перейти по ссылке “Редактор темы”;
• добавить файл “custom_checkout.css”, в котором содержатся стили объектов страницы оформления заказа и страницы кабинета клиента;
• настроить параметры файла (фон, цвета, логотип).

Содержание:

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