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

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

Статья актуальна для версии магазина: 10.0 | 8.0

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

Внимание!

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

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

 

Общее

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

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

Продающие "фишки" шаблонов - 9027
Рисунок 1. Отображение сайта в шаблоне Modern

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

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

Продающие "фишки" шаблонов - 4757
Рисунок 2. Отображение сайта в шаблоне BlackOz

Продающие "фишки" шаблонов - 7458
Рисунок 3. Отображение сайта в шаблоне Atom

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

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

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

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

Заметка

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

Продающие "фишки" шаблонов - 6418
Рисунок 4. Анимация загрузки в шаблоне Alice

Продающие "фишки" шаблонов - 3307
Рисунок 5. Анимация загрузки в шаблоне Alfa

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

 

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

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

Продающие "фишки" шаблонов - 1373
Рисунок 6. Мобильная версия - шаблон Modern

 

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

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

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

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

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

Продающие "фишки" шаблонов - 1198
Рисунок 7. Отображение главной страницы в шаблоне Tools

Продающие "фишки" шаблонов - 8723
Рисунок 8. Отображение главной страницы в шаблоне DressCollection

 

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

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

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

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

Продающие "фишки" шаблонов - 4068
Рисунок 9. Новые статические блоки в шаблоне Майло

Продающие "фишки" шаблонов - 5566
Рисунок 10. Новые статические блоки в шаблоне Chloe

Продающие "фишки" шаблонов - 4869
Рисунок 11. Новые статические блоки в шаблоне Profit

 

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

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

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

Продающие "фишки" шаблонов - 5069
Рисунок 12. Новый вид новостей в шаблоне Tools

Продающие "фишки" шаблонов - 9281
Рисунок 13. Новый вид новостей в шаблоне White Dove

 

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

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

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

Продающие "фишки" шаблонов - 1658
Рисунок 14. Карусель во всю ширину страницы в шаблоне Perfection

Продающие "фишки" шаблонов - 2830
Рисунок 15. Карусель во всю ширину страницы в шаблоне Chicago

 

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

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

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

Заметка

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

 

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

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

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

Продающие "фишки" шаблонов - 2546
Рисунок 17. Карусель, объединённая с шапкой в шаблоне Fashion

 

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

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

Продающие "фишки" шаблонов - 7624
Рисунок 18. Вывод обычных категорий на главной странице в шаблоне Tools

 

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

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

Продающие "фишки" шаблонов - 3910
Рисунок 19. Новый вид блока товаров со скидкой в шаблоне Lily

Продающие "фишки" шаблонов - 3970
Рисунок 20. Новый вид блока товаров со скидкой в шаблоне Everest

 

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

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

Продающие "фишки" шаблонов - 7325
Рисунок 21. Новое отображение списков товаров в шаблоне Atom (верх страницы)

Продающие "фишки" шаблонов - 7313
Рисунок 22. Новое отображение списков товаров в шаблоне Atom (низ страницы)

 

Шапка сайта

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

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

Продающие "фишки" шаблонов - 6557
Рисунок 23. Фиксированная шапка сайта в шаблоне Everest

 

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

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

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

Продающие "фишки" шаблонов - 1230
Рисунок 24. Фиксированное меню в шаблоне Moloko

 

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

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

Продающие "фишки" шаблонов - 4895
Рисунок 25. Кнопка сравнения товаров в шапке шаблона Майло

Продающие "фишки" шаблонов - 4861
Рисунок 26. Кнопка оформления заказа в шапке шаблона Techno

 

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

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

Продающие "фишки" шаблонов - 6268
Рисунок 27. Центральное расположение логотипа в шаблоне Perfection

Продающие "фишки" шаблонов - 4852
Рисунок 28. Центральное расположение логотипа в шаблоне Lily

 

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

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

Продающие "фишки" шаблонов - 9753
Рисунок 29. Отсутствие логотипа в шаблоне Elza

 

Поиск

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

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

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

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

 

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

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

Продающие "фишки" шаблонов - 1319
Рисунок 32. Расположение поиска в отдельном блоке в шаблоне Techno

 

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

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

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

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

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

 

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

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

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

Продающие "фишки" шаблонов - 6129
Рисунок 35. Единый стиль меню каталога и меню сайта в шаблоне Zen

Продающие "фишки" шаблонов - 3316
Рисунок 36. Единый стиль меню каталога и меню сайта в шаблоне Ermitage

 

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

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

Продающие "фишки" шаблонов - 9571
Рисунок 37. Категории третьего уровня в меню шаблона Fly

Продающие "фишки" шаблонов - 6974
Рисунок 38. Категории третьего уровня в меню шаблона Elza

 

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

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

Продающие "фишки" шаблонов - 9966
Рисунок 39. Расположение основного меню на верхней панели сайта в шаблоне DressCollection

 

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

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

Продающие "фишки" шаблонов - 4218
Рисунок 40. Расположение меню каталога по центру в шаблоне DressCollection

 

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

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

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

 

Каталог

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

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

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

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

Продающие "фишки" шаблонов - 7826
Рисунок 42. Увеличенные фото в каталоге в шаблоне Pandora

Продающие "фишки" шаблонов - 9195
Рисунок 43. Увеличенные фото в каталоге в шаблоне Arbuzzz

 

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

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

Продающие "фишки" шаблонов - 6280
Рисунок 44. Новый вид маркеров товара в шаблоне Keks

 

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

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

Продающие "фишки" шаблонов - 6335
Рисунок 45. Динамические элементы у товаров в каталоге в шаблоне Майло

Продающие "фишки" шаблонов - 3523
Рисунок 46. Динамические элементы у товаров в каталоге в шаблоне Alice

 

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

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

Продающие "фишки" шаблонов - 9733
Рисунок 47. Увеличение фото при наведении в шаблоне Zen

 

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

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

Продающие "фишки" шаблонов - 2217
Рисунок 48. Анимация в каталоге в шаблоне Chloe

Внимание!

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

 

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

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

Продающие "фишки" шаблонов - 6763
Рисунок 49. Расположение заголовка категории по центру в шаблоне White Dove

 

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

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

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

 

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

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

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

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

Продающие "фишки" шаблонов - 6056
Рисунок 51. Большое изображение в карточке товара в шаблоне DressCollection

Продающие "фишки" шаблонов - 3498
Рисунок 52. Большое изображение в карточке товара в шаблоне Provokator

 

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

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

Продающие "фишки" шаблонов - 4501
Рисунок 53. Меню каталога в карточке товара в шаблоне Atom

 

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

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

Продающие "фишки" шаблонов - 8392
Рисунок 54. Выровненная по центру карточка товара в шаблоне Ermitage

 

Подвал сайта

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

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

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

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

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

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

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

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

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

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

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

Мы используем cookies. Подробнее...