Настройки дизайна

В статье рассмотрим подробнее о том, какие настройки дизайна возможно произвести в интернет-магазине на платформе AdvantShop.

Рассмотрим последовательно:

• Дизайн и представление
• Отображать
• Лого производителя
• Товар. Большая фотография, Товар. Средняя фотография, Товар. Маленькая фотография, Товар. Самая маленькая фотография
• Категория. Большая фотография, Категория. Маленькая фотография
• Изображение новости
• Иконки для оплаты
• Иконки для доставки

Для того, чтобы произвести настройку шаблона, перейдите в пункт меню "Интернет-магазин" - "Параметры магазина", вкладка "Основные" раздел "Дизайн и представление" (рис. 1).

Рисунок 1.

Дизайн и представление

В данном разделе возможно настроить:

• Режим отображения главной страницы
• Стиль отображения меню
• Расположение поиска

Режим отображения главной страницы

Структура сайта может быть представлена в двухколоночном и одноколоночном режиме (рис.2).

Рисунок 2.

• Одноколоночный режим представляет собой размещение содержимого сайта в одной колонке, то есть контент последовательно расположен в одной колонке по центру страницы.

Визуальное представление такой структуры показано на рисунке (рис.3).

Рисунок 3.

• Двухколоночный режим представляет собой такую структуру сайта, когда визуально содержимое делится на две колонки:

1) левая колонка значительно уже правой и содержит в себе меню категорий каталога, боковые виджеты новостей, блок проверки статуса заказа, опрос, подарочные сертификаты, виджеты.
2) правая колонка значительно шире и отображает содержимое страниц сайта: основное меню, карусель и непосредственно товары.

Визуальное представление такой структуры сайта показано на рисунке (рис.4)

Рисунок 4.

Стиль отображения меню

В двухколоночном режиме существует возможность настраивать вид отображения бокового меню с категориями.

Для этого выбираем из списка  стиль и сохраняем настройки (рис.5)

Рисунок 5.

В результате видим новый стиль отображения меню категорий и подкатегорий (рис.6)

Рисунок 6.

Расположение поиска

Данная настройка отвечает за то, в какой области на сайте будет отображаться окно поиска (рис.7).

Рисунок 7.

• Нигде - если выбрать данную настройку, то поиска на сайте не будет.
• Шапка - поиск будет располагаться в верхнем меню (рис.8).

Рисунок 8.

• Верхняя панель - поиск будет располагаться над меню (рис.9).

Рисунок 9.

• Каталог - поиск будет располагаться в меню каталога (рис.10).

Рисунок 10.

Верхняя панель 

Данная настройка отвечает за то,  как будет выглядеть верхняя панель сайта (рис.11). Есть несколько типов. 

Рисунок 11.

На изображениях ниже рассмотрим как выглядит каждый тип дизайна верхней панели. 

Тип 1 (рис.12).

Рисунок 12.

Тип 2 (рис.13).

Рисунок 13.

Тип 3. (рис.14).

Рисунок 14.

Тип 4. (рис.15).

Рисунок 15.

Тип 5. (рис.16).

Рисунок 16.

Шапка

Данная настройка отвечает за то,  как будет выглядеть шапка сайта (рис.17). Также есть несколько типов.

Рисунок 17.

Тип 1. 

Рисунок 18.

Тип 2. 

Рисунок 19.

Тип 3.

Рисунок 20.

Тип 4.

Рисунок 21.

Тип 5.

Рисунок 22.

Тип 6.

Рисунок 23.

Меню  

Данная настройка отвечает за то,  как будет выглядеть меню сайта (рис.24). Также есть несколько типов.

Рисунок 24.

Тип 1.

Рисунок 25.

Тип 2.

Рисунок 26.

Рисунок 27.

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

Рисунок 28.

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

Рисунок 29.

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

Рисунок 30.

Фиксировать меню при скроле - при прокрутке сайта меню будет зафиксировано (рис.31, 32).

Рисунок 31.

Рисунок 32.

Отображать

Данный блок позволяет настроить вывод дополнительных разделов на сайте. Переходим в "Настройки", раздел "Дизайн", далее "Параметры", вкладка "Основные", раздел "Отображать" (рис.33).

• Вы уже смотрели - это список товаров, которые клиенты просматривали ранее на сайте. (рис.34).

• Список желания - активность данной настройки позволяет клиентам добавлять товары и выводить свой список желаний (рис. 35).

Рисунок 35.

Лого производителя

Лого производителя - это картинка, которая показывается в карточке товара справа и  рядом с названием производителя (бренда) в разделе "Бренды".

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

Рисунок 36.

По умолчанию размеры:
Ширина 100 (px)
Высота 80 (px)

Изменяем размеры и нажимаем "Сохранить настройки" (рис.36).

Внимание

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

Результат будет выглядеть следующим образом (рис. 37).

Рисунок 37.

Товар. Большая фотография, Товар. Средняя фотография, Товар. Маленькая фотография, Товар. Самая маленькая фотография

Подробнее о данной настройке можно ознакомиться здесь.

Категория. Большая фотография, Категория. Маленькая фотография

Подробнее о данной настройке можно ознакомиться здесь.

Изображение новости 

В данной настройке задаются размеры для изображения новости в списке новостей.

Для настройки этого пункта переходим в пункт меню "Интернет-магазин" - "Параметры магазина", вкладка "Новости" - "Изображение новости"(рис.38)

Рисунок 38.

Рисунок 39.

Иконки для оплаты

Иконка для оплаты - картинка малого размера, выводится в процессе оформления заказа в списке методов оплаты.

Задаются размеры для иконок оплаты: Панель администрирования, пункт меню "Интернет-магазин" - "Параметры магазина" - "Оформление заказа" - секция "Иконки для оплаты" (рис. 40).

Рисунок 40.

По умолчанию размеры:
Ширина 60 (px)
Высота 40 (px)

Изменяем размеры и нажимаем "Сохранить настройки".

Внимание

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

Пример картинки (рис.41).

Рисунок 41.

Иконки для доставки

Иконка для доставки - по аналогии с иконкой оплаты, это картинка малого размера, выводится в процессе оформления заказа в списке методов доставки.

Панель администрирования, пункт меню "Интернет-магазин" - "Параметры магазина" - "Оформление заказа" - секция "Оформление заказа" (рис.40).

По умолчанию размеры:
Ширина 60 (px)
Высота 40 (px)

Измените размеры и нажмите "Сохранить настройки".

Внимание

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

Пример картинки можно увидеть ниже (рис. 42).

Рисунок 42.

Что если загрузить картинку больше чем указаны размеры в настройках?

Внимание

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

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

Готово. Мы рассмотрели основные настройки шаблона.