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

Рисунок 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 — Страница “Файлы”
0 комментариев