Шаблон "Drive"

В данной статье рассмотрим настройку оформления блоков в шаблоне "drive" и особенности шаблона.

Внимание!

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

Статические блоки

• Блок в оформлении заказа (шаблон Drive)
• Меню в футере,мобильная версия (шаблон Drive)
• Блок в выезжающем меню, мобильная версия (шаблон Drive)
• Блок на главной (шаблон Drive)

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

• Особенности шаблона
• Карточка товара
• Мобильная версия

Заметка

Стиль отображения меню - Аккордеон
Рекомендуемое количество товаров в строке на главной: максимально 3
Рекомендуемое количество товаров в строке в каталоге: максимально 3
Модуль “Успей купить” - выводить горизонтально
Десять вариантов цветовых схем с градиентом

 

Блок в оформлении заказа (шаблон Drive)

Рисунок 1. 

Для редактирования блока перейдите в раздел "Мои сайты" - "Страницы и блоки", найдите в списке блок с названием "Статический блок в оформлении заказа (шаблон Drive)" и с ключом доступа "DriveCheckoutInfo", после чего перейдите в его редактирование (рис.2)

Рисунок 2.

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

Рисунок 3.

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

1 - Изображение, путь к изображению, вы можете поменять данный путь (предварительно загрузив изображение на сайт);

2 - Заголовок.

 

Меню в футере, мобильная версия (шаблон Drive)

Рисунок 4.

Для редактирования блока перейдите в раздел "Мои сайты" - "Страницы и блоки", найдите в списке блок с названием "Меню в футере, мобильная версия (шаблон Drive)" и с ключом доступа "DriveMobileFooterBottom" (рис. 5), после чего перейдите в его редактирование:

Рисунок 5.

Данный блок будет отображаться только в мобильной версии сайта.

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

Рисунок 6.

Вы можете размещать свои пункты меню, добавлять любое количество пунктов, скопировав строчку от <div> и до </div>

Заменяете наименование пункта меню и меняете ссылку.

Ссылка формируется следующим образом: <a href="#">заголовок пункта меню</a>

Вместо "#" в кавычках Вы указываете путь, куда клиент должен переходить при нажатии на пункт меню.

Блок в выезжающем меню, мобильная версия (шаблон Drive)

Рисунок 7.

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

Рисунок 8.

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

Рисунок 9.

Теперь рассмотрим, какие параметры вы можете изменять:

Вы можете изменить email и после mailto поставьте также свой email (рис.9, цифра 2).

Далее поменяйте номера телефонов (рис.9, цифра 3).

И проставьте ссылки на все иконки, если иконка мессенджера, то ставите свой номер телефона, если ссылка на соц.сети, то ставите ссылку на вашу страницу в соц.сети.
Ссылка формируется следующим образом: <a href="#">текст</a>

Вместо "#" в кавычках вы указываете путь, куда клиент должен переходить при нажатии на текст или иконку.

Если какие-то иконки не нужны, удалите их.

Статический блок на главной (шаблон Drive)

Рисунок 10.

Для редактирования блока перейдите в раздел "Мои сайты" - "Страницы и блоки", найдите в списке блок с названием "Статический блок на главной (шаблон Drive)" и с ключом доступа "Home_Statick_Block" (рис. 11) после чего перейдите в его редактирование:

Рисунок 11.

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

Рисунок 12.

Теперь рассмотрим, какие параметры вы можете изменять:

Вы можете изменить текст на баннере (рис.12, цифра 2,3).

Далее можете изменить сам баннер (предварительно картинку нужно загрузить на сайт) (рис.12, цифра 4).

И проставьте ссылку, куда клиент должен переходить при нажатии баннер.
Ссылка формируется следующим образом: <a href="#">текст</a>

Вместо "#" в кавычках вы указываете путь.

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

Авторизация пользователей выведена во всплывающем окне (рис. 13, 14)

Рисунок 13.

Рисунок 14.

Блок Скидки и Хиты продаж представлены каруселью в правой части главной страницы (рис. 15)

Рисунок 15.

Корзина в шаблоне всплывающая и на всю высоту экрана в правой части сайта (рис. 16)

Рисунок 16.

Пункты меню каталога в левой части главной страницы разворачиваются при клике (рис. 17)

Рисунок 17.

Добавлена кнопка "В желаемое" (рис. 18)

Рисунок 18.

В представлении товара валюта обозначена символом российского рубля ( ₽ ) (рис. 19)

Рисунок 19.

Акцентно представлен блок "Подписка на новости" (рис. 20)

Рисунок 20.

Структурно изменен подвал сайта: главное меню и меню каталога перенесено в левую часть, добавлен логотип и блок с иконками соц.сетей (рис.21).

Рисунок 21.

Кнопка "наверх" перенесена в левую часть экрана (рис.22).

Рисунок 22.

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

Блоки "Описание", "Характеристики", "Отзывы" разворачиваются при клике (рис.23).

Рисунок 23.

Поля "Добавить в сравнение" и "Добавить в список желаний" расположены под кнопками "Добавить" и "Купить в один клик" (рис.24).

Рисунок 24.

 

Мобильная версия

Главная особенность мобильной версии, что находится в данном шаблоне, это возможность просматривать фотографии товара в увеличенном виде при нажатии на неё.

Добавлена кнопка "Наверх" в мобильной версии (рис.25).

Рисунок 25.

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

Готово. Мы рассмотрели особенности и настройку шаблона "Drive".