0

Как правильно выбирать шаблон для сайта и интернет-магазина

  • 04.01.2019
  • 1716 просмотров
  • 2 комментариев

После выбора CMS для своего интернет-магазина важно переходить к выбору шаблона. И никак иначе. Если сделать наоборот, — это приведет к дополнительным затратам и задержке в запуске проекта. Да, вы можете сказать, что не всегда стоит брать готовые шаблоны сайтов, иногда лучше индивидуальный дизайн. При этом выбрать готовый макет бывает легче и удобнее для скорейшего запуска проекта, так как для управления им потребуются минимальные технические навыки.

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

На 80% эта статья будет касаться шаблонов для интернет-магазинов. Поехали разбираться!

Особенности шаблонного сайта или интернет-магазин

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

Можно нанять дизайнера для создания макета магазина по вашему видению, верстальщика и программиста, и всех их компетентно координировать. Если вам это под силу, а ваш интернет-магазин должен стать прорывом на рынке — пробуйте. Бюджет составит от 2000$.

Еще один вариант — отдать всю разработку на аутсорс в агентство и выставить им свое требование. Тогда координация с вашей стороны будет минимальна, при этом платить надо будет больше. Работа всех специалистов, организация процесса проектным менеджером + наценка за услуги — может влететь вам в копеечку. Стоимость услуг по созданию таких решений для магазина у веб-студий начинается от 3000$.

Хотите сэкономить и сделать запуск быстро — возьмите шаблон сайта магазина стоимостью от 70$, в среднем. Самый бюджетный вариант, легкий и простой, для того чтобы решить вопрос дизайна с минимальными вложениями. Однако, и у этого решения есть свои плюсы и минусы. Посмотрите их все.

Преимущества:

Первое. Можете быстро запустить проект, если решены другие организационные вопросы.

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

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

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

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

Недостатки:

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

Второй. Может отсутствовать возможность вывода плагинов или модуля во фронтенд часть сайта. Те версии, которые вышли на рынок в последние месяцы, поставить не сможете, так как ваш вариант был разработан несколько лет назад. Если разработчики шаблона обновляют его регулярно, тогда вопросов не будет. Скидки, купоны, отзывы, сравнения товаров — проверьте эти опции при выборе.

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

Четвертый. Невозможно создать полностью свой фирменный стиль и сделать брендинг.

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

Шестой. Если макет покупается для работающего магазина и у вас есть дополнительный (нестандартный) функционал, вопрос его адаптации важно будет обсудить с верстальщиком и программистом. Если вы создаете новый проект — сложностей не будет, все новые задачи будут решаться уже под выбранную CMS и новый дизайн.

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

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

Важно! Выбирая подходящий шаблон сайта интернет-магазина или свой дизайн — вы делаете важный шаг в бизнесе. Пропишите ваши возможности и риски от того или иного решения.

На что стоит обратить внимание при выборе шаблона

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

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

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

Самая важная задача для вас — начать зарабатывать как можно скорее. А что важно для клиента?

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

Чтобы всё это сделать — не нужно изобретать велосипед. Сделайте магазин уже в ближайший месяц и начинайте зарабатывать.

Чтобы сделать верный выбор, обратите внимание на шаблоны для товаров вашей ниши.

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

Пример хорошего каталога товаров: https://can.ua/

Выпадающая вправо структура каталога товаров в формате столбцов

Пример фильтров: https://deshevshe.net.ua/

Подробный узкопрофильный фильтр для каждого вида продукции сверху и все основные разделы по смежным товарам слева

Фильтры должны быть актуальными и подробными

Пример блока рекомендованных товаров: https://www.technopark.ru/

Один из вариантов расположения дополнительных товаров для up-sale продаж

Если магазин косметики или парфюмерии — сделайте уклон больше на визуальную часть и презентацию продукта. Безусловно, фильтры также нужны и важны по умолчанию, они должны быть узкопрофильными. На нашем сайте вы как раз можете скачать бесплатно шаблон для интернет-магазина косметики.

Для примера посмотрите: https://cosmomir.com.ua/

Пример другого варианта: http://super-volos.ru/

Подробный узкопрофильный фильтр для каждого вида продукции сверху и все основные разделы по смежным товарам слева

Если у вас монобренд (один товар или несколько), стоит сделать упор на подробной презентации каждого товара, их характеристиках, выгодах и эмоциях, которые получит клиент. В этой теме лучше всех Apple: https://www.apple.com/ru/

Лаконичная и красочная презентация всех товаров этой торговой марки

Вам стоит это знать! Что учесть при выборе шаблона для сайта и интернет-магазина.

Параметры

Кратко о главном


Адаптивный дизайн

36% жителей Украины делали покупки со смартфонов по данным статистической компании GFK в 2017 году. Поэтому удобство пользователя с мобильных устройств должно быть в приоритете


Юзабилити

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

Настройки и редактирование

