Шаблон "Drive"

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

Внимание!

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

Стиль отображения меню - Аккордеон

Рекомендуемое количество товаров в строке на главной: максимально 3

Рекомендуемое количество товаров в строке в каталоге: максимально 3

Модуль “Успей купить” - выводить горизонтально

Десять вариантов цветовых схем с градиентом

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

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

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

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

 

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

Рисунок 1. 

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

Рисунок 2.

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

Рисунок 3.

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

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

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

 

Блок с социальными сетями в футере (шаблон Drive)

Рисунок 4.

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

Рисунок 5.

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

Рисунок 6.

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

Рис.6, цифра 2 - ссылка на соц.сети, можете разместить свою ссылку.

Рис.6, цифра 3 - иконки соц.сети, предварительно загрузив иконку на сайт.

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

Рисунок 7.

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

Рисунок 8.

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

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

Рисунок 9.

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

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

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

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

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

Рисунок 10.

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

Рисунок 11.

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

Рисунок 12.

Вы можете изменить ссылку на соц.сети и иконку соц.сети (предварительно загрузив иконку на сайт).

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

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

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

Рисунок 13.

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

Рисунок 14.

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

Рисунок 15.

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

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

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

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

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

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

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

Рисунок 16.

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

Рисунок 17.

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

Рисунок 18.

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

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

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

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

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

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

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

Рисунок 19.

Рисунок 20.

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

Рисунок 21.

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

Рисунок 22.

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

Рисунок 23.

В блоке "Похожие товары" добавлена кнопка "В желаемое" (рис. 24)

Рисунок 24.

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

Рисунок 25.

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

Рисунок 26.

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

Рисунок 27.

При добавлении в корзину товаров на сумму более 50тыс. руб. на главной странице и на странице товара появляется сообщение о бесплатной доставке/скидке (рис.28).

Рисунок 28.

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

Рисунок 29.

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

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

Рисунок 30.

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

Рисунок 31.

 

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

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

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

Рисунок 32.

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

Всё готово.