Шаблон "Sushi"

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

• Особенности шаблона
  • Режим лендинга
  • Быстрый просмотр
  • Темная тема
  • Скругление элементов
  • Ширина
• Шапка
• Виджет доставки на главной странице
• Карточка товара
  • Характеристики товара
  • Показ краткого описания
  • Варианты товаров
• Каталог
• Хлебные крошки
• Подписка на новости
• Подвал
• Блоки шаблона
  • Блок-банер перед заголовком на странице категории
  • Блок-банер перед подвалом
  • Блок-банер перед новостями
  • Блок-банер в подвале справа

Внимание

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

 

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

Функциональное отличие шаблона "Sushi" от других шаблонов:

• главная страница представлена в режиме лендинга;
• меню категорий представлено якорем на блок товаров;
• возможность отключения отдельных страниц категорий и карточек товара;
• возможность переключения на темную тему с одновременным использованием своих темы/фона;
• скругление активных элементов (карусель, кнопки, поля форм);
• увеличение ширины рабочей области.

Рассмотрим детальнее как воспользоваться описанным функционалом.

 

Режим лендинга

Чтобы включить режим лендинга (одностраничник) необходимо перейти в раздел "Дизайн" - "Параметры" - "Главная страница", включить настройки "Отображать категории списком на главной странице в десктопе (выводятся только категории первого уровня)" и "Включить режим лендинга (работает при вкл. настройке 'Отображать категории на главной')" (рис. 1).

Рисунок 1.

Внимание!

Если отключить опцию "Включить режим лендинга", но оставить активную настройку "Отображать категории списком на главной странице в десктопе ", то просмотреть товары будет не возможно, настройки взаимосвязаны, если отключаете одну, необходимо отключить и вторую.

Для активации режима в мобильной версии необходимо в разделе "Дизайн" - "Параметры" - "Главная страница" включить настройку "Отображать категории списком на главной странице в мобильной версии (выводятся только категории первого уровня)", и настройка "Включить режим лендинга" должна быть активна (рис. 2).

Рисунок 2.

Карточки товара в мобильной версии представлены полноценной страницей.

Быстрый просмотр

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

Рисунок 3.

 

Темная тема

Для использования темной темы сайта в разделе "Дизайн" - "Параметры" - "Основные" необходимо активировать опцию "Использовать темную тему" (рис. 4).

Рисунок 4.

В клиентской части отображение будет иметь вид (рис. 5).

Рисунок 5.

Также в разделе "Дизайн" - "Параметры" - "Основные" доступно изменение темы/фона, в таком случае в клиентской части рабочая область сайта будет использовать темную тему, свободная область будет занята темой/фоном из основных настроек дизайна. Также можно загружать свою тему и фон (рис. 6).

Рисунок 6.

 

Скругление элементов

Для того чтобы включить скругление элементов (кнопок, полей, баннеров) необходимо в разделе "Дизайн" - "Параметры" - "Основные" деактивировать опцию "Убрать скругления у полей, кнопок и др. эл-тов" (рис. 7).

Рисунок 7.

В клиентской части отображение будет иметь вид (рис. 8).

Рисунок 8.

 

Ширина

По умолчания ширина рабочей области сайта составляет 1160px, т. е при просмотре с большого экрана остается много свободного пустого пространства, что не всем может понравиться. Только в шаблоне "Sushi" предусмотрена специальная настройка, позволяющая увеличить ширину экрана до 1500px. Для активации настройки необходимо перейти в раздел "Дизайн" - "Параметры" - "Основные" (рис. 9).

Рисунок 9.

 

Шапка

Меню категорий, пункты меню и корзина в шаблоне зафиксированы и двигаются с прокруткой экрана. Отключить фиксирование шапки при прокрутке, можно в разделе "Дизайн" - "Параметры" - "Основные" (рис. 10).

Рисунок 10.

Опционально можно выводить/ не выводить номер телефона в шапке сайта, активировать номер телефона в шапке можно в разделе "Дизайн" - "Параметры" - "Основные" (рис. 11).

Рисунок 11.

В клиентской части номер телефона будет выводиться перед личным кабинетом (рис. 12). Номер телефона не выводится в фиксированной шапке при прокрутке.

Рисунок 12.

В шаблоне "Sushi" предусмотрена возможность вывода пунктов меню личного кабинета в шапке сайта (не проваливаясь в сам личный кабинет можно перейти в нужный раздел). Для активации функционала необходимо перейти в раздел "Дизайн" - "Параметры" - "Основные" (рис. 13).

Рисунок 13.

В клиентской части при наведении на кнопку личного кабинета будет выпадать меню подпунктов (рис. 14).

Рисунок 14.

 

Виджет доставки на главной странице

Виджет доставки позволяет покупателю выбрать предпочтительный способ доставки на главной странице магазина при посещении до перехода на страницу оформления заказа. Подробнее об этом можно прочитать в статье Типы доставки.

 

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

