Как разработать интернет-магазин на шаблоне?

Предложение шаблонов выглядят очень привлекательно за 70-150$ красивый дизайн, 10 тем, 32 модуля, тысячи вариаций. Но в чем подвох?

Расставим точки над “и”: не имеет значения, на чём конкретно у вас сделан интернет-магазин — ни в плане платформы, ни в плане дизайна. Главное, решает ли коммерческий ресурс задачу клиента и насколько хорошо он справляется со своими функциями по сравнению с сайтами конкурентов.

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

1. Выбор шаблона

Запомните: рисуют для того, чтобы купили. Как правило, в шаблонах не прорабатывают путь навигации пользователя и уж тем более не пытаются учесть отраслевую специфику. Например, не берётся в учёт то, что шины в магазине автозапчастей надо предлагать пользователю сразу по 4 шт. — об этом разговор будет идти позже. Что нужно будущим владельцам интернет-магазинов? То, что “аппетитно” выглядит, или то, что максимально похоже на их представления. Для понимания картины попробуйте сравнить любой крупный развивающийся интернет-магазин и шаблон. Невооруженным глазом будет видно, что даже при общей схожести очень много мелких различий.

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

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

Сравните с labirint.ru, тут сразу есть преимущества, акции, информация об оплате, видно сами товары

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

2. Установка

Итак, шаблон вы выбрали, после оплаты вам отправят установочный ZIP-архив. Его нужно будет загрузить в “Настройки” — “Шаблоны”. Далее вам предложат пройти процедуру установки. В этом нет ничего сложного, кроме тех случаев, когда возникают ошибки или сбои на этапе установки.

Но после установки все несколько иначе, чем на картинке.

0.5-1 час

3. Делаем, как на картинке

Это происходит не в 100% случаев, но очень часто. Блоки стоят не на своих местах + в магазине не совпадает наполнение с шаблоном, например, картинки в слайдере не того размера.

Первым делом, давайте его вернём к первозданному виду. Для этого нужно:

Наполнить его тем же содержимым — часто оно идет в комплекте.
Устранить возникшие проблемы: возможно, не установлен модуль или установлен, но не так, как предполагалось.

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

0-3 часа

4. Перевод на русский

К счастью, большинство шаблонов делаются “по образу и подобию” стандартного шаблона, поэтому перевод для большинства фраз уже есть, нужно только настроить локализацию.

Но, как говорится, “дьявол кроется в деталях”, и чтобы не столкнуться с проблемами из-за вышеупомянутых мелочей, нужно кое-что проверить. В частности, нужно проверить все страницы сайта (а их в среднем 25 различных типов) на предмет непереведенных фраз. Также в теме могут быть свои модули — они, как правило, создаются только на английском языке.

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

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

Тут, если приглядеться, заметно, что название магазина (латиница) выглядит иначе.

1-4 часа

5. Настройки в админ панели

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

0.5-1 ч

6. Адаптация к требованиям рынка

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

Очевидный ответ: скорее всего, нет (при прочих равных). Конечно, все равно есть вероятность получить небольшой поток заказов, особенно в случаях, если конкурентов мало или вообще нет.

Проблема шаблонов в том, что их рисуют универсальными, чтобы понравилось максимальному количеству людей. В таком случае шаблоны покупают. Именно поэтому возникают следующие проблемы:

Шаблон оказывается красивой картинкой, на которую приятно смотреть, но для покупок не хватает функционала.
Не продумана логика заказа. Кнопки покупки не заметны для покупателя.
Вставлено максимальное количество модулей и блоков, которые только путают пользователя, а не помогают. Помните правило: «Меньше, но лучше».
Шаблон сделан под любой товар, без учета особенностей покупки товара.

К примеру, если вы покупаете мобильный телефон, что будет важно для вас с точки зрения интернет-магазина?

Характеристики (удобно сгруппированные).
Возможность сравнения с другими телефонами.
Подходящие для данной модели аксессуары.
Возможность покупки в кредит/рассрочку.
Отзывы из различных источников (Яндекс.Маркет и т.п.).
Возможность, стоимость и время доставки в ваш город (желательно прямо в карточке товара).
Модели, которые похожи по характеристикам.
Специфичный отбор товаров — «красненький», «с 2-мя сим-картами», «большой экран».
Покупка в 1 клик.
Большие фото и 3D модели.

