Новые тарифы на контекстную рекламу Яндекс.Директ и Google AdsПодробнее
Инструкции

Инструкция по настройке темы дизайна Megashop 2.0

Поддержка Bodysite
Поддержка Bodysite
19 февраля 2019 19:35
+1

Содержание

1. Основные настройки

    1.1. Логотип
    1.2. Настройка цветовой схемы и шрифтов
    1.3. Контактные данные
    1.4. Мессенджеры и социальные сети

    1.5. Шапка
       1.5.1. Шапка: Настройки варианта №1. Подробный (Поисковая форма в нижней части)
       1.5.2. Шапка: Настройки варианта №2. Подробный (Поисковая форма в средней части)
       1.5.3. Шапка: Вариант №3. Компактный
       1.5.4. Шапка: Вариант №4. Суперкомпактный
       1.5.5. Шапка: Бургер-меню "Каталог товаров"
       1.5.6. Шапка: Горизонтальное меню
       1.5.7. Шапка: Меню "Бренды"

    1.6. Подвал
       1.6.1. Подвал: Блок "Подписка на рассылку"
       1.6.2. Подвал: Общие настройки подвала
       1.6.3. Подвал: Иконки способов оплаты
       1.6.4. Подвал: Настройки колонки меню №1
       1.6.5. Подвал: Настройки колонки меню №2
       1.6.6. Подвал: Настройки колонки меню №3
       1.6.7. Подвал: Блок с контактной информацией
       1.6.8. Подвал: Варианты отображения. Настройки варианта №1. Подробный (С логотипом компании)

    1.7. Сайдбар
       1.7.1. Сайдбар: Блок "Каталог товаров"
       1.7.2. Сайдбар: Блок "Список товаров"
       1.7.3. Сайдбар: Блок "Последние новости"
       1.7.4. Сайдбар: Блок "Последние отзывы"
       1.7.5. Сайдбар: Блок "Теги"
       1.7.6. Сайдбар: Блок "Фотографии"

    1.8. Промоблоки/баннеры
       1.8.1. Промоблоки/баннеры: Сквозной топ баннер
       1.8.2. Промоблоки/баннеры: Баннер в сайдбаре
       1.8.3. Промоблоки/баннеры: Баннер над/под товарами

2. Прочие настройки. Сайдбар, политика обработки персональных данных, кнопка наверх

3. Главная страница. Вариант отображения
    3.1. Блок "Популярные категории"
    3.2. Настройка списков товаров
    3.3. Блок "Последние отзывы"
    3.4. Блок "Бренды"
    3.5. Блок "Последние новости"
    3.6. Блок "Текст главной страницы"
    3.7. Блок "Виджеты социальных сетей"
    3.8. Блоки с преимуществами
    3.9. Настройки слайдера
    3.10. Настройки сайдбара

4. Каталог товаров.
    4.1. Общие настройки
    4.2. Сайдбар
    4.3. Фильтр подбора

    4.4. Варианты показа товаров
       4.4.1. Вид показа "Плиткой"
       4.4.2. Вид показа "Список"
       4.4.3. Вид товаров "Таблицей"

5. Карточка товаров

6. Оформление заказа

1. Основные настройки

1.1. Основные настройки. Логотип

Укажите адрес SVG-изображения или загрузите файл с логотипом. 

Внимание! Если поле "URL адрес логотипа в формате SVG" не пустое, вместо адреса изображения будет подставляться его содержимое. 

1.2. Основные настройки. Настройка цветовой схемы и шрифтов

Вы можете выбрать предустановленную цветовую схему сайта.

Или использовать свои настройки цветовой схемы.

Выберите шрифт: 

  • SF Pro Text
  • Roboto
  • Fira Sans
  • Rubik


Посмотреть разные настройки цветовых схем и шрифтов вы можете на демосайте http://megashop2.bodysite.ru/.


1.3. Основные настройки. Контактные данные

Заполните блок с контактными данными.

Контактные данные будут выведены в шапке сайта и в подвале. 


