Продающие "фишки" шаблонов

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

Внимание!

Информация актуальна на 08.09.2022. По мере разработки новых шаблонов дизайна статья будет обновляться.

Для удобства все особенности шаблонов сгруппированы по категориям:

• Общее
• Главная страница
• Шапка сайта
• Поиск
• Меню каталога
• Каталог
• Карточка товара
• Подвал сайта

 

Общее

1. Ширина на всё окно браузера

Стандартное и привычное для всех отображение сайта - это содержимое страницы и "пустое" место по бокам от него (часто эта пустота заполняется фоном):

Рисунок 1. Отображение сайта в шаблоне Modern

Но можно сделать так, чтобы сайт выглядел более стильно и премиально  - для этого содержимое сайта по возможности должно занимать всю ширину браузера. Чтобы добиться такого вида, достаточно просто "растянуть" меню и/или шапку сайта на весь экран.

Такими чертами обладают шаблоны Fashion, Techno, BlackOz, White Dove, Zen, DressCollection, Tools, Nils, Provokator, Keks, Perfection, Chicago, Atom. 

Рисунок 2. Отображение сайта в шаблоне BlackOz

Рисунок 3. Отображение сайта в шаблоне Atom

2. Анимация загрузки страницы

Иногда элементы на странице отображаются некорректно до тех пор, пока страница не загрузится полностью. Это может длиться всего 1-2 секунды, но с эстетической точки зрения правильнее сразу же показывать посетителю страницу так, как она должна выглядеть.

Такую задачу решает анимация загрузки: пользователь видит анимацию до тех пор, пока страница не загрузится полностью. Этот приём очень простой, его пока используют только на сайтах крупных компаний или популярных сервисов. Поэтому, шаблон с такой анимацией придаёт сайту профессиональный вид.

Анимация загрузки используется на шаблонах Alice, Atom, Everest, Alfa, Elza, Chicago.

Заметка

Далее в статье будут использоваться анимированные изображения в формате GIF. Особенность этого формата - ухудшение качества изображения из-за сильного сжатия. Отображение на реальных шаблонах лучше, чем на приведённых ниже GIF-анимациях.

Рисунок 4. Анимация загрузки в шаблоне Alice

Рисунок 5. Анимация загрузки в шаблоне Alfa

Кроме того, вы можете загрузить и использовать свою собственную анимацию загрузки на этих шаблонах. Для этого просто обратитесь в службу поддержки - наши специалисты помогут вам.

 

3. Новая мобильная версия

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

Рисунок 6. Мобильная версия - шаблон Modern

 

Главная страница

4. Главная страница - в одну колонку

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

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

Шаблоны, у которых главная страница отображается только "в одну колонку": Alice, Fly, Muza, Arbuzzz, Fashion, Techno, BlackOz, Alfa, White Dove, Elza, DressCollection, Profit, Piter, Tools, Ermitage, Keks.

Рисунок 7. Отображение главной страницы в шаблоне Tools

Рисунок 8. Отображение главной страницы в шаблоне DressCollection

 

5. Новые статические блоки на главной

Новые статические блоки для главной страницы - отличительная черта многих шаблонов. В основном эти блоки нужны для размещения крупных красочных баннеров, которые ведут на категории товаров.

Делать главную страницу сайта больше похожей на лендинг - это один из трендов веб-дизайна. Основная задача этого - производить впечатление на пользователя и вовлекать его. Вы мотивируете клиента кликать на баннеры, чтобы он сразу попадал в нужную для вас категорию товаров. Такой приём может увеличить конверсию в покупку нужных вам товаров.

Такие статические блоки есть почти во всех шаблонах: Alice, Fly, Muza, Arbuzzz, Chloe, Atom, Everest, Techno, BlackOz, Alfa, Zen, Profit, Piter, Nils, Ermitage, Keks, Moloko, Pandora, Майло, Lily, Chicago.

Рисунок 9. Новые статические блоки в шаблоне Майло

Рисунок 10. Новые статические блоки в шаблоне Chloe

Рисунок 11. Новые статические блоки в шаблоне Profit

 

6. Новый вид блока Новостей на главной

Блок новостей - один из элементов главной страницы сайта, поэтому его дизайн тоже изменяется во многих шаблонах: Alice, Fly, Fashion, Everest, BlackOz, White Dove, Elza, Tools, Chicago.

Новостной блок - это инструмент для повышения доверия покупателей. Само наличие новостей на сайте даёт понять, что сайт "живой" и что магазин ведёт общение с посетителями. Поэтому, конверсия в покупку зависит в том числе и от того, насколько грамотно вы распорядитесь блоком новостей, и насколько заметным он будет на сайте.