Хороший пример — сайт “Связного”

Как правило, в шаблоне нет и 70% от этого, либо оно есть, но не так удобно, как могло быть. Более того, задача дизайна — передать информацию таким образом, чтобы покупатель оформил заказ с большей вероятностью. К примеру, информация должна быть расположена по траектории движения глаз и одной из конечных точек должна быть кнопка «Купить».

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

Пример сбора информации по запуску интернет-магазина элитной детской одежды

2-16 часов

7. Адаптация контента

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

Меню в шаблоне визуально рассчитано только на 7 пунктов, а у нас их получилось 12 и из-за этого получается 2 ряда меню.
У всех товаров одинаковое фото (такое часто бывает в промышленных тематиках, например, продукция ЖБИ) и нет смысла отображать его в каталоге, хотя в дизайне предусмотрен именно такой вариант.
Товар состоит из комплектующих товаров (например, корпусная мебель) и их нужно удобно выбирать, причем, стоимость должна меняться.
В некоторых элементах получилось слишком мало вложенных частей и смотрится это некрасиво, допустим, с теми же категориями или рекламными акциями.

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

2-6 часов

8. Оформление заказа + возможность связаться

Ключевая точка, где теряются все покупатели. Как правило, в шаблоне или в CMS системе предусмотрено не очень удобное для покупателей оформление заказа. И в зависимости от отрасли оно может сильно различаться. К примеру, в магазине интим-товаров очень важно сократить необходимость общения с покупателями — лучше увеличить количество полей и сделать автоматический расчет доставки. А на сайте по продаже ЖБИ нет смысла просить покупателя сразу заполнить все данные о юр.лице, как правило, на этапе заказа нужна только информация о стоимости планируемой покупки.
Поэтому, следует проверить ваше оформление заказа на соответствие следующим правилам:

Позволяет ли оно пользователю получить всю необходимую информацию на момент покупки? Речь идет о следующих данных:
1. Стоимость и сроки доставки.
2. Варианты оплаты.
3. Гарантия.
4. Наличие товара.
Удобна ли форма заказа и насколько соответствует ожиданиям покупателя? Можно ли купить товар в 1 клик, если нет времени?
Не возлагает форма заказа груз ответственности на покупателя? В некоторых формах формулировка звучит таким образом, что покупателю кажется, что товар сразу отправят, не дав ему возможности узнать больше о его характеристиках (вдруг не подойдет?).
Если уместно, то можно ли оплатить товар онлайн?

Неплохой пример у labirint.ru

2-16 часов. Время тут сильно зависит от того, будет ли подключен автоматический расчет доставки и функция онлайн-оплаты.

9. Финальное тестирование

Осталось проверить все типовые страницы на 3-4-х размерах экрана + проверить отдельно на Android и iOS в Safari.

В Safari есть определенные моменты, которые не учитываются в других браузерах, что требует отдельного внимания.

Рекомендуется сделать скриншоты всех основных страниц, во всех разрешениях и посмотреть все ли совпадает с требованиями

1-2 часа

Подведем итоги

Итого, разработка интернет-магазина на шаблоне, не считая наполнения, занимает от 9 до 43 часов, после чего ресурс можно будет назвать работающим магазином. Также стоит учитывать, что указанное время приводится в отношении специалиста, который делает подобные задачи не меньше полугода в постоянном режиме + имеет опыт в программирование не менее 1 года.

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

Каких результатов можно добиться?

У нас не так много кейсов, где можно сравнить результат до и после, так как мы делаем сразу правильные решения. Один из наших клиентов пришел к нам из одной конвейерной веб-студии, где ему сделали очень простой сайт во всех смыслах. Бюджет на новый сайт и продвижение был ограничен(до 60т.р.) и мы предложили сделать вариант на шаблоне + разовую SEO оптимизацию.

К чему это привело?

akb-ural.ru

3-х кратный рост посещаемости по SEO. Поисковые системы в том числе любят хорошие сайты.
Увеличение количества заявок в 5 раз.
Повышение количества заявок с мобильных устройств за счёт адаптивной версии

Похожие