ВНИМАНИЕ!
Чтобы убрать ДЕМО-режим перейдите в Настройки темы:
Магазин -> Витрина -> Выберите тему MULTISHOP в выпадающем списке -> Настройки темы
Выберите значение для ДЕМО РЕЖИМа "Выключить". Нажмите "Сохранить".
Содержание
1. Шапка сайта
1.1 Летающая корзина
1.2 Телефон
1.3 Логотип и слоган
2. Горизонтальное меню категорий
2.1 Выпадающий список
2.2 Выпадающее меню
2.3 Комбинированное
-Встраивание произвольного HTML
2.4 Настройка индивидуального отображения категорий
2.4.1 Корневые категории
2.4.2 Дочерние категории
2.4.3 Вкладка "Еще"
3. Горизонтальное меню информационных страниц и приложений
4. Слайдер
4.1 Слайдер товаров магазина
4.2 Слайдер Ваших баннеров и фотографий
4.3 HTML-слайдер
5. Страница категорий
5.1 Отображение товаров
5.2 Загрузка товаров (постраничная навигация / ленивая загрузка)
6. Страница товара
6.1 Вкладки
6.2 Изображения
6.3 Выбор характеристик
7. Наклейки
8. Блок Новости
8.1 Превью новости
8.2 Ссылка на сторонний сайт/блог
9. Фильтр товаров
10. Подвал сайта
11. Баннеры
12. Иконки способов оплаты
13. Эскизы изображений
* * * 1. Шапка сайта * * *
1.1 Летающая корзина
Летающая корзина демонстрирует товары, которые пользователь отложил в корзину для покупки. Пользователь видит изображение товаров, их названия, у него есть возможность изменить количество товаров, а также удалить ненужные ему товары из корзины. Также ему предоставляется информация о текущей скидке на товары.
Все это доступно с любой страницы сайта, что облегчает управление корзиной и позволяет в любой момент времени внести в нее изменения!
Вы можете изменять количество отображаемых товаров в летающей корзине пользователя:
Магазин -> Витрина -> Дизайн -> Настройки темы.
Поле "Количество товаров в летающей корзине ", указывайте числа.
1.2 Телефон
Для изменения телефона зайдите в
Магазин -> Настройки -> Общие настройки.
Измените поле "Телефон".Если Вы хотите указать другой телефон в шаблоне, сохранив текущий, то зайдите в
Магазин -> Витрина -> Дизайн -> Настройки темы
и заполните поле Телефон на витрине.Чтобы полностью удалить вывод телефона, зайдите в
Магазин -> Витрина -> index.html.
Найдите блок<!-- Телефон / Phone -->...<!-- Конец / End -->
и удалите его.
1.3 Логотип и слоган
Параметры логотипа: ширина – 261px; высота – 88px.
Максимальные параметры логотипа: ширина – 370px; высота – 90px.
Имейте ввиду, что при превышении максимальных параметров логотипа, могут возникнуть проблемы с версткой шаблона.
Для того чтобы изменить логотип сайта, Вам необходимо зайти в:
Магазин -> Витрина -> Дизайн -> Настройки темы.
Для изменения слогана в поле "Слоган компании" напишите нужный текст и нажмите Сохранить.
* * * 2. Горизонтальное меню категорий * * *
В горизонтальном меню категорий отображаются категории, которые созданы у Вас в Магазине.
Cуществует 3 типа отображения категорий: выпадающим списком, выпадающим меню, комбинированным методом. Также можно настроить индивидуальное отображение каждой категории.
2.1 Выпадающий список
Выпадающий список имеет довольно гибкую настройку категорий, но для этого Вам потребуется поработать с каждой категорией, чтобы получить желаемый результат.
1) Корневые категории
Допустимые дополнительные параметры:
columns=groups
Указав у корневой категории данный параметр, Вы получаете возможность группировать подкатегории в колонки вручную.
Для того чтобы сгруппировать подкатегории, создайте для них групповые идентификаторы.
Рассмотрим рабочий пример:
У категории "Украшения" имеется 6 подкатегорий: Серьги, Подвески и колье, Запонки, Детские украшения, Аксессуары для волос, Шкатулки для украшений. Мы хотим получить следующий результат:
Наши действия с самого начала:
- Нажимаем на категорию Украшения, выбираем "Настройки категории":
В "Дополнительных параметрах" указываем: columns=groups. Таким образом, даем понять, что у этой категории будет происходить ручная группировка: - В "Дополнительных параметрах" подкатегорий Серьги, Детские украшения указываем: column_group=mycolumn.
Примечание, mycolumn - любое латинское название, которое будет идентификатором, объединяющим подкатегории. - В "Дополнительных параметрах" подкатегорий Подвески и колье, Запонки, Шкатулки для украшений указываем: column_group=secondcolumn.
- Подкатегорию Аксессуары для волос не трогаем, потому что ее объединять мы ни с кем не собираемся.
Таким образом будут сгруппированы подкатегории в 3 колонки.
columns=4
В случае, когда указывается число у параметра columns для корневой категории, все подкатегории будут сгруппированы автоматически. Вам больше ничего делать не нужно.
Вот что произойдет, если у корневой категории Украшения вместо columns=groups мы укажем columns=4:
Максимальное число параметра columns равно 8 (при максимальной ширине шаблона).
отсутствие параметра
Если у корневой категории отсутствует параметр columns, то группировка произойдет автоматически.
2) Подкатегории
Если Ваши подкатегории имеют много подподкатегории, то у Вас есть возможность разделить их, выделив для подкатегории 2 колонки.
double_column=1
Укажите этот параметр у подкатегории, и все вложенные категории будут разделены поровну и займут 2 колонки в списке всех категорий.
Пример:
Укажем в "Дополнительных параметрах" категории "Для него" значение double_column=1 и получим:
3) Корневые категории и вложенные категории
Все категории могут иметь параметр collapsible. Он означает, что, если у вложенной категории имеются подкатегории, то они могут быть полностью раскрыты (то есть показана вся древовидная структура категорий), либо закрыты.
Необходимо запомнить главное правило, что преимущество отдается параметру, указанному у вложенной категории. Например, если корневая категория будет иметь параметр collapsible=1, а одна из вложенных - collapsible=0, то при формировании списка категорий вложенная категория будет иметь значение параметра collapsible равное 0.
Что значит данный параметр?
collapsible=1
Для категории "Для него" указан параметр collapsible=1:
Все вложенные подкатегории находятся в закрытом состоянии.
collapsible=0
Для категории "Для него" указан параметр collapsible=0:
Все вложенные категории будут раскрыты.
Представим ситуацию, что Вы хотите закрыть категорию "Профессиональные спортивные", для этого в настройках этой категории добавьте в "Дополнительных параметрах" значение collapsible=1. Тем самым, Вы закроете данную категорию:
2.2 Выпадающее меню
Отображение категорий выпадающим меню:
2.3 Комбинированное
Встраивание произвольного HTML
При использовании комбинированного типа отображения категорий у Вас есть возможность встроить в отображение категорий первого уровня произвольный HTML. Это могут быть баннеры, товары, что-угодно!
Обратите внимание! Даже при отсутствии дочерних категорий Вы можете добавить любой HTML-код в категорию первого уровня.
Доступны верхняя и нижняя области категорий
Как это работает?
В "Дополнительных параметрах" категории можно указать два значения:
- category_top_html - верхняя область
- category_bottom_html - нижняя область
Этим значениям необходимо присвоить идентификатор Блока, созданного в приложении Сайт. В Блоке и будет располагаться Ваш HTML.
Рассмотрим пример:
1) Выберем категорию первого уровня, в которой хотим расположить баннер.
2) Создадим блок с баннером: Сайт - Блоки
3) В нужной категории первого уровня нажмем "Настройки категории" и в "Дополнительных параметрах" пропишем:
Результаты работы для:
а) Категории, не имеющей дочерних
б) Категории, имеющей подкатегории
В одной категории Вы можете использовать как верхнюю область, так и нижнюю.
ВНИМАНИЕ! Изображения, помещенные в категории будут растягиваться по ширине выпадающего окна. Изменить такое поведение можно в файле custom.css. Найдите правило
.dropdown-combine-wrap ul.menu-v.l0 ul.menu-v.l1 > li.category-html img {
min-height: 100%;
width: 100%;
}
и удалите строчку "width: 100%;"
2.4 Настройка индивидуального отображения категорий
2.4.1 Корневые категории
Категории имеют три типа отображения, описанных в пунктах 2.1, 2.2, 2.3.
Вы можете настроить индивидуальное отображение каждой категории с целью лучшего представления подкатегорий.
menu_type
Данные параметр указывается в "Дополнительных параметрах" категории.
Значения, которые может принимать параметр:
- list - отображение категорий списком
- menu - отображение категорий выпадающим меню
- combine - комбинированное отображение категорий
Пример указания параметра: menu_type=list
2.4.2 Дочерние категории
Дочерние категории также имеют параметр menu_type, но он может принимать только два значение: list и menu.
В данном примере категория "Профессиональные с длинным" имеет значение menu_type=menu, а категория "Мокасины" - menu_type=list
Следует понимать! Что данные параметры будут работать только при условии, что Вы используете для корневых категорий отображение "Списком" или "Комбинированное".
2.4.3 Вкладка "Еще"
Отображение данной вкладки и ее название может быть изменено в Настройках темы.
* * * 3. Горизонтальное меню информационных страниц и приложений * * *
У Вас непременно имеются страницы, которые должны быть у клиентов всегда на виду.
Для того чтобы создать такие страницы с индивидуальными иконками, Вам потребуется:
- Создать новую страницу в любом из приложении, у которого имеется такой функционал. Рассмотрим пример с Магазином:
- При создании нажмите "Еще" и в "Дополнительных параметрах" укажите название активной и неактивной иконкок, а также параметр topmenu=1.
Примечание, максимальный размер иконок: ширина - 35px; высота - 20px.
Вот так выглядит меню с описанием всех его элементов:
Как загрузить активные/неактивные иконки?
Вам необходимо зайти в приложение "Сайт" -> Файлы и загрузить иконки в каталог themes/multishop/img/colors/ЦВЕТ_ВАШЕЙ_ТЕМЫ/icons/:
Если каталог отсутствует, то зайдите в Сайт-Дизайн, выберите шаблон Multishop и нажмите Сохранить. После этого все файлы появятся.
Доступные иконки:
- blog.png, blog-active.png
- comment.png, comment-active.png
- contacts.png, contacts-active.png
- delivery.png, delivery-active.png
- payment.png, payment-active.png
- photo.png, photo-active.png
- shop.png, shop-active.png
- site.png, site-active.png
* * * 4. Слайдер * * *
Тема дизайна "Multishop" дает Вам возможность создания слайдеров без использования дополнительных плагинов или приложений.
Вам необходимо лишь будет внести некоторые изменения в шаблон.
Существует 3 вида слайдеров:
- Слайдер товаров магазина.
- Слайдер Ваших баннеров и фотографий (приложение Фото).
- HTML-слайдер
Рассмотрим подробнее каждый пункт.
4.1 Слайдер товаров магазина
Существует четыре режима отбора товаров для слайдера:
- set/bestsellers - получение списка товаров с идентификатором bestsellers
- category/437 - получение товаров из категории с идентификатором 437
- tag/украшения - получение товаров, имеющих тег украшения
- подготовленным массивом
Первые три режима объединены и имеют одинаковую конструкцию вызова:
{include file="slider.html" slider_id="12" search="set/bestsellers" search_count="7" name="Хиты продаж"}, где
- file="slider.html" - обязательный параметр, который указывает путь к шаблону слайдера.
- slider_id="12" - обязательный параметр, присваивает идентификатор слайдеру. Если Вы используете несколько слайдеров на одной странице, то параметры slider_id не должны повторяться.
ВНИМАНИЕ! Используйте значения slider_id > 10 - search="set/bestsellers" - получение списка товаров с идентификатором bestsellers. В поле search могут быть вставлены category/437 и tag/украшения
- search_count="7" - количество товаров, которые будут получены. Значение по умолчанию 10
- name="Хиты продаж" - заголовок, который появится перед слайдером.
Получение товаров подготовленным массивом подразумевает, что Вы в шаблоне получаете товары и передаете их слайдеру. Пример:
{$crossselling = $product->crossSelling()}
{include file="slider.html" slider_id=13 products=$crossselling}, где
- products=$crossselling - подготовленный массив с товарами
Допустимые параметры:
- slider_id - уникальный идентификатор слайдера (обязательный)
- search - режим получения товаров (обязательный)
- search_count - количество товаров
- name - заголовок, который появится перед слайдером
- auto - автоматическая прокрутка слайдов. Допустимые значения: true, false.
- speed - скорость переключения слайдов при автоматической прокрутке. Измерение в миллисекундах.
Пример,
{include file="slider.html" products=$crossselling speed="5000"}
В Настройках темы вы можете управлять слайдером на главной странице Магазина
4.2 Слайдер Ваших баннеров и фотографий
Слайдер использует бесплатное приложение Фото.
Рассмотрим шаги создания слайдера:
- Зайдите в приложение "Фото", создайте альбом с любым названием, указав в пункте "Доступ": "Приватный".
- Загрузите изображения в созданный альбом.
ВНИМАНИЕ, для изображений доступ должен быть "Опубликованный"! - При необходимости укажите в описании к фотографии ссылку на страницу, на которую должен вести слайд.
- Запомните идентификатор альбома.
- Вставьте слайдер в шаблон.
Существует два режима получения изображений для слайдера:
- album/1 - получение всех изображений альбома с идентификатором 1
- tag/украшения - получение изображений, имеющих тег украшения
Для встраивания слайдера используется код: {include file="slider.html" photos ="album/1" width="1300"}, где
- photos ="album/1" - все фотографии альбома с идентификатором 1. В поле photos может быть вставлено значение tag/украшения
- width="1300" - ширина изображения, которая будет сгенерирована из текущего и подставлена в слайдер. Значение по умолчанию 755px. Предварительно проверьте, что в Настройках приложения поддерживается требуемый размер и что включена генерация картинок "на лету".
Допустимые параметры:
- photos - режим получения изображений (обязательный)
- search_count - количество изображений
- width - ширина изображений
- height - высота изображений
- fullwidth=1 - включить широкоэкранный режим. Изображение будет растягиваться на всю ширину блока.
В Настройках темы вы можете управлять слайдером на главной странице Магазина
4.3 HTML-слайдер
В шаблоне home.html продемонстрировано, как создать свой слайдер. Вы можете изменить html-код на любой, который Вам необходим. Слайдер начинается с комментария <!-- CUSTOM SLIDER -->.
* * * 5. Страница категорий * * *
5.1 Отображение товаров
Товары могут отображаться плиткой или списком.
Пользователь сможет сам выбрать тип отображения товаров.
Также Вы можете установить тип отображения товаров по умолчанию, который увидит пользователь, впервые вошедший к Вам на сайт.
Для этого войдите в
Магазин -> Витрина -> Настройки темы -> Отображение товаров по умолчанию
5.2 Загрузка товаров (постраничная навигация / ленивая загрузка)
Товары могут быть загружены постранично или при помощи "ленивой загрузки".
Первый вариант означает, что пользователю будет загружено определенное количество товаров в каталоге. Для просмотра остальных ему необходимо будет перейти на страницы 2,3,4 и т.д.
"Ленивая загрузка" - динамическая подгрузка товаров с других страниц. Пользователь всегда остается на одной странице и по мере пролистывания списка товаров ему подгружаются остальные.
Выбрать, какую загрузку товаров пользователь будет использовать, Вы можете в Настройках темы:
Также, Вы можете использовать плагин "Количество товаров на странице". С его помощью пользователь сам будет выбирать, какое отображение использовать. В шаблоне предусмотрен дизайн для оформления данного плагина.
* * * 6 Страница товара * * *
6.1 Вкладки
На странице товара представлена подробная информация о товаре, содержащая:
- Описание товара
- Отзывы
- Характеристики
- Произвольные страницы
Все пункты динамически подгружаются, что позволяет снизить нагрузку на страницу.
Произвольные страницы можно добавить в пункте "Страницы" при редактировании товара.
6.2 Изображения
Используйте изображения размером 880х1080px или бОльшие по размеру с такими же пропорциями.
Это необходимо для улучшенного представления товаров.
6.3 Выбор характеристик
Для товаров в режиме продажи «Выбор характеристик» значения характеристик могут быть отображены двумя способами:
а) Показать все значения в ряд
б) Выбор из списка <select>
Данный выбор Вы можете сделать в Настройках темы.
Если Вы хотите конкретному товару установить свой тип отображения характеристик, отличающийся от выбранного в Настройках темы, то используйте параметр selectable_features, который может принимать соответственно 2 значения: inline и select. Указывайте данный параметр на странице товара в разделе Описание в поле Дополнительные параметры.
Пример, selectable_features=inline
* * * 7. Наклейки * * *
У каждого товара могут быть определенные наклейки:- Новинка
- Хит
- Скидка
- Текстовое значение скидки
- Любой текст
Для изменения наклейки зайдите в сам товар, выберите раздел Изображения, нажмите на изображение, и Вы увидете следующее:
На сайте Вы увидите:
Таким же образом можно поставить товару наклейку "Хит" или "Скидка".
Если Вы хотите явно указать размер скидки, то Вам нужно при выборе наклеек нажать на "Другой" и вставить следующий код:
<div class="badge sale"><span>-25%</span></div>
где "-25%" - произвольное значение скидки.
Вот, что Вы увидите на витрине:
Если Вы хотите использовать любой текст на наклейке, то используйте класс custom для наклейки:
Вы можете задать заднему фону наклеек разный цвет. Для этого к классу custom добавьте один из предложенных:
- black - черный
- red - красный
- orange - оранжевый
- yellow - желтый
- green - зеленый
- lightblue - голубой
- blue - синий
- purple - фиолетовый
- pink - розовый
Если Вы хотите установить свой цвет фона и текста для наклейки, то выполните следующие шаги:
- Откройте файл custom.shop.css в разделе Магазин - Витрина
- В самом конце файла на новой строчке вставьте код:
.badge.custom.dirtyred { background-color: #ee6f1a;}
.badge.custom.dirtyred span { color: #d9ffc0;}
dirtyred - это любое название вашего цвета на латинском языке
#ee6f1a - цвет заднего фона наклейки
#d9ffc0 - цвет текста наклейки - Нажмите Сохранить
- Теперь добавьте созданный цвет к классу custom, как показано на предыдущей картинке
* * * 8. Блок Новости * * *
На главной странице магазина имеется блок новостей, который реализован при помощи приложения Блог.
Как создать такой же?
- Создайте новый Блог.
- Добавьте в него Ваши новости.
- Запомните идентификатор блога.
- Зайдите в Магазин -> Витрина -> Настройки темы и впишите этот идентификатор в поле "Идентификатор блога новостей ", девятый пункт
8.1 Превью новости
К каждой новости на главной странице Магазина Вы можете прикрепить картинку (превью). Для этого:
- Зайдите в Блог новостей
- Нажмите на нужную Вам запись
- Справа есть блок Мета, нажмите редактировать и в "Дополнительных параметрах" укажите значение preview, которое должно содержать абсолютный путь к картинке превью.
Пример:
preview=http://mydomain.ru/wa-data/public/shop/themes/some_images/myimage.jpg - Нажмите Сохранить
Не загружайте большие картинки, используйте максимальную ширину в 250px.
Для загрузки изображений используйте Сайт-Файлы
8.2 Ссылка на сторонний сайт / блог
Если Вы хотите, чтобы Ваша новость вела на сторонний сайт, то Вы можете использовать еще один параметр external_link, который должен содержать ссылку на сторонний сайт. Не забудьте указывать http:// или https://.
Пример:
external_link=http://goaway.ru/
* * * 9. Фильтр товаров * * *
Для использования фильтра в каталоге товаров необходимо зайти в настройки категорий и поставить флаг "Разрешить фильтрацию товаров".
Изменить местоположение фильтра (поставить его сверху или снизу) Вы можете в "Настройках темы".
В фильтре используется максимальная цена, которая формируется следующим образом: из текущей категории перебирается 1000 первых товаров. Из них находится максимальная цена и подставляется в максимальное значение цены фильтра. Если у Вас в категории товаров больше, чем 1000, то Вы можете сами указать максимальную цену для фильтра категории.
В "Дополнительных параметрах" категории укажите числовое значение filter_max, которое и будет считаться максимальной ценой.
* * * 10. Подвал сайта * * *
В шаблоне footer.html Вы можете изменить элементы подвала сайта.
Также, в Настройках темы Вам доступно изменение текста копирайта, размера футера, произвольного текста и кнопок социальных сетей.
Размер футера может быть:
- большой
Это означает, что высота футера будет 305px. В нем появятся 3 колонки с информационными страницами, которые Вы можете заполнить на нужные Вам в шаблоне footer.html. - маленький
Высота футера 120px. Без дополнительных колонок.
* * * 11. Баннеры * * *
На главной странице Магазина имеются баннеры, которые Вы можете изменять.
Для встраивания своей информации в тело Большого баннера зайдите в раздел Сайт - Блоки. Создайте блок, ID которого multishop.big.banner. В этом блоке вы можете использовать свой HTML и CSS стили для отображения нужной Вам информации.
Если Вы хотите удалить Большой баннер, то зайдите в раздел Магазин - Витрина - home.html, найдите блок <!-- Big banner --> ... <!-- End --> и удалите его.
Для управления маленькими баннерами используйте Настройки темы и приложение Фото. Каждому баннеру можно присвоить ссылку. Подробнее о работе с приложением Фото читайте в разделе 4.2 Слайдер Ваших баннеров и фотографий
* * * 12. Иконки способов оплаты * * *
В Настройках темы Вы можете выбрать иконки способов оплаты на Вашем сайте, которые будут отображаться в подвале (футере) сайта. Количество видимых иконок равно 8.
Для того чтобы отобразить любой из способов оплаты в другом месте сайта используйте код:
<i class="payment-icon %КЛАСС ИКОНКИ%"><i>,
где
%КЛАСС ИКОНКИ% - один из доступных классов способов оплаты
Доступные иконки:
- qiwi
- rbk-money
- robokassa
- privat-bank
- sberbank
- skrill-moneybookers
- telemoney
- unistream
- visa
- webmoney
- western-union
- yandex-money
- alfabank
- american-express
- assist
- payu
- cirrus
- contact
- diners-club
- elecsnet
- intellectmoney
- jcb
- maestro
- mail-money
- mastercard
- migom
- moneymail
- mts-bank
- paypal
- chronopay

Пример:
<i class="payment-icon webmoney"><i>
* * * 13. Эскизы изображений * * *
В шаблоне используются следующие эскизы изображений:
- 77x96
- 100x100
- 148x182
- 200x245
- 350xАвто
- 880x1080
- 970xАвто
Рекомендуется загружать изображения с такими пропорциями, чтобы отношение ширины к высоте равнялось 0,814