Рисунок 12. Новый вид новостей в шаблоне Tools

Рисунок 13. Новый вид новостей в шаблоне White Dove

 

7. Карусель во всю ширину страницы

Карусель, "растянутая" на всю ширину страницы, придаёт сайту современный и премиальный вид. А в сочетании с крупными баннерами в статических блоках такая карусель делает главную страницу сайта больше похожей на стильный лендинг. У покупателя создаётся впечатление, что на разработку дизайна сайта потрачено много денег - а это сильно повышает доверие к магазину.

Такая карусель есть в шаблонах Alice, Alfa, White Dove, Profit, Nils, Perfection, Chicago.

Рисунок 14. Карусель во всю ширину страницы в шаблоне Perfection

Рисунок 15. Карусель во всю ширину страницы в шаблоне Chicago

 

8. Карусель во всю высоту страницы

Иногда есть необходимость сделать так, чтобы карусель занимала не только всю ширину экрана, но и всю его высоту. Такая карусель есть в шаблонах Alice, Fashion, White Dove.

Рисунок 16. Карусель в шаблоне White Dove при прокрутке страницы в определённый момент занимает весь экран

Заметка

Карусель в шаблоне Fashion некликабельна - при клике на неё пользователь не сможет перейти на другую страницу сайта.

 

9. Карусель объединена с шапкой

В шаблоне Fashion карусель не только занимает всю ширину и высоту "первого экрана" - она ещё и объединена с шапкой сайта. Фактически, шапка сайта является прозрачной и логотип вместе с меню отображается прямо на фоне карусели. Такая особенность шаблона ещё больше придаёт главной странице сайта вид лендинга.

При этом, карусель в шаблоне Fashion некликабельна.

Рисунок 17. Карусель, объединённая с шапкой в шаблоне Fashion

 

10. Вывод категорий на главной

В шаблоне Tools на главной странице выводятся не только списки товаров, но и все основные категории каталога. Это удобно и для клиента, и для вас: чем быстрее клиент увидит на сайте нужный ему товар, тем больше вероятность покупки.

Рисунок 18. Вывод обычных категорий на главной странице в шаблоне Tools

 

11. Новый блок для товаров со скидкой

В шаблоне Lily блок товаров со скидкой расположен не под каруселью (как в других шаблонах), а в левой колонке главной страницы. А в шаблоне Everest этот блок имеет минималистичный дизайн. Это было сделано для того, чтобы покупатели быстрее замечали товары со скидкой.

Рисунок 19. Новый вид блока товаров со скидкой в шаблоне Lily

Рисунок 20. Новый вид блока товаров со скидкой в шаблоне Everest

 

12. Новое отображение списков товаров

В шаблоне Atom списки товаров, которые выводятся на главной странице под каруселью, располагаются не друг под другом, а переключаются при помощи вкладок, что удобно для клиента. А ещё они дублируются над подвалом сайта (в минималистичном виде).

Рисунок 21. Новое отображение списков товаров в шаблоне Atom (верх страницы)

Рисунок 22. Новое отображение списков товаров в шаблоне Atom (низ страницы)

 

Шапка сайта

13. Фиксированная шапка

Фиксированная шапка сайта удобна для пользователя: ему не приходится каждый раз прокручивать страницу вверх для того, чтобы перейти в нужный раздел сайта. А чем проще навигация на сайте - тем приятнее для покупателя находиться на нём. На шаблонах Fashion и Everest шапка закреплена вверху экрана и прокручивается вместе со страницей.

Рисунок 23. Фиксированная шапка сайта в шаблоне Everest

 

14. Фиксированное меню

Иногда возникают ситуации, когда хочется сделать навигацию на сайте более удобной, но шапка сайта слишком громоздкая, чтобы фиксировать её. В этом случае есть решение - фиксировать вверху страницы не всю шапку, а только основное меню. Это выглядит компактнее и даже эстетичнее, чем фиксированная шапка.

Такое фиксированное меню есть в шаблонах: Fly, Chloe, Tools, Nils, Moloko, Майло, Chicago, Categorizer, Razor, Categorizer, Diamond.

Рисунок 24. Фиксированное меню в шаблоне Moloko

 

15. Дополнительные кнопки в шапке

В некоторых шаблонах для удобства пользователей в шапке есть дополнительные кнопки. Кнопка "Список желаний" есть в шапке шаблонов Alice, Fly, Joy, Atom, Sapfir ; кнопка "Сравнение товаров" - в шапке шаблонов Fly, Майло, Joy, Profit, Voyage. А в шапке шаблона Techno есть кнопка "Оформление заказа", которая позволяет сразу перейти к оформлению заказа, минуя корзину (при условии, что в корзине есть товары).

