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

Шаблон "Muza"

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

Внимание

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

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

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

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

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


Рисунок 1.

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

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


Рисунок 2.

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

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


Рисунок 3.

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


Рисунок 4.

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

Заметка

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

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


Рисунок 5.

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


Рисунок 6.

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

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


Рисунок 7.

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

Вкладки с товарами в блоке "MuzaMainpageBlockBig"

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


Рисунок 8.

Для того, чтобы у блока были вкладки с ссылками на товары, необходимо в статическом блоке "MuzaMainpageBlockBig" в режиме "источник" прописать следующий код, заменив названия и картинки на свои (рис.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/images /2.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /1.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /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/images /6.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /5.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /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/images /7.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /8.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /9.png" /></a></div>
</div>
</div>
</div>
</div>

После чего сохранить изменения.

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

Изменился дизайн карточки товара (рис.10)


Рисунок 10.

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

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

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

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

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

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

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

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