Шаблон "Everest"

Хотим Вам представить наш новый шаблон "Everest".

Внимание!

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

Для начала рассмотрим его особенности, а именно то, что отличает его от других шаблонов:

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

• Шапка сайта
• Поиск
• Главная страница
• Иконки цветов

Настройки шаблона

• Блок на главной
• Баннер на главной под товарами со скидкой
• Блок с новостями
• Карточка товара
• Страница категории

 

Шапка сайта

Фиксированная шапка сайта (рис.1), на которой расположена основная информация:

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

Рисунок 1.

 

Поиск

Поиск (рис. 2) также расположен очень удобно и не занимает слишком много места на сайте, достаточно нажать на элемент поиска, как он откроется и для того, чтобы его скрыть, нужно нажать на крестик.

Рисунок 2.

Режим отображения данного шаблона представлен в две колонки, отображения в одну колонку - нет.

Стиль отображения меню Вы можете выбрать по своему усмотрению: аккордеон или классический.

Также на что стоит обратить внимание, так это на то, что изменилось отображение цветов, у данного шаблона они представлены в виде кружков (рис. 3).

Рисунок 3.

Размеры данных кружков можно изменить в пункте меню "Каналы продаж - Интернет-магазин - Параметры магазина - Категория товаров - Раздел размер и цвет - Ширина иконки цвета"> и "Высота иконки цвета">.
Также обратите внимание, что в режиме представления "Каталог" кнопка "Добавить" и "Сравнение" появляются при наведении на товар (рис. 4).

Рисунок 4.

Что сразу бросается в глаза, так это карусель. Рекомендованные размеры карусели на данном шаблоне: 1200 x 665 px

 

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

Под каруселью мы можем наблюдать следующий блок (рис. 5)

Рисунок 5.

Данный блок формируется, когда мы или добавляем товар в "Товары на главной" или устанавливаем скидку товару в редактировании товара.

Итак, для формирования данного блока перейдите в пункт меню "Товары - Категории и товары - Товары на главной", выберите "Товары со скидкой", добавьте в данном разделе необходимые товары.

Также Вы сможете через установление порядка товаров, от 0 и далее, установить, какие товары будут выводиться на главной первыми (рис. 6).

Рисунок 6.

Также Вы можете настроить режим отображения данных блоков.

Для этого перейдите в пункт меню "Каналы продаж - Интернет-магазин - Параметры магазина" - Товары на главной", установите "Количество товаров в строке" и "Количество товаров в блоке" (рис. 7).

Рисунок 7.

 

Баннер на главной под товарами со скидкой

Внимание!

Для корректного отображения, лучше не устанавливать в данном блоке более 4-5 товаров.

Под блоком "Товары со скидкой", отображается другой информативный блок, который Вы можете настроить в пункте меню "Каналы продаж - Интернет-магазин - Статические блоки - Баннер на главной под товарами со скидкой" (рис. 8).

Рисунок 8.

После перехода в редактирование данного блока, нажмите на кнопку "Источник", чтобы перейти в редактирование HTML-кода

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

1. Путь к изображениям, которые будут отображаться на главной странице (пункт 1);
2. Текст (пункт 3);
3. Название кнопки (пункт 4);
4. Путь к ссылке, куда нас будет перенаправлять при нажатии на кнопку - атрибут href="#" (пункт 4).

(рис. 9).

Рисунок 9.

Остальной код, что расположен ниже, мы также рассмотрим более подробно:

1) У кода .mainpage-benner_item1.mainpage-benner_item и .mainpage-benner_item2.mainpage-benner_item

Вы можете изменить значение width на другое процентное.

2) .mainpage-benner_item2-btn:hover {
color: #fff;
}

у данного кода Вы можете изменить цвет кнопки при наведении, для этого достаточно вместо кода #fff, прописать другой код цвета.

3) .mainpage-benner_item2-btn:hover::before {
-moz-transform: scale(2,2);
-ms-transform: scale(2,2);
-o-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
opacity: 1;
}

Данный код отвечает за транформацию кнопки.

4) .mainpage-benner_item2-btn

у данного блока применены стили отображения данной кнопки.

Внимание!

Если Вы не знакомы с HTML и CSS, не советуем вносить правки в код, который начинается с <style type="text/css">

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

 

Блок с новостями

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

Рисунок 10.

Перейдите в пункт меню "Каналы продаж - Интернет-магазин - Новости", добавьте новость.

Добавить ее можете согласно инструкции

Информация, что располагается у новости на главной странице, формируется из следующих настроек новостей:

1. Изображение;
2. Заголовок новости;
3. Аннотация;
4. Рекомендуемый размер для новости 803 × 500 px

 

Страница категории

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

(рис. 11).

Рисунок 11.

Оно формируется следующим образом: загружается в редактировании категории Изображение (рекомендованный размер 1900x500px), текст добавляется из пункта Описание, которое выводится над списком товаров.

 

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

Теперь рассмотрим одну из особенностей данного шаблона перейдя в карточку самого товара, обратите внимание, что социальные кнопки в карточке товара не отображаются сразу же, а появляются только тогда, когда Вы нажмете на кнопку "Поделиться" (рис. 12).

Рисунок 12.

 

Рекомендуемые размеры изображения

• Товар. Большая фотография: 1000:1000px (это изображение, которое показывается при наведении (или клике) на изображение в карточке товара).
• Товар. Средняя фотография: 500:700px ( это изображение, которое показывается в карточке товара).
• Товар. Маленькая фотография: 350:350px (это изображение, которое показывается в каталоге в списке товаров).
• Категория. Большая фотография: 1900:500px ( баннер, который показывается над товарами категории).
• Категория. Маленькая фотография: 120:120px (это изображение у категории, которое показывается, когда Вы находитесь в категории выше).
• Изображение новости: 100:500px.

С инструкцией по тому, где располагается на сайте та или иная фотография можете ознакомиться, перейдя по ссылкам:

https://www.advantshop.net/help/pages/photo-product

https://www.advantshop.net/help/pages/category-image

Всё готово.

На этом ознакомление с настройкой шаблона завершено.