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

Шаблон "Voyage"

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

Внимание

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

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

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

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

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

- рекомендуемое количество товаров в строке в каталоге от трёх до шести;

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

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

Как найти статический блок

Заметка

У каждого из статических блоков, которые относятся к данному шаблону, в названии указано “шаблон Voyage”

Чтобы найти статический блок, следует перейти в раздел CMS -> Статические блоки, далее в строке поиска необходимо ввести наименование блока, среди поисковой выдачи выбрать нужный и перейти к редактированию (рис.1)


Рисунок 1.

Далее открывается окно с кодом. Следует перейти в режим “Источник”, проверить активность блока, внести необходимые корректировки и выполнить сохранение (рис.2)


Рисунок 2.

О нас

Данный статический блок отображается в нижней части главной страницы и содержит стандартный блок для ввода текста, отредактировать который можно в разделе CMS - Статические блоки.

Лучшее предложение


Рисунок 3.

Рассмотрим подробнее, за что отвечает каждая из частей данного кода:


Рисунок 4.

Здесь 1,3, 5 - ссылки на ресурс, куда должен быть переход при нажатии на баннер, 2 - ссылка на большое изображение с сервера, рекомендуемый размер 780px * 280px, 3 и 4 - ссылки на средние изображения с сервера, рекомендуемый размер 380px * 580px. Изменить показатели в блоках “Покупателей сегодня” и “Заказов сегодня” можно в следующей части кода:


Рисунок 5.

Далее расположен блок, в котором отображаются товарные предложения:


Рисунок 6.

Здесь 1 - ссылка на изображение товара на сервере, рекомендуемый размер 200px * 360px, 3,6,8 - наименования и цена на товарное предложение, 2, 4, 5, 7, 9 - ссылка на ресурс, куда должен выполняться переход при нажатии на данное товарное предложение. Таких блоков далее по коду ещё три: т.е. в этом статическом блоке предусмотрено 4 позиции для лучших товарных предложений.

Новая коллекция


Рисунок 7.

В коде статического блока нужно внести изменения в следующих частях кода:


Рисунок 8.

Здесь 1 - ссылка на ресурс, куда будет выполнен переход при нажатии на данное изображение, 2 - ссылка на изображение на сервере, рекомендуемый размер 380px * 280px. Таких картинок три, корректировки нужно внести для каждого класса.

Блог на главной


Рисунок 9.

Рассмотрим код, который соответствует данному статическому блоку


Рисунок 10.

Здесь 1 - ссылка на ресурс, куда будет выполнен переход при нажатии на данное изображение, 2 - ссылка на изображение на сервере, рекомендуемый размер 1180px * 280px

Фото в блоке "Новости"


Рисунок 11.

Рассмотрим код, который соответствует данному статическому блоку


Рисунок 12.

Здесь 1 - ссылка на изображение на сервере, рекомендуемый размер 580px * 290px, 2- ссылка на ресурс, куда будет выполнен переход при нажатии на кнопку “Все новости” (при необходимости можно переименовать название кнопки)

Обратная связь и обратный звонок


Рисунок 13.

Рассмотрим код, который соответствует данному статическому блоку


Рисунок 14.

Здесь 1 - ссылка на форму обратной связи (ссылка стандартная в платформе), 2 и 3 - ссылки на изображение картинок, при нажатии на которые будет выполняться переход к форме обратной связи и форме обратного звонка соответственно. Рекомендуемый размер картинок, загружаемых на сервер для данного блока, 20px * 20px

Способы оплаты


Рисунок 15.

Рассмотрим код, который соответствует данному статическому блоку


Рисунок 16.

Здесь 1 - ссылка на изображение на сервере, 2 - ссылка на ресурс (например, на статическую страницу, где будут описаны все условия оплаты), куда будет выполнен переход при нажатии на картинку с иконками способов оплаты

Блок мы в соц сетях


Рисунок 17.

Рассмотрим код, который соответствует данному статическому блоку


Рисунок 18.

Здесь 1,2,3,4 - ссылки на аккаунт магазина в соответствующей социальной сети, 5,6,7,8 - ссылки на иконки изображений для соответствующих социальных сетей

Популярные бренды


Рисунок 19.

Рассмотрим код, который соответствует данному статическому блоку


Рисунок 20.

Здесь 1 - заголовок блока, при необходимости можно поменять. 2 и 5 - названия блоков-категорий брендов, 3 и другие схожие конструкции ниже - ссылки на ресурс, куда будет выполнен переход при нажатии на изображение бренда, 4- ссылка на изображение бренда на сервере, рекомендуемый размер 165px *70px. Каждому изображению бренда соответствует своя ссылка, в каждом столбце по 4 бренда, в статическом блоке 6 столбцов, где могут быть размещены бренды

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

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


Рисунок 21.

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


Рисунок 22.

  • Каталог - в выпадающем списке выводятся все имеющиеся в магазине категории (рис.22).


Рисунок 23.

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


Рисунок 24.

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

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


Рисунок 25.

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


Рисунок 26.

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

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


Рисунок 27.

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

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

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

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

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

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

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

Тэги: voyage, шаблон voyage, шаблон вояж, ваяж, вояш, ваяш