У вас должен быть полный доступ к редактированию любой части кода в шаблоне


Техническая поддержка

Отлично, если она есть! Так вы сможете решать вопросы быстро, а не бросать вашего разработчика в окоп с гранатой


Работа со всеми браузерами и системами

Opera, Google Chrome, Mozilla Firefox, Safari, Internet Explorer — важна как кроссбраузерность, так и кроссплатформенность. Мы сами замечали, как сейчас, уже не все сайты открываются на Windows XP, независимо от варианта браузера, а зря! Этой операционной системой еще пользуются


Инструкции и видео

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



Необходимые плагины

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

Если же хотите найти шаблон интернет-магазина в бесплатном доступе — поставьте задачу программисту в команде или на аутсорсе, чтобы проверить его на дыры и вирусы, работу всех функций и разделов. В интернете можно наткнуться на битый вариант, который впоследствии принесет непоправимый вред. Проблемы с SEO, перенаправление трафика, если там есть часть чужого кода в файлах index или function, также возможна утечка корпоративных данных.

Важно! Шаблон сайта — это набор программных файлов в архиве, к которым вы имеете доступ. Не только к чтению, а и к редактированию. Нужен доступ именно к коду. По сути, это HTML-страницы с Java-скриптами, Flash-анимацией, CSS, PSD.

Если будете покупать тему, узнайте ответы еще и на такие юридические вопросы: 

  • какие права получите после покупки;
  • можно ли ее редактировать и на сколько %;
  • нужно ли указывать авторство в футере и других разделах.

Не стоит пренебрегать этими вопросами, если вы собрались создавать магазин на тысячи товаров. А вот что делать, если у вас будет маленький проект?

Маленький магазин - лёгкий шаблон

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

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

Пример №1. Магазин нижнего белья. Легкий и простой, немного разделов, понятный дизайн, акцент на товары с первого взгляда. 

https://acousma-balaloum-opt.ru/brand-balaloum

Пример №2. Интернет-магазин кормов для собак и кошек. Быстро грузится, легкий, удобное юзабилити.

http://derlak.by/

Сразу на главной понятно, для кого сайт и как найти товар

Важно! Главное в дизайне — не отвлекать вашего клиента от покупки товара.

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

Делать настройки самостоятельно, если вы за это не брались раньше — не стоит. Ваше время стоит дороже. Разобраться в дизайне с файлами JS и CSS, внести правки в код сайта, сделать макет работоспособным на вашей CMS, добавить все необходимые блоки и плагины, а также убрать ненужные разделы — все это лучше доверить разработчику с опытом, который сможет все сделать за несколько часов или дней.

Обычно, в самом начале стоит изучить инструкции по настройке и сделать такие действия:

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

После всех настроек и наполнения контентом — запустите работу магазина и настройте основные процессы, чтобы продажа товаров стала на поток.

Проблемы при установке шаблона

1. Система не может распознать каталог пакета со всеми файлами.

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

2. Версия шаблона может не совпадать с версией CMS.

Решение. Проверьте на совместимость. Ваша задача взять именно ту версию, которая наверняка подойдет. Спросить этот вопрос можно в техподдержке у тех, кто продает вам этот продукт.

3. Ошибка 404.

Решение. Может возникнуть, если поврежден URL или нет страницы по определенному адресу. Решить вопрос можно созданием страниц в админке вручную. Если не помогло — стоит написать разработчикам шаблона и их поддержка вам поможет.

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

Возможность редактирования

Иметь возможность вносить правки в шаблон важно, правда? Да, полностью изменить внешний вид, структуру, иконки, вы не сможете. А вот адаптировать их под свои потребности будет вполне реально.

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

А если вы делаете магазин впервые и опыта нет, не стоит самостоятельно пробовать разобраться в коде, на это могут уйти недели или даже месяцы. А вы же помните свою самую важную задачу?

Научитесь делегировать технические задачи специалистам. Вы заплатите деньги и получите готовое решение.

Индивидуальный дизайн

Если будете делать выбор в сторону готовых решений, вот что стоит вам знать.

Что можно изменить в дизайне шаблона для интернет-магазина*:

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

*при условии технической возможности, что стоит узнать у разработчика

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

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

Оптимизация с точки зрения поисковых систем

Для SEO, по части дизайна, важно, чтобы ничего не отвлекало и не мешало. По юзабилити все было интуитивно понятно. Благодаря грамотному расположению и продуманной логике всех разделов, человек мог легко выбрать товар и сделать покупку, тогда и поведенческие показатели будут на должном уровне. И не стоит забывать про социальные доказательства, элементы которых должны быть встроены в макет.  

