Как вам помочь ?

Шаблон "Muza"

Статья актуальна для версии магазина: 8.0 | 7.0-6.5

Внимание

Шаблон "Muza" может быть установлен только на магазин версии 6.5.4 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до последней актуальной версии на момент установки шаблона.

В данной статье рассмотрим настройки и особенности шаблона "Muza".

Особенности шаблона "Muza"

- Режим отображения главной страницы "Одна колонка".

- Главное меню скрывает категории, которые не поместились на экране, справа в меню добавляется выпадающий список "Остальные категории" (рис.1).

Шаблон "Muza" - 7398
Рисунок 1.

- В данном шаблоне 25 цветовых схем и 10 фонов.

- Новый стильный внешний вид маркеров (рис.2).

Шаблон "Muza" - 5333
Рисунок 2.

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

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

Шаблон "Muza" - 9627
Рисунок 3.

Подвал в шаблоне выполнен в черном цвете (рис.4).

Шаблон "Muza" - 5411
Рисунок 4.

Как найти статический блок

Заметка

У каждого из статических блоков, которые относятся к данному шаблону, в названии ключа доступа указано "Muza".

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

Шаблон "Muza" - 2947
Рисунок 5.

Далее открывается окно с кодом. Следует перейти в режим "Источник", проверить активность блока, внести необходимые корректировки и выполнить сохранение (рис.6).

Шаблон "Muza" - 7117
Рисунок 6.

Ниже рассмотрим какие блоки представлены в шаблоне "Muza".

Статические блоки над разделом "Подписка на новости"

Шаблон "Muza" - 1756
Рисунок 7.

Как показано на рис.7 два блока
- первый блок слева, занимает четверть экрана, лучше всего подходит для размещения в нем баннера, данный блок называется "Баннер малый перед блоком подписки на новости".
- второй блок справа называется "Баннер большой перед блоком подписки на новости (вкладки)", блок занимает всю ширину экрана при неактивном блоке с малым баннером и 3/4 экрана при активном блоке. Данный блок может содержать в себе рекламные баннеры, описание компании, либо вкладки с товарами.

Вкладки с товарами в блоке "Баннер большой перед блоком подписки на новости (вкладки)"

Рассмотрим как сделать подобные вкладки (рис.8).

Шаблон "Muza" - 3707
Рисунок 8.

Для того, чтобы у блока были вкладки с ссылками на товары, необходимо в статическом блоке "Баннер большой перед блоком подписки на новости (вкладки)" в режиме "Источник" прописать следующий код, заменив названия и картинки на свои (рис.9).

Шаблон "Muza" - 8285
Рисунок 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).

Шаблон "Muza" - 4793
Рисунок 10.

Готово. В данной инструкции мы рассмотрели основные настройки шаблона "Muza".

Другие статьи по теме

Статья оказалась полезной? Да Нет
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: шаблон, муза, muza, товары, дизайн, vepf