Как вам помочь ?
Шаблон "Alice"
В данной статье рассмотрим настройки и особенности шаблона "Alice".
Внимание
Шаблон "Alice" может быть установлен только на магазин версии 6.5.4 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до последней актуальной версии на момент установки шаблона.
Особенности шаблона "Alice"
Режим отображения главной страницы "Одна колонка".
Контент шаблона расплагается во всю ширину экрана (максимально до ширины 1860px).
В шаблоне Alice 28 цветовых схем.
Поле "Поиск" открывается при клике на иконку поиска (рис.1, рис. 2).
Рисунок 1.
Рисунок 2.
Изменился внешний вид иконки корзины в шапке сайта, рядом с корзиной добавилась иконка "списка желаний" (рис.3).
Рисунок 3.
Главное меню оформлено выпадающим списком (рис.4).
Рисунок 4.
Пункты меню каталога имеют динамический эффект при наведении курсора мыши (рис.5).
Рисунок 5.
Статические блоки
Заметка
У каждого из статических блоков, которые относятся к данному шаблону, в названии указано "шаблон alice"
Статические блоки продублированы в мобильной и десктопной версии. Для мобильной версии в название статического блока добавлена фраза: мобильная версия.
Чтобы найти статический блок, следует перейти в раздел "Дизайн" - "Страницы и блоки" - "Блоки", далее в строке поиска необходимо ввести наименование блока, среди поисковой выдачи выбрать нужный и перейти к редактированию (рис.6).
Рисунок 6.
Далее открывается окно с кодом. Следует перейти в режим "Источник", проверить активность блока, внести необходимые корректировки и выполнить сохранение (рис.7).
Рисунок 8.
Ниже рассмотрим какие блоки представлены в шаблоне "alice".
О нас
Данный блок редактируется в статическом блоке "О нас (шаблон Alice)".
Располагается на главной странице под всеми товарами и новостями (рис.8).
Рисунок 8.
Cкидки-2
Блок редактируется в статическом блоке "Cкидки-2 (шаблон Alice)".
В блоке представлены сразу 4 предложения (рис.9). Для того, чтобы заменить на свои данные, необходимо загрузить картинки и поменять путь к ним (рис.10, цифра 2). Также необходимо прописать ссылку на страницу, куда должен выполняться переход при нажатии на данное предложение (рис.10, цифра 1).
Рисунок 9.
Рисунок 10.
Рекомендованный размер фото. Первые два блока: 590px * 580px, 590px * 580px. Третий длинный блок справа 650px*830px.
Предварительно изображения для блока нужно загрузить на сервер. О том, как это сделать и получить ссылку на изображение на сервере, описано в инструкции.
Баннер на главной
Рисунок 11.
Располагается под меню и перед каруселью (по умолчанию стандартная карусель в шаблоне отключена). За редактирование отвечает статический блок "Баннер на главной (шаблон Alice)". Рекомендованный размер фото: 4500px*3000px.
Подписка на новости
Рисунок 12.
За редактирование отвечает статический блок "Подписка на новости - блок с текстом (шаблон Alice)". Фоновый цвет задан через исходный код,изменить можно через код, который нужно разместить при редактировании блока в источнике.
Если нужно изменить фоновый цвет:
<style> .subscribe-block-alice {background: green !important; } </style>
Вместо green указывается желаемый цвет.
Если нужно установить фоновое изображение:
<style>
.subscribe-block-alice {background-image:url("./Templates/Alice/images/banner.jpg" )!important; }
</style>
Вместо ./Templates/Alice/images/banner.jpg указывается путь до изображения, которое должно выводиться как фон.
Новая коллекция
Блок редактируется в статическом блоке "Новая коллекция (шаблон Alice)", представлено два предложения, для того, чтобы изменить данные, необходимо загрузить картинки, прописать путь и ссылку на страницу, куда будет переходить предложения (как это сделать описано выше в Cкидки-2 ). Блок располагается сразу под каруселью на главной странице (рис.13).
Рисунок 13.
Рекомендованный размер фото: левый блок 1180px * 790px, правый блок 640px * 780px.
Распродажа и скидки
Статический блок "Распродажа и скидки (шаблон Alice)" (рис.14) располагается на главной под блоком "новая коллекция". Редактируется аналогично описанному выше в Cкидки-2.
Рисунок 14.
Рекомендованный размер фото: два левых баннера 640px * 400px, 640px * 400px, правый длинный баннер 1280px*814px.
Все статические блоки с интерактивными элементами на главной странице (при наведении меняется цвет блока) (рис.15).
Рисунок 15.
Новости
Представление новостей изменено, а именно на главной странице новости дополнены фотографиями и кратким описание (рис.16). Рекомендованный размер изображения для новостей - 408px * 245px.
Рисунок 16.
Карточка товара
Структурно изменена страница товара: увеличено главное фото (рис.17, цифра 1); артикул, размер, вес, единицы измерения перенесены в верхнюю часть информационного блока, расположены над названием товара (рис.17, цифра 2); кнопки "Добавить в сравнения" и "Добавить в список желаний" расположены под кнопками "Добавить в корзину" и Купить в один клик" (рис.17, цифра 3).
Рисунок 17.
Карточка товара в десктопной версии адаптирована для устройств с шириной экрана менее 1150px и сенсорным управлением - все кнопки компактно располагаются в карточке товара и доступны пользователю.
Рекомендованные размеры фото товара:
Товар. Средняя фотография - 500px * 500px.
Товар. Маленькая фотография - 350px * 350px.
Категории
Изменено представление товаров в категориях, на главной, в разделах "похожие товары" и "с этим товаром покупают," а именно рейтинг, кнопки "быстрый просмотр", "добавить в сравнение", "добавить в список желаний" появляются только при наведении на товар (рис.18).
Рисунок 18.
Рекомендуемое количество товаров в строке на главной: максимально 4.
Рекомендуемое количество товаров в строке в каталоге: максимально 3.
Мобильная версия
Удобная мобильная версия шаблона, основные элементы в мобильной версии сделаны крупнее для увеличения конверсии по целевым действиям при оформлении заказа (рис.19).
Рисунок 19.
Готово. В данной инструкции мы рассмотрели основные настройки шаблона "Alice".
Другие статьи по теме
Тэги: шаблон, алиса, alice, товары, дизайн, fkbcf