Рисунок 25. Кнопка сравнения товаров в шапке шаблона Майло

Рисунок 26. Кнопка оформления заказа в шапке шаблона Techno

 

16. Расположение логотипа по центру

Логотип сайта, как правило, чаще всего размещается в левой верхней части сайта. Но в некоторых случаях логотип смотрится красивее в центре шапки сайта, а не в её левой части. Такая особенность есть у шаблонов White Dove, Zen, DressCollection, Provokator, Perfection, Lily, Love, Эрмитаж, Profit, Voyage, Everest, Alice, Mailo.

Рисунок 27. Центральное расположение логотипа в шаблоне Perfection

Рисунок 28. Центральное расположение логотипа в шаблоне Lily

 

17. Отсутствие логотипа

В шаблоне Elza, который выполнен в стиле минимализма, логотип отсутствует в шапке сайта.

Рисунок 29. Отсутствие логотипа в шаблоне Elza

 

Поиск

18. Поиск, открывающийся по кнопке

Для клиента удобно, когда строка поиска на сайте имеет большой размер. Но такая большая строка поиска не всегда смотрелась бы эстетично на некоторых шаблонах. Дизайнеры нашли выход из этой ситуации: оказалось достаточно сделать так, чтобы строка поиска открывалась только при клике на кнопку (и точно так же закрывалась). Такая "открывающаяся" строка поиска есть в шаблонах Alice, Everest, White Dove, Tools, Chicago, Fashion, Alfa, Zen, Эрмитаж, Razor, Mailo.

Рисунок 30. Поиск, открывающийся по кнопке в шаблоне Everest

Рисунок 31. Поиск, открывающийся по кнопке в шаблоне Tools

 

19. Поиск в отдельном блоке

В шаблоне Techno поиск располагается в отдельном блоке с фоновым изображением, который заменяет стандартную "карусель" со слайдами.

Рисунок 32. Расположение поиска в отдельном блоке в шаблоне Techno

 

Меню каталога

20. Новый вид выпадающего меню каталога

В некоторых шаблонах выпадающее меню имеет более красивый и стилизованный вид. Это такие шаблоны, как Alice, Arbuzzz, Elza, Tools, Chicago, Atom, Everest.

Рисунок 33. Новый вид выпадающего меню в шаблоне Arbuzzz

Рисунок 34. Новый вид выпадающего меню в шаблоне Atom

 

21. Меню каталога и меню сайта - в одной строке

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

Такой вид меню имеют шаблоны Techno, Ermitage, White Dove, Zen, Nils, Perfection, Alfa, Blackoz, Profit.

Рисунок 35. Единый стиль меню каталога и меню сайта в шаблоне Zen

Рисунок 36. Единый стиль меню каталога и меню сайта в шаблоне Ermitage

 

22. Категории третьего уровня в меню

В большинстве шаблонов в меню каталога выводятся только категории и подкатегории (то есть, категории первого и второго уровня). Но при большой вложенности каталога важно дать покупателю шанс сразу перейти в нужную категорию. Для этого в шаблонах Fly и Elza в выпадающем меню каталога доступны категории не только первого и второго, но ещё и третьего уровней.

Рисунок 37. Категории третьего уровня в меню шаблона Fly

Рисунок 38. Категории третьего уровня в меню шаблона Elza

 

23. Меню находится в верхней панели сайта

В некоторых товарных нишах возникает необходимость сделать акцент именно на меню каталога, а меню сайта поместить на второй план. Это реализовано в таких шаблонах, как DressCollection, Provokator, Love, Diamond, Lily - меню сайта в них расположено на верхней панели.

Рисунок 39. Расположение основного меню на верхней панели сайта в шаблоне DressCollection

 

24. Меню каталога располагается по центру

В шаблонах Voyage, Chloe, Chicago, Alice, White Dove и DressCollection меню каталога выравнено по центру, что смотрится более стильно.

Рисунок 40. Расположение меню каталога по центру в шаблоне DressCollection

 

25. Управление количеством категорий в меню

В шаблоне Fly меню каталога на главной странице можно включать и отключать по желанию. А когда оно включено, в настройках шаблона можно указывать, сколько категорий выводить в меню сразу (остальные категории при этом будут "свёрнуты").

Рисунок 41. Вариант отображения меню в шаблоне Fly со "свёрнутыми" категориями

 

Каталог

26. Увеличенные фото в каталоге

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

Разработчики шаблонов учли это и увеличили размер фотографий в каталоге. Такая особенность есть у шаблонов Alice, Arbuzzz, Fashion, Everest, BlackOz, White Dove, Zen, Provokator, Ermitage, Perfection, Pandora, Nils, Joy, DressCollectiony.

