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

Шаблон "Muza"

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

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

Внимание

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

Шаблон "Muza" - 2052
Рисунок 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/images/1.jpg" /></a></div>

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

Мы используем cookies. Подробнее...