• Характеристики товара
• Показ краткого описания
• Варианты товаров

 

Характеристики товара

Как рассмотрели ранее, шаблон может работать в двух режимах: полноценный сайт или лендинг. В режиме одностраничника в карточке товара можно опционально включить вывод артикула, описания, характеристик, отзывов. Настройки активируются в разделе "Дизайн" - "Параметры" - "Карточка товара" (рис. 15).

Рисунок 15.

Карточка товара будет иметь вид (рис. 16).

Рисунок 16.

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

 

Показ краткого описания

Чтобы включить отображение краткого описания товара на главной странице, пройдите в раздел "Дизайн" - "Параметры" - "Главная страница". Затем включите опцию "Отображать краткое описание на главной". (рис. 17).

Рисунок 17.

На главной это будет выглядеть, как на (рис. 18).

Рисунок 18.

 

Варианты товаров

Если у товара есть модификации (вариации по цвету/размеру), то у товара отображается кнопка "Выбрать" (рис. 19).

Рисунок 19.

Важно

Кнопка "Выбрать" отображается только для товаров, использующих модификации с цветом или размером. Если товар имеет только дополнительные опции, то кнопка "Добавить" не изменится, но вместо добавления товара в корзину, будет открыта страница товара, где покупатель сможет выбрать опции.

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

Рисунок 20.

Мы рассмотрели ряд настроек карточки товара.

 

Каталог

Если в магазине добавлена новая категория, но товары еще в процессе добавления или все товары не в наличии, то в магазине будет выводиться сообщение (рис. 21).

Рисунок 21.

Изменить текст можно в разделе "Дизайн" - "Параметры" - "Категория товаров" (рис. 22).

Рисунок 22.

Если отключен режим лендинга и можно перейти в каталог товаров, то для того, чтобы отображалось дерево категорий, необходимо включить настройку "Выводить категории справа в каталоге" в разделе "Дизайн" - "Параметры" - "Категория товаров" (рис. 23).

Рисунок 23.

Дерево будет выводиться как на (рис. 24).

Рисунок 24.

 

Хлебные крошки

Хлебные крошки - это навигационная цепочка на сайте, которая отражает путь до текущей страницы. Если режим лендинга отключен/карточка товара открывается не в быстром просмотре, то в каталоге/карточке товара можно выводить/не выводить хлебные крошки. Функционал регулируется настройками (рис. 25).

Рисунок 25.

 

Подписка на новости

Блок подписки на новости в шаблоне также имеет свои особенности: можно добавить подзаголовок и задать фоновое изображение (рис. 26).

Рисунок 26.

Изменить текст подзаголовка можно в разделе "Дизайн" - "Параметры" - "Главная страница" (рис. 27).

Рисунок 27.

Для изменения фонового изображения блока необходимо загрузить фоновую картинку на сервер по инструкции "Как загрузить фотографию на сервер". Далее в разделе "Дизайн" - "Параметры" - "CSS" разместить код:

.subscribe-block-mainpage-background { background-image: url("ссылка на изображение") !important; }

 

Подвал

В подвале также можно выводить номер телефона (рис. 28).

Рисунок 28.

Для этого необходимо в разделе "Дизайн" - "Параметры" - "Основные" включить настройку "Выводить телефон в подвале" (рис. 29).

Рисунок 29.

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

Рисунок 30.

На сайте отображение будет иметь вид (рис. 31).

Рисунок 31.

 

Блоки шаблона

• Блок-банер перед заголовком на странице категории
• Блок-банер перед подвалом
• Блок-банер перед новостями
• Блок-банер в подвале справа

В шаблоне "Sushi" предусмотрено четыре специальных статических блока. Отредактировать блоки можно в разделе "Дизайн" - "Страницы и блоки" - "Блоки" (рис. 32).

Рисунок 32.

Ниже мы рассмотрим каждый из типов блоков.

 

Блок-банер перед заголовком на странице категории

При посещении отдельных страниц категорий, посетителю может показываться блок над заголовком категории (рис. 33).

Рисунок 33.

Может содержать текст, видео, изображения и. т.д.

 

Блок-банер перед подвалом

Блок выводится над подвалом, после блока новостей (рис. 34).

Рисунок 34.

Может содержать текст, видео, изображения и. т.д.

 

Блок-баннер перед новостями

Блок выводится над разделом Новости, внизу страницы (рис. 35).

Рисунок 35.

Может содержать текст, видео, изображения и. т.д.

 

Блок-банер в подвале справа

Статический блок "Футер меню справа" в шаблоне не работает. Для размещения дополнительной информации в футере подвала добавлен отдельный статический блок "Блок-банер в подвале справа" (рис.36).

Рисунок 36.

По умолчанию блок содержит изображение. Изменить его можно, открыв редактор блока, найдя блок, как на (рис. 32). Нажать на кнопку "Источник" и заменить ссылку на изображение (рис. 37).

Рисунок 37.

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