А если стандартного размера фотографий в этих шаблонах всё равно будет недостаточно для ваших товаров - вы сможете увеличить их в настройках шаблона.

Рисунок 42. Увеличенные фото в каталоге в шаблоне Pandora

Рисунок 43. Увеличенные фото в каталоге в шаблоне Arbuzzz

 

27. Новые маркеры

Такие мелкие элементы, как маркеры товара (например, "Новинка" или "Хит продаж"), часто стилизованы под общий дизайн в шаблоне. Например, новый вид маркеров есть в шаблонах Fly, Muza, Alfa, Zen, Piter, Keks, Perfection, Nils, Joy, Love, Эрмитаж, King, Diamond, Legend.

Рисунок 44. Новый вид маркеров товара в шаблоне Keks

 

28. Динамические элементы у товаров в каталоге

Один из способов привлечь внимание покупателя и мотивировать его нажать на целевую кнопку (и, как следствие, повысить конверсию) - анимация при наведении на этот элемент. Такие динамические элементы у товаров в каталоге есть в шаблонах Alice, Muza, Perfection, Майло, Nils, Zen, Blackoz, Profit, Everest.

Рисунок 45. Динамические элементы у товаров в каталоге в шаблоне Майло

Рисунок 46. Динамические элементы у товаров в каталоге в шаблоне Alice

 

29. Увеличение фото при наведении

В шаблонах Fly и Zen фотографии товаров в каталоге увеличиваются при наведении на них. Такой эффект выглядит красиво и сильнее побуждает пользователя "кликнуть" на товар.

Рисунок 47. Увеличение фото при наведении в шаблоне Zen

 

30. Анимация в каталоге

В шаблоне Chloe при прокрутке страницы вниз товары подгружаются не статически, а с анимацией, создавая эффект "выплывания" товаров снизу.

Рисунок 48. Анимация в каталоге в шаблоне Chloe

Внимание!

Любая анимация на сайте потенциально замедляет загрузку страниц. Это практически незаметно при высокой скорости интернет-соединения, но если скорость интернет-соединения сравнительно небольшая - замедление загрузки страниц может быть ощутимым. Учитывайте этот нюанс при выборе шаблона дизайна.

 

31. Заголовок категории располагается по центру

В шаблонах White Dove, Zen, Love, Diamond заголовок категории товара располагается не слева, как в большинстве шаблонов, а по центру страницы.

Рисунок 49. Расположение заголовка категории по центру в шаблоне White Dove

 

32. Всплывающая корзина в правой части сайта

В шаблонах: Chicago, Modern, Atom, Drive - корзина реализована таким образом, чтобы привлекать к себе больше внимания и повышать конверсию в покупку. Когда пользователь нажимает на иконку корзины в правом верхнем углу, она "всплывает" справа. Основной экран при этом затемняется, акцентируя внимание на корзине.

Рисунок 50. Всплывающая корзина в правой части сайта в шаблоне Chicago

 

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

33. Увеличенное фото в карточке товара

Аналогично с увеличенными фотографиями в каталоге, во многих шаблонах фото увеличено ещё и в самой карточке товара: Alice, Fly, Fashion, Techno, Alfa, White Dove, Elza, Zen, DressCollection, Provokator, Ermitage, Perfection, Pandora, Chicago

А если стандартного размера фотографий в этих шаблонах всё равно будет недостаточно для ваших товаров - вы сможете увеличить их в настройках шаблона.

Рисунок 51. Большое изображение в карточке товара в шаблоне DressCollection

Рисунок 52. Большое изображение в карточке товара в шаблоне Provokator

 

34. Меню каталога в карточке товара

В шаблонах Atom, Joy, Drive меню категорий есть не только на страницах каталога, но и в карточке товара. Это полезно, когда пользователь хочет перейти из карточки товара в другую категорию товаров.

Рисунок 53. Меню каталога в карточке товара в шаблоне Atom

 

35. Выравнивание карточки товара по центру

В шаблоне Ermitage содержимое карточки товара выровнено по центру.

Рисунок 54. Выровненная по центру карточка товара в шаблоне Ermitage

 

Подвал сайта

36. Всплывающие пункты меню в подвале

В шаблоне Elza подвал сайта представляет собой минималистичную полоску, на которой располагаются главные пункты нижнего меню. При наведении на эти пункты открываются остальные подпункты нижнего меню.

Рисунок 55. Всплывающее меню в подвале сайта в шаблоне Elza

Готово. Мы рассмотрели основные особенности шаблонов на платформе.