1.4. Основные настройки. Мессенджеры и социальные сети

Заполните информацию для соцсетей. 


В подвале выведутся ссылки.

В шапке сайта при выборе шапки "Вариант №1. Подробный".


1.5. Основные настройки. Шапка

Выберите, нужно ли выводить "Сравнение", "Избранное", надо ли включить поисковые подсказки, выпадающую корзину.

Вывод избранного и сравнения:


Вывод поисковых подсказок: 

Вывод всплывающей корзины: 

Если установлен плагин "SEO-регионы", можете вывести город в левой части сайта. 

Отображение на сайте:

Выберите источник меню: 

  • Информационные страницы (Магазин)
  • {$wa->apps()} меню
  • Каталог товаров

Если выбран вариант "Информационные страницы (Магазин)", укажите URL информационных страниц, которые были выведены в меню.

Укажите количество пунктов меню, которое должно выводиться до ссылки "Еще".

Если количество пунктов превысит указанное значение, появится ссылка со всплывающем при клике окном.

Укажите вариант отображения шапки и выберите настройки для указанного варианта.


1.5.1. Основные настройки. Шапка: Настройки варианта №1. Подробный (Поисковая форма в нижней части)

Откройте настройки варианта №1 "Подробный".

Укажите нужные опции.

Варианты подписи к телефону: 

  • Заказать обратный звонок;
  • Подпись к телефону из настроек темы.

Если выбран вариант "Подпись к телефону из настроек темы", поднимитесь к блоку "Контактные данные" и заполните подписи.

Варианты отображения нижней части: 

  • Бургер-меню "Каталог товаров" + Развернутый поиск;
  • Горизонатальное меню + Свернутый поиск.

Бургер-меню "Каталог товаров" + Развернутый поиск:

Горизонатальное меню + Свернутый поиск:

Посмотреть этот вариант шапки »


1.5.2. Основные настройки. Шапка: Настройки варианта №2. Подробный (Поисковая форма в средней части)

Откройте настройки варианта шапки №2 "Подробный".

Варианты подписи к телефону: 

  • Заказать обратный звонок;
  • Подпись к телефону из настроек темы.

Подпись к телефону из настроек темы берется из блока с контактной информацией. 

Вариант отображения нижней части:

  • Бургер-меню "Каталог товаров" + Горизонтальное меню;
  • Горизонтальное меню.

Бургер-меню "Каталог товаров" + Горизонтальное меню:

Горизонтальное меню:

Посмотреть демо шапки »


1.5.3. Основные настройки. Шапка: Вариант №3. Компактный

Откройте настройки варианта шапки №3 "Компактный".

Выберите, выводить ли ссылку "Заказать звонок" в верхнем меню.

Варианты отображения нижней части:

  • Бургер-меню "Каталог товаров" + Горизонтальное меню;
  • Горизонтальное меню.

Бургер-меню "Каталог товаров" + Горизонтальное меню:

Горизонтальное меню:

Посмотреть демо шапки »


1.5.4. Основные настройки. Шапка: Вариант №4. Суперкомпактный

Откройте настройки шапки №4 "Суперкомпактный".

Отметьте, нужно ли выводить ссылку "Заказать звонок" в верхнем меню.

Посмотреть демо »


1.5.5. Основные настройки. Шапка: Бургер-меню "Каталог товаров"

Откройте настройки бургер-меню.

Укажите текст для кнопки.

Выберите, открывать по клику меню или при наведении.

Укажите количество отображаемых пунктов до пункта "Еще".

Как это выглядит на сайте: 

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

Как это выглядит на сайте: 

Укажите вариант выпадающего меню: многоуровневое или иерархическое.

Многоуровневое:

Иерархическое: 

Укажите, нужно ли выводить количество товаров.


1.5.6. Основные настройки. Шапка: Горизонтальное меню

Откройте настройки горизонтального меню.

Выберите источник меню:

  • Информационные страницы (Магазин);
  • {$wa->apps()} меню;
  • Каталог товаров.

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


