Как вам помочь ?
Шаблон "Muza"
Внимание
Шаблон "Muza" может быть установлен только на магазин версии 6.5.4 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до последней актуальной версии на момент установки шаблона.
В данной статье рассмотрим настройки и особенности шаблона "Muza".
- Особенности шаблона
- Блоки над разделом "Подписка на новости"
- Вкладки с товарами в блоке "Баннер большой перед блоком подписки на новости (вкладки)"
- Карточка товара
Особенности шаблона "Muza"
- Режим отображения главной страницы "Одна колонка".
- Главное меню скрывает категории, которые не поместились на экране, справа в меню добавляется выпадающий список "Остальные категории" (рис.1).
Рисунок 1.
- В данном шаблоне 25 цветовых схем и 10 фонов.
- Новый стильный внешний вид маркеров (рис.2).
Рисунок 2.
- Шаблон идеально подходит для ниши мебели, детских товаров, игрушек и одежды, особенно выигрышно смотрится со светлыми товарами.
- Компактное отображение карточек товаров за счет скрытия кнопок "Добавить в корзину", "Добавить в сравнение" и рейтинга товаров, данные поля отображаются при наведении на карточку товара. Таким образом внимание покупателя акцентируется на главном (рис.3).
Рисунок 3.
Подвал в шаблоне выполнен в черном цвете (рис.4).
Рисунок 4.
Как найти статический блок
Заметка
У каждого из статических блоков, которые относятся к данному шаблону, в названии ключа доступа указано "Muza".
Чтобы найти статический блок, следует перейти в раздел "Каналы продаж" - "Интернет-магазин" далее "Параметры магазина" - "Статические блоки", в строке поиска необходимо ввести наименование блока, среди поисковой выдачи выбрать нужный и перейти к редактированию (рис.5).
Рисунок 5.
Далее открывается окно с кодом. Следует перейти в режим "Источник", проверить активность блока, внести необходимые корректировки и выполнить сохранение (рис.6).
Рисунок 6.
Ниже рассмотрим какие блоки представлены в шаблоне "Muza".
Статические блоки над разделом "Подписка на новости"
Рисунок 7.
Как показано на рис.7 два блока
- первый блок слева, занимает четверть экрана, лучше всего подходит для размещения в нем баннера, данный блок называется "Баннер малый перед блоком подписки на новости".
- второй блок справа называется "Баннер большой перед блоком подписки на новости (вкладки)", блок занимает всю ширину экрана при неактивном блоке с малым баннером и 3/4 экрана при активном блоке. Данный блок может содержать в себе рекламные баннеры, описание компании, либо вкладки с товарами.
Вкладки с товарами в блоке "Баннер большой перед блоком подписки на новости (вкладки)"
Рассмотрим как сделать подобные вкладки (рис.8).
Рисунок 8.
Для того, чтобы у блока были вкладки с ссылками на товары, необходимо в статическом блоке "Баннер большой перед блоком подписки на новости (вкладки)" в режиме "Источник" прописать следующий код, заменив названия и картинки на свои (рис.9).
Рисунок 9.
<div class="tabs tabs-horizontal tabs-on-main" data-tabs="">
<div class="row tabs-header">
<div class="col-xs-auto">
<ul class="tabs-headers clear">
<!—Здесь необходимо заменить названия вкладок-->
<li class="tabs-header-item" data-ng-class="{'tabs-header-active cs-br-1' :
tabHeader.selected}" data-ng-hide="!tabHeader.isRender" data-tab-header="" id="tab1"
><a class="tabs-header-item-link" data-ng-class="{'tab-not-active' :
!tabHeader.selected, 'cs-l-2 link-dotted-none' : tabHeader.selected}"
data-ng-click="tabs.change(tabHeader)" href=""> Диваны </a></li>
<li class="tabs-header-item" data-ng-class="{'tabs-header-active cs-br-1' :
tabHeader.selected}" data-ng-hide="!tabHeader.isRender" data-tab-header="" id="tab2"
><a class="tabs-header-item-link" data-ng-class="{'tab-not-active' :
!tabHeader.selected, 'cs-l-2 link-dotted-none' : tabHeader.selected}"
data-ng-click="tabs.change(tabHeader)" href=""> Офисные кресла </a></li>
<li class="tabs-header-item" data-ng-class="{'tabs-header-active cs-br-1' :
tabHeader.selected}" data-ng-hide="!tabHeader.isRender" data-tab-header="" id="tab3"
><a class="tabs-header-item-link" data-ng-class="{'tab-not-active' :
!tabHeader.selected, 'cs-l-2 link-dotted-none' : tabHeader.selected}"
data-ng-click="tabs.change(tabHeader)" href=""> Детская мебель </a></li>
</ul>
</div>
<div class="col-xs">
<div class="line"> </div>
</div>
</div>
<div class="tabs-content">
<div class="tab-content clear" data-ng-class="{'tab-content-active': tabContent.header.selected}"
data-tab-content="tab1">
<div class="row">
<!—Здесь необходимо заменить содержимое вкладки 1-->
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /2.png" /></a></div>
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /1.png" /></a></div>
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /3.png" /></a></div>
</div>
</div>
<div class="tab-content clear" data-ng-class="{'tab-content-active': tabContent.header.selected}" data-tab-content="tab2">
<div class="row">
<!—Здесь необходимо заменить содержимое вкладки 2-->
<div class="col-xs"><a href="#"><img class="tabs-product-img" src="Templates/Muza/80s /6.png" /></a></div>
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /5.png" /></a></div>
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /4.png" /></a></div>
</div>
</div>
<div class="tab-content clear" data-ng-class="{'tab-content-active': tabContent.header.selected}" data-tab-content="tab3">
<div class="row">
<!—Здесь необходимо заменить содержимое вкладки 3-->
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /7.png" /></a></div>
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /8.png" /></a></div>
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /9.png" /></a></div>
</div>
</div>
</div>
</div>
После чего сохранить изменения.
Карточка товара
Изменился дизайн карточки товара (рис.10).
Рисунок 10.
Готово. В данной инструкции мы рассмотрели основные настройки шаблона "Muza".
Другие статьи по теме
Тэги: шаблон, муза, muza, товары, дизайн, vepf