Шаблон "Muza"

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

• Особенности шаблона "Muza" 
• Статические блоки над разделом "Подписка на новости"
• "Баннер большой перед блоком подписки на новости (вкладки)"
• Карточка товара

Внимание

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

 

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

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

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

Рисунок 1.

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

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

Рисунок 2.

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

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

Рисунок 3.

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

Рисунок 4.

После установки шаблона, статические блоки необходимо добавить самостоятельно. Для этого следует перейти в раздел "Дизайн" - "Параметры" - "Страницы и блоки" - "Блоки", нажать  "Добавить статический блок"(рис.5).

Рисунок 5.

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

 

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

Рисунок 6.

По шаблону доступно два спец блока:

Первый блок слева, занимает четверть экрана, лучше всего подходит для размещения в нем баннера, данный блок называется "Баннер малый перед блоком подписки на новости".

Для добавления блока необходимо перейти в раздел "Дизайн"-"Параметры"-"Страницы и блоки"-"Блоки", нажажать кнопку "Добавить статический блок" (рис. 5).

В открывшемся окне указываем ключ доступа "MuzaMainpageBlockSmall" название "Баннер малый перед блоком подписки на новости", устанавливаем активность. В режиме "Источник" добавляем код:

<a href="http://muza.on-advantshop.net/categories/kresla-1">
<img src="userfiles/b7.png" style="border-radius:0.325rem;" />
</a>

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

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

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

Рисунок 7.

В разделе "Дизайн"-"Параметры"-"Страницы и блоки"-"Блоки"нажимаем кнопку "Добавить статический блок", указываем ключ доступа "MuzaMainpageBlockBig" и название "Баннер большой перед блоком подписки на новости (вкладки)", устанавливаем активность, в режиме "Источник" прописывам следующий код, заменив названия и картинки на свои (рис.8).

Рисунок 8.

<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>

После чего нажимаем добавить.

 

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

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

Рисунок 10.

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