Укажите количество пунктов до вывода пункта "Еще".

Выберите вариант выпадающего меню: 

  • Иерархическое;
  • Многоуровневое.

Укажите, нужно ли показывать количество товаров в категориях.

Укажите, нужно ли выводить выпадающий пункт меню "Бренды". Для вывода требуется установка плагина "Бренды PRO".

Пример шапки с брендами в горизонтальном меню (вариант шапки №3):


1.5.7. Основные настройки. Шапка: Меню "Бренды"

Откройте настройки для брендов.

Укажите текст для пункта меню.

Укажите заголовок для выпадающего окна.

Укажите максимальное количество выводимых брендов.

Пример меню с брендами:


1.6. Основные настройки. Подвал

1.6.1. Основные настройки. Подвал: Блок "Подписка на рассылку"

Откройте настройки блока подписки.

Укажите, где выводить этот блок:

  • Только на главной странице;
  • На всех страницах;
  • На всех страницах кроме корзины и оформления заказа;
  • Не выводить нигде.

Укажите ID приложения формы рассылки. Должно быть установлено приложение "Рассылки". 

Укажите заголовок блока и подпись к заголовку. 

Пример вывода блока на сайте:


1.6.2. Основные настройки. Подвал: Общие настройки подвала

Откройте блок с настройками.

Укажите, нужно ли показывать копирайт.

Добавьте краткую подпись.

Укажите год начала работы.

Укажите, нужно ли выводить ссылку на карту сайта, Доступно при установленном плагине "HTML-карта сайта".


1.6.3. Основные настройки. Подвал: Иконки способов оплаты

Отметьте необходимые для вывода иконки.


1.6.4. Основные настройки. Подвал: Настройки колонки меню №1

Укажите заголовок колонки.

Укажите источник меню:

  • Информационные страницы (Магазин);
  • {$wa->apps()} меню;
  • Каталог товаров.

Если указан источник меню "Информационные страницы (Магазин)", пропишите URL необходимых страниц.

Укажите максимальное количество пунктов в меню.

Пример:


1.6.5. Основные настройки. Подвал: Настройки колонки меню №2


Укажите заголовок колонки.

Укажите источник меню:

  • Информационные страницы (Магазин);
  • {$wa->apps()} меню;
  • Каталог товаров.

Если указан источник меню "Информационные страницы (Магазин)", пропишите URL необходимых страниц.

Укажите максимальное количество пунктов в меню.

Пример:


1.6.6. Основные настройки. Подвал: Настройки колонки меню №3


Укажите заголовок колонки.

Укажите источник меню:

  • Информационные страницы (Магазин);
  • {$wa->apps()} меню;
  • Каталог товаров.

Если указан источник меню "Информационные страницы (Магазин)", пропишите URL необходимых страниц.

Укажите максимальное количество пунктов в меню.


1.6.7. Основные настройки. Подвал: Блок с контактной информацией


1.6.8. Основные настройки. Подвал: Варианты отображения. Настройки варианта №1. Подробный (С логотипом компании)

3 варианта отображения информации в подвале:

  • Вариант №1. Подробный (С логотипом компании);
  • Вариант №2. Подробный (Три колонки меню);
  • Вариант №3. Компактный.

Вариант №1. Подробный (С логотипом компании)

Вариант №2. Подробный (Три колонки меню)

Вариант №3. Компактный


1.7. Основные настройки. Сайдбар

1.7.1. Основные настройки. Сайдбар: Блок "Каталог товаров"


1.7.2. Основные настройки. Сайдбар: Блок "Список товаров"

Пример блока:


1.7.3. Основные настройки. Сайдбар: Блок "Последние новости"

Пример блока:


1.7.4. Основные настройки. Сайдбар: Блок "Последние отзывы"

Пример блока:


1.7.5. Основные настройки. Сайдбар: Блок "Теги"

Пример блока:


1.7.6. Основные настройки. Сайдбар: Блок "Фотографии"

Фотографии выводятся все из фотопотока без уточнения альбома! 

