Мастер-класс Быстрый запуск интернет-магазина

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

Шаблон "Alfa"

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

Внимание

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

В данной статье рассмотрим особенности шаблона и оформление блоков на главной:

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

Отметим основные особенности данного шаблона:

- стильный и лаконичный;

- переработанная мобильная версия магазина;

- привлекающий внимание элемент "Корзина";

- облегченный вариант вывода представления товара в каталоге;

- дополнительный блок на главной странице "Почему мы";

- более акцентированный вывод блок "Подписка на новости";

- специальный статический блок "Спецпредложения";

- измененная страница товара - акцентирование на целевое действие - кнопка "Купить".

Заметка

1. Отображение главной страницы – две колонки.
2. Стиль отображения меню – современный.
3. Расположение поиска – верхнее меню.
4. Статический блок «Преимущества на главной».

Блок "[t] Основные преимущества на главной"


Рисунок 1.

Для редактирования блока, перейдите в раздел "CMS - Статические блоки", найдите в списке блок с названием "[t] Преимущества на главной" и с ключом доступа "AlfaMainAdvantages" (рис. 2), после чего перейдите в его редактирование:


Рисунок 2.

Нажмите на кнопку "Источник", чтобы перейти в редактирование HTML-кода (рис. 3):


Рисунок 3.

Теперь рассмотрим, какие параметры Вы можете изменять для настройки:

1) Заголовок блока.

2) Адрес, где лежит изображение преимущества.

3) Надпись преимущества.


Рисунок 4.

Блок “[t] Основные продукты на главной”


Рисунок 5.

Для редактирования блока, перейдите в раздел "CMS - Статические блоки", найдите в списке блок с названием "Основные продукты на главной" и с ключом доступа "AlfaMainProduct" (рис. 6), после чего перейдите в его редактирование:


Рисунок 6.

Нажмите на кнопку "Источник", чтобы перейти в редактирование HTML-кода (рис. 7):


Рисунок 7.

Теперь рассмотрим, какие параметры Вы можете изменять для настройки:

1) Заголовок блока.


Рисунок 8.

2) Адрес, где лежит изображение баннера.


Рисунок 9.

3) Надпись на баннере при наведении.


Рисунок 10.

4) Цена на баннере


Рисунок 11.

5) Надпись на кнопке и ссылка, куда ведет кнопка


Рисунок 12.

Блок "[t] Блок контактов в футере"


Рисунок 13.

Для редактирования блока перейдите в раздел "CMS"- "Статические блоки", найдите в списке блок с названием "[t] Блок контактов в футере" с ключом доступа "AlfaFooterContacts" (рис. 14), после чего перейдите в его редактирование:


Рисунок 14.

Нажмите на кнопку "Источник", чтобы перейти в редактирование HTML-кода (рис. 15):


Рисунок 15.

Теперь рассмотрим, какие параметры Вы можете изменять для настройки:

1) Строки с контактами.


Рисунок 16.

2) Адрес, где лежит изображение баннера.


Рисунок 17.

3) Стили для иконок контактов.


Рисунок 18.

  • vertical-align - выравнивание картинки;
  • margin-right - отступ от картинки с правой стороны.

Измененная мобильная версия

1. Измененная панель меню (рис. 19).


Рисунок 19.

  • Меню - отображаются все пункты меню, указанные разделе “CMS - Меню - Мобильное меню” (рис. 20).


Рисунок 20.

  • Каталог - в выпадающем списке выводятся все имеющиеся в магазине категории.
  • Иконка поиска - при нажатии на иконку поиска появляется строка для ввода необходимого значения для поиска (рис. 21).


Рисунок 21.

  • Иконка корзины - отображается количество добавленных в корзину товаров, при нажатии на иконку можно перейти в корзину.

2. Расположение карточек товара - стандартное расположение карточек товара плиткой по 2 товара в строке (рис. 22).


Рисунок 22.

Также можно изменить расположение товаров на “Список” (рис. 23) в клиентской части, либо в панели администрирования в разделе “Настройки - Каталог товаров”. При этом товары на главной (новинки, хиты) так же будут отображаться в виде плитки.


Рисунок 23.

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

Более широкая кнопка “Добавить” (рис. 24).


Рисунок 24.

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

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

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

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

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

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

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

Тэги: шаблон, Альфа, alfa, fkmaf