Какие настройки в шаблоне важны для SEO-специалиста:

  1. Чтобы все стили, скрипты, файлы js и css были прописаны верно и грамотно в отдельных файлах. А весь сайт и каждая страница в частности, загружались быстро.
  2. Специалистами в дизайне была сделана правильная визуальная структура, четкие блоки информации, понятные кнопки, читаемые шрифты, удобные разделы с информацией о товаре, отзывах, рейтинге товаров и прочие опции, которые помогают клиенту быстро ориентироваться на странице. Все это как раз и влияет на поведенческие факторы.
  3. Возможность сделать удобную перелинковку как в ручном, так и автоматическом режиме, понятное отображение этой информации для клиента на странице каждого товара.
  4. Наличие кнопок социальный сетей для расшаривания информации о товарах, акциях, обзорах или статей из блога. Что важно для постепенного наращивания ссылочной массы и увеличения траста.

Как вам количество задач? Правда, знать важно очень много. Сделать успешный магазин одному практически невозможно. Для развития проекта в команде или на аутсорсе вам нужны будут специалисты, которые помогут наращивать обороты с каждым месяцем.

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

Хорошие шаблоны для интернет-магазинов

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

Есть два популярных ресурса, где можно купить и скачать как шаблоны для интернет-магазинов, так и для сайтов, блогов, лендингов. Это ThemeForest с более стандартными вариантами и низкими ценами, и TemplateMonster с более крутыми дизайнерскими решениями и высоким прайсом. На втором ресурсе можно отдельно заказать установку и настройку шаблона, платить придется за каждое действие в отдельности от 50 до 100$ и выше. Соответственно, настройка всего сайта потянет на сотни, а то и тысячи долларов.

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

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

На что стоит обратить внимание при выборе темы и шаблона интернет-магазина:

  • большие и четкие фотографии товара;
  • читабельный шрифт размером более 12 px;
  • CTA (call to action) кнопки на каждой странице;
  • баннеры на главной, категориях и странице товара;
  • подробный каталог, боковой или выпадающий вниз;
  • разделы отзывов и характеристик в карточке;
  • возможность указать скидки, условия покупки в кредит или рассрочку рядом с товаром;
  • блок дополнительных рекомендованных товаров;
  • понятный раздел оплаты товара.

Хотим показать вам некоторые пункты из этого списка на деле.

Пример №1. Интернет-магазин AyurStore. Специализируется на продаже аюрведических и натуральных средств для здоровья, красоты и долголетия.

https://ayurstore.com.ua/

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

Все элементы на своих местах, ничего лишнего

 В карточке товара этого магазина есть стандартный функционал, который в дизайне реализован просто и удобно. Информация и текст читабельны, поданы на белом фоне. Большое изображение товара. Понятные блоки описания товара и отзывов, которые легко можно переключать. Есть кнопки соцсетей, чтобы в пару кликов сделать репост товара на свою страницу. Яркая желтая кнопка добавления товара в корзину. Цветовая гамма всего сайта смотрится гармонично.

Понятная карточка товара в привычном расположении всех блоков

Пример №2. Интернет-магазин ножей. GIESSER является одним из ведущих мировых производителей ножей и аксессуаров для профессионального использования. 

http://giesser.com.ua/

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

Минимальное количество элементов, что не отвлекает от выбора

У этого сайта очень легкая и простая карточка товара, кроме товаров и фильтров нет больше ничего. Когда у вас монобренд — это идеальное решение.

Выбирать разделы каталога можно сверху или в футере

Важно! Лучший шаблон — не тот, который просто красивый, а тот, который отрабатывает и приносит конверсии.

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

Чек-лист действий:

  1. Сразу не выбирать слишком сложные и объемные шаблоны, в которых сложно разобраться разработчику и администратору проекта, а в итоге и покупателю. Все должно быть предельно просто и понятно независимо от того, берете вы готовое решение или делаете свой дизайн.
  2. Прописать свой бюджет, посмотреть разные варианты на рынке как на сайтах по продаже макетов, так среди веб-студий и узкопрофильных разработчиков CMS решений и шаблонов к ним.
  3. Перед установкой протестировать демоверсию, чтобы действительно все было адаптивно и кроссбраузерно, ничего не сползало и не наплывало одно на другое.
  4. Почитать отзывы об этом продукте и его разработчиках. Сравнить версию шаблона и версию вашей CMS.
  5. Проверить расположение на главной странице хитов продаж, рекламных баннеров, удобный каталог и наличие фильтров. Проклацать все разделы и убедиться, что визуально все понятно и все работает.
  6. Покупать на проверенных площадках и у лучших разработчиков, чтобы не получить файлы с вирусами.  
  7. Найти разработчика, вместе с которым все установите и настроите, изучив инструкции и получив необходимые консультации у технической поддержки.

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


Рассказать друзьям:

Написать комментарий


okay_user
Администратор
15.01.2019, 11:15
Владимир, планируется, но ближе к лету
okay_user
Владимир
15.01.2019, 01:13
Здравствуйте! Не планируется ли англоязычная версия вашего сайта? Может есть какая-то уже? А то проблематично предлагать иностранным заказчикам сделать интернет-магазин "on great Ukranian CMS that you don't know" :)