Пример блока:


1.8. Основные настройки. Промоблоки/баннеры

1.8.1. Основные настройки. Промоблоки/баннеры: Сквозной топ баннер

Пример вывода баннера: 


1.8.2. Основные настройки. Промоблоки/баннеры: Баннер в сайдбаре

Пример вывода баннеров в каталоге: 


1.8.3. Основные настройки. Промоблоки/баннеры: Баннер над/под товарами

Пример вывода баннера под товарами в каталоге:


2. Прочие настройки. Сайдбар, политика обработки персональных данных, кнопка наверх

Отметьте нужные вам опции. 

Настройки для сайдбара выводят блоки на остальных страницах, кроме главной (страницы каталога). Главная страница настраивается отдельно. 


3. Главная страница. Вариант отображения

Варианты отображения:

  • Вариант №1. Слайдер 100% без левого сайдбара;
  • Вариант №2. С левым сайдбаром;
  • Вариант №3. С левым меню категорий (Без сайдбара);
  • Вариант №4. Слайдер 100% + левый сайдбар.

Вариант №1. Слайдер 100% без левого сайдбара

Смотреть демо »


Вариант №2. С левым сайдбаром

Смотреть демо »


Вариант №3. С левым меню категорий (без сайдбара)

Смотреть демо »


Вариант №4. Слайдер 100% + левый сайдбар

Смотреть демо »


3.1. Главная страница. Блок "Популярные категории"

Пример блока:

Для вывода логотипов категорий используется плагин "Логотип категории". 

Пример блока с выводом подкатегорий:


3.2. Главная страница. Настройка списков товаров

На главной странице можно вывести максимум 3 списка товаров.

Типы: 

  • Слайдер;
  • Список.

Слайдер

Список

Как получить ID списка товаров? 

Перейдите в "Магазин / Товары".

Спуститесь до списков.

Рядом с названием списка указан его ID.


3.3. Главная страница. Блок "Последние отзывы"

Тип: 

  • Слайдер;
  • Список.

Слайдер

Список


3.4. Главная страница. Блок "Бренды"

Типы вывода брендов: 

  • Слайдер;
  • Список.

Слайдер

Список


3.5. Главная страница. Блок "Последние новости"

Отметьте необходимые опции.

Вывод основного изображения возможен с помощью плагина "Главная картинка". 

Как получить ID блога? 

Перейдите в приложение "Блог". В левой колонке будет выведен список блогов.

Перейдите в блог, новости которого хотите выводить на главной странице. Например, "Новости". В URL подставится ID этого блога.

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


3.6. Главная страница. Блок "Текст главной страницы"

Текст для главной страницы нужно разместить в блоках (Сайт / Блоки). Создайте новый блок.

Укажите ID блока, например, megashop.shop_home_text.

При необходимости укажите описание блока (необязательный пункт).

Добавьте текст с html-разметкой.

Для добавления html-разметки можно воспользоваться онлайн-конверторами, например, Word To HTML или Word-to-HTML конвертер.

В настройках темы дизайна укажите ID этого блока. 


3.7. Главная страница. Блок "Виджеты социальных сетей"

Отметьте пункт "Выводить блок", если нужно добавить виджеты соцсетей на сайт. Укажите заголовок блока. 


3.8. Главная страница. Блоки с преимуществами


В теме дизайна предусмотрено 3 блока с преимуществами.

Для каждого из них можно указать:

  • Изображение (загрузить или дать ссылку на картинку в формате svg, указать ссылку на иконку Font Awesome);
  • Ссылку;
  • Заголовок;
  • Текст блока.

Если указана ссылка на картинку в формате svg, то будет подставляться эта ссылка в качестве адреса иконки!

Иконку также можно загрузить в другом графическом формате (jpg, png, gif). Рекомендуемый размер изображения 146х146 px.

Можно выбрать иконку в готовой библиотеке Font Awesome.

Для этого перейдите на сайт https://fontawesome.com/icons?from=io. Откройте галерею с иконками. 

Выберите иконку и кликните на нее.

Скопируйте класс иконки, который начинается с "fa-". В примере это "fa-500px".

Добавьте этот класс в настройках темы MegaShop.

Укажите ссылку на страницу, куда должен попадать пользователь при клике на преимущество.

Добавьте заголовок и текст.

Пример вывода преимуществ на сайте:


3.9. Главная страница. Настройки слайдера

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

  • Слева;
  • По центру;
  • Справа.

Слева

По центру

Справа

Варианты анимации:

  • slide;
  • fade.

Slide

Fade

Кликабельная часть:

  • Выводить слайдер;
  • Выводить слайдер.

Укажите параметры прокрутки:


3.10. Главная страница. Настройки сайдбара

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


4. Каталог товаров

4.1. Каталог товаров. Общие настройки

Варианты отображения подкатегорий:

  • Большие плитки;
  • Средние плитки;
  • Маленькие плитки.

Большие плитки

Средние плитки

Маленькие плитки

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

Выводит основное описание категории: 

  • Над товарами;
  • Под товарами.


4.2. Каталог товаров. Сайдбар

Порядок вывода:

  • Сначала каталог, затем фильтр;
  • Сначала фильтр, затем каталог.

Вариант вывода блока "Каталог товаров":

  • Дублировать каталог с главной страницы;
  • Выводить подкатегории текущей категории.


4.3. Каталог товаров. Фильтр подбора

Отметьте, нужно ли сворачивать фильтры по умолчанию.

Вариант со свернутыми фильтрами:

Вариант с развернутыми фильтрами:

Укажите количество фильтров, которое необходимо оставить открытыми. 

Укажите количество характеристик, которое должно быть до ссылки "Еще".

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

Укажите, нужно ли выводить выбранные характеристики над каталогом товаров.


4.4. Каталог товаров. Варианты показа товаров

Отметьте необходимые опции, которые планируете добавить для каждого вида каталога: плитка, список, таблица. 


4.4.1. Каталог товаров. Вид показа "Плиткой"

Максимальное заполнение информацией: 

Минимальное заполнение информацией:

Варианты вывода сравнения и избранного:

  • На изображении товара;
  • Рядом с кнопкой "В корзину".

На изображении товара

Рядом с кнопкой "В корзину"


4.4.2. Каталог товаров. Вид показа "Список"

Отметьте необходимые опции.

Максимальное заполнение информацией: 

Минимальное заполнение информацией:

Для вывода кнопки "Купить в 1 клик" необходим плагин


4.4.3. Каталог товаров. Вид товаров "Таблицей"

Без отмеченных пунктов: 

Если все пункты отмечены:


5. Карточка товаров

Укажите вид выбора характеристик: 

  • Блоками;
  • Выпадающими списками.

Блоками

Выпадающими списками

Укажите, нужно ли выводить информацию о доставки и оплате.

Опция доступна при установленном плагине "Информация о доставке и оплате".

Выберите, где нужно выводить превью:

  • Под основной фотографией;
  • Слева от основной фотографии.

Под основной фотографией

Слева от основной фотографии

Включить лупу можно здесь:

Укажите, нужно ли выводить кнопку "Купить" в галерее.

Укажите, нужно ли скрывать вывод полей "Сайт" и "Заголовок".

Укажите, нужно ли включать фильтр.

Выберите дополнительные опции.


6. Оформление заказа

При добавлении товара в корзину можно выбрать эффект: 

  • Эффект "Полёт товара в корзину";
  • Показать уведомление "Товар добавлен в корзину";
  • Показать окно "Товар добавлен в корзину";
  • Показать окно "Товар добавлен в корзину" + Кросс-список товаров;
  • Автоматический переход в корзину.


Эффект "Полёт товара в корзину"


Показать уведомление "Товар добавлен в корзину"


Показать окно "Товар добавлен в корзину"


Показать окно "Товар добавлен в корзину" + Кросс-список товаров

Автоматический переход в корзину


Вернуться к содержанию инструкции »

База знаний