SlideShare a Scribd company logo
1 of 120
Download to read offline
2©Алекс Мельников www.magkurs.ru
Оглавление
Предисловие.........................................................................................................................4
Установка локального сервера (Денвера)...........................................................................5
Установка расширения для Денвера...................................................................................7
Установка магазина (Opencart) на локальный сервер........................................................8
Первичные настройки интернет-магазина. ......................................................................15
Настройка ЧПУ..................................................................................................................20
Добавляем категорию товаров. .........................................................................................22
Добавляем первый товар. ..................................................................................................26
Как настроить опции товара?............................................................................................31
Как работать с атрибутами товара? ..................................................................................36
Добавление акций и скидок...............................................................................................40
Работаем с модулем «Рекомендуемые товары». ..............................................................42
Добавляем «Похожие товары»..........................................................................................45
Меняем облик (дизайн) интернет-магазина. ....................................................................47
Меняем логотип интернет-магазина..............................................................................47
Меняем иконку магазина (favicon) ................................................................................52
Меняем «Слайдшоу» на главной странице. ..................................................................54
Как работать с модулем «Карусель»?............................................................................58
Редактируем «подвал» интернет-магазина....................................................................60
Как установить новый шаблон интернет-магазина?........................................................63
Оптимизация интернет-магазин под поисковые запросы. ..............................................67
3©Алекс Мельников www.magkurs.ru
Автоматизируем оптимизацию внутренних страниц. .....................................................70
Оптимизация H1 .............................................................................................................70
Усиление присутствия ключевых запросов. .................................................................71
Рекомендации по заполнению страницы с товаром. .......................................................76
Установка модулей оплаты (Robokassa, Qiwi).................................................................79
Регистрируем хостинг. ......................................................................................................81
Регистрируем домен. .........................................................................................................87
Переносим интернет-магазина на хостинг.......................................................................91
Настройка платежных систем. ........................................................................................104
Встроенные способы оплаты. .........................................................................................110
Настройка модулей «Доставки»......................................................................................111
Как установить VQMOD? ...............................................................................................113
ДОПОЛНЕНИЕ................................................................................................................114
Как начать торговлю без своего товара.......................................................................114
Установка счетчика статистики посещений................................................................116
ЗАКЛЮЧЕНИЕ................................................................................................................120
4©Алекс Мельников www.magkurs.ru
Предисловие.
Здравствуйте уважаемый читатель!
Добро пожаловать на страницы самоучителя «Делаем профессиональный и эффективный
интернет-магазин с нуля на OpenCart».
Если вы читаете эти строки, значит, у вас есть большое желание и стремление создать
своими руками качественный интернет-магазин и начать новый бизнес в интернете. Со
своей стороны я постараюсь вам в этом помочь.
Мы с вами с самых азов, шаг за шагом, начнем создавать свой первый интернет-магазин.
Вначале может показаться, что все не так просто, и это всегда так, когда приступаешь к
освоению чего-то нового. Но, в конце изучения материала вы будите собственником
своего полноценного интернет-магазина на отдельном хостинге и домене.
Вы наверно заметили, что в скаченном архиве еще присутствует дополнительная папка.
Там находятся программы, которые нам понадобятся в процессе создания интернет-
магазина.
Желаю успехов!
поддержка
http://magkurs.support-desk.ru
5©Алекс Мельников www.magkurs.ru
Установка локального сервера (Денвера).
Локальный сервер – это специальная программа, которая позволяет разрабатывать
динамические сайты на домашнем компьютере, при этом сам интернет нам не нужен. Это
касается и интернет-магазинов. Перед тем, как «вывести» свой сайт в мир интернета
сначала целесообразно сделать его на домашнем компьютере, а уже готовый сайт
переносить на арендованный хостинг.
Для этих целей мы будем использовать локальный сервер под название Денвер (denwer),
который можно скачать с официального сайта www.denwer.ru. Но я уже скачал его, и в
папке с программами дистрибутив Денвера уже есть. Поэтому вам не обязательно его
скачивать. Сначала мы установим сам Денвер, а потом расширение для него.
Найдите в папке с программами файл с названием Denwer3 Base PHP52, кликните два
раза и начнется установка. Появиться следующее окно. Если откроется браузер,
закрываем его.
По большому счету необходимо просто соглашаться со всеми подсказками при
установке, как на рисунке. Нажмите Enter.
Дальше необходимо выбрать имя директории. Оставим без изменений и нажмем опять
Enter. Появится следующее окно.
6©Алекс Мельников www.magkurs.ru
Соглашаемся, вбивая Y, и снова нажимаем Enter. Дальше нам нужно выбрать букву
виртуального диска. Рекомендую поставить, как предлагает сам Денвер – Z. Но если у
вас уже есть локальный диск с такой буквой (можно проверить зайдя в Мой компьютер),
тогда придумайте любую другую. Нажимаем Enter.
Дальше выбираем вариант 1, и создаем ярлыки на рабочем столе.
Все! Установка локального сервера завершена. На рабочем столе должны появиться три
вот таких иконки: Start Denwer (включение Денвера), Restart Denwer (Перезагрузка
Денвера), Stop Denwer (остановка Денвера). В дальнейшем если я буду писать, что
необходимо перезагрузить Денвер или локальный сервер, то вы нажимаете Restart
Denwer.
7©Алекс Мельников www.magkurs.ru
Установка расширения для Денвера
Чтобы установить Opencart на локальный компьютер, необходимо еще установить
расширение для нашего локального сервера. Находим в папке с программами файл
Denwer dop, и начинаем установку по аналогии с Денвером. Внимание! Дополнение
устанавливаем туда же, где установлен и сам денвер, т.е соглашаемся с тем, что говорит
нам программа при установке.
Проверим, как все работает. Запускаем Денвер нажатием - Start Denwer. Дальше, в
любом браузере наберите localhost. Должна загрузиться вот такая страница, которая
означает, что все правильно установлено и локальный сервер работает.
Все, теперь наш локальный сервер готов, и можно приступить к установке самого
интернет-магазина.
8©Алекс Мельников www.magkurs.ru
Установка магазина (Opencart) на локальный сервер.
Для установки интернет-магазина на локальный сервер, нам понадобятся файлы самого
интернет-магазина. В папке с дополнительными программами уже имеется архив с
файлами Ocstore - ocstore_v1.5.4.1. Также, дистрибутив можно скачать с официального
сайта http://myopencart.ru. Мы будем устанавливать последнюю версию Ocstore на
момент написания книги, с индексом – 1.5.4.1. Если даже на официальном сайте
появилась более новая версия Oсstore, то можно скачать ее. Установка ничем
принципиально отличаться не будет.
Для начала перейдем на созданный локальный диск - Z (Мой компьютер) в папку home.
Внутри нее создаем новую папку с названием нашего магазина. Например, я назвал ее
urok. Вы можете назвать ее как угодно, но главное латинскими буквами для дальнейшего
удобства пользования. При переносе нашего магазина в интернет, мы всегда сможем
поменять его название, поэтому как вы его назовете в процессе разработки на локальном
сервере не так важно.
Теперь, заходим в новую папку (urok), и внутри нее создаем еще одну новую папку,
которую именуем как www. Здесь уже без вариантов выбора названия! Именно в
папке www и будут находиться все файлы сайта. У меня путь до файлов сайта получился
такой Z:homeurokwww.
9©Алекс Мельников www.magkurs.ru
Дальше открываем архив с файлами сайта ocstore_v1.5.4.1, переходим в папку uplouad и
копируем все находящиеся в ней файлы (выделены желтым) на локальный сервер в папку
www - Z:homeurokwww
(Внимание! Если вы устанавливаете версию Ocstore 1.5.5.1.1., то вам необходимо переименовать два
файла - config-dist.php и admin/config-dist.php в config.php)
Теперь нам необходимо создать Базу Данных (БД) для нашего магазина (проверьте, что
Денвер у вас работает). Набираем в браузере localhost и переходим ниже по ссылке
phpMyAdmin - администрирование СУБД MySQL.
Дальше в самом верху жмем на Базы данных.
И создаем новую базу данных, латинскими буквами. Название БД можно придумать
любое. Я назвал ее, как и локальный сайт – urok. Нажимаем Создать. Все база данных
создана. Запомните ее название.
10©Алекс Мельников www.magkurs.ru
Теперь обязательно перезагрузите Денвер, чтобы новые параметры начали
работать.
Приступаем к установке самого магазина.
Набираем в строке браузера название нашего магазина. У меня, как вы помните, это
urok. Нажимаем Enter. Появится страница с первым шагом установки. Соглашаемся с
лицензией и нажимаем Продолжить (У новых версий Ocstore установочный интерфейс
может отличаться, но действия мы выполняем те же).
Если у вас не открылась установочная страница, проверьте, включен ли Денвер. Если
локальный сервер работает, то убедитесь, что файлы сайта присутствуют в папке
Z:homeНазвание_вашего_сайтаwww.
На втором шаге проверяются все параметры системы. Если все правильно, в строке
состояние будут только зеленые галочки. Нажимаем Продолжить.
11©Алекс Мельников www.magkurs.ru
Мы перешли к третьему важному шагу – к настройке конфигурации. Смотрите рисунок
ниже. Заполняем:
Сервер БД: localhost
Пользователь: root (только так)
Пароль: оставляем пустым
Имя БД: urok (вы вписываете то, которое придумали)
12©Алекс Мельников www.magkurs.ru
Префикс БД: оставляем пустым
После, заполняете логин и пароль администратора, а также email. Здесь я придумал
простые данные. Их всегда можно поменять позже через административную часть
магазина. После заполнения нажимаем Continue.
Все, установка завершена, но система предупреждает нас, что мы должны обязательно
удалить установочную папку. Это во избежание случайной и повторной установки.
13©Алекс Мельников www.magkurs.ru
Для этого переходим в папку с файлами нашего магазина, напомню, у меня это папка
Z:homeurokwww и удаляем папку install.
Теперь мы можем посмотреть, и ознакомится с нашим магазином. Набираем в строке
браузера его название – urok, и мы увидим главную страницу магазина с демо-товарами.
14©Алекс Мельников www.magkurs.ru
Можете «полазить» по своему магазину, перейти в категории, товары, посмотреть, как
все выглядит.
Теперь, перейдем в административную часть. Чтобы зайти в «админку» необходимо
набрать в браузере urok/admin/. Вводим свои данные – логин и пароль. Мы заполняли их
на третьем этапе установки. У меня это логин: admin и пароль: 123456. Заходим в
административную панель. Выглядит она так:
Можете также с ней ознакомиться, посетив различные вкладки в меню. Вы увидите,
насколько функционален интернет-магазин на Opencart!
15©Алекс Мельников www.magkurs.ru
Первичные настройки интернет-магазина.
Начнем мы с общих настроек интернет-магазина. Для этого в админ-панели жмем на
вкладку Система, далее Настройки и Изменить (Далее писать буду так: Система-
Настройки-Изменить). Откроется страница с настройками с множеством вкладок.
С общими настройками в принципе все понятно. Заполняем название, владельца, адрес и
т.д. по своему усмотрению. Кстати в качестве примера я буду делать интернет-магазин
ноутбуков, что и отражено на рисунке выше. Рекомендую писать подробные контактные
данные, т.к. эта информация отражается на странице под названием «Связаться с нами».
Но можно этот этап пропустить и заполнить его позже.
Далее, переходим на вкладку Витрина. Здесь необходимо обязательно заполнить
Заголовок и Мета-тег Description (Описание). Заголовок не должен быть слишком
длинным. У меня: Интернет-магазин ноутбуков город Москва. Это название главной
страницы нашего магазина. Описание же не делайте больше двух предложений.
Правильное заполнение заголовков и мета-тегов мы рассмотрим в специальном разделе.
Также, на этой странице можно выбрать схему и шаблон магазина. Но здесь мы пока все
оставим без изменений.
16©Алекс Мельников www.magkurs.ru
Далее, переходим к вкладке Локализация. В зависимости от того, где вы находитесь и
где собираетесь торговать заполняем этот раздел. Здесь сложностей нет. Я заполнил так:
17©Алекс Мельников www.magkurs.ru
Переходим к вкладке Опции. Здесь находится очень много настроек. Ознакомьтесь пока
с ней. Вы еще к ней вернетесь при разработке магазина. Исходя из своих потребностей, я
настроил, как показано на рисунке ниже (если рисунки для вас слабо читаемы, можете
воспользоваться полноразмерными, в папке Дополнительные программы под
названием nastroyki 1.png и nastroyki 2.png).
18©Алекс Мельников www.magkurs.ru
19©Алекс Мельников www.magkurs.ru
Вкладка Изображения позволяют нам настроить размеры картинок в категориях и
карточках товара, а также поменять иконку и логотип. Мы к этому шагу еще вернемся.
Во вкладке Почта нас волнуют параметры Оповещение о заказе по E-mail и
Оповещение о новом клиенте. Рекомендую их включить нажатием Да. Также, ниже
можно внести еще дополнительные email адреса через запятую.
И последнее, что нас больше всего интересует - это вкладка Сервер. Настраиваем так,
как показано на рисунке ниже. Включаем сам ЧПУ (чекбокс Да), и выбираем тип ЧПУ –
SeoPro. Окончание ЧПУ пишем .html (обязательно с точкой впереди), а ключ
шифрования меняем на свой, используя только цифры и латинские буквы. Можно
просто поменять некоторые значения в уже имеющемся ключе.
20©Алекс Мельников www.magkurs.ru
Все, основные настройки изменены. Теперь Сохраняем нажатием кнопки верху справа.
Настройка ЧПУ.
Таким образом, мы с вами включили ЧПУ (описано выше), что позволяет формировать
понятные для человеческого восприятия адреса веб-страниц. Согласитесь, что намного
удобнее когда, например страница с товаром имеет вот такой веб-адрес -
http://magazin.ru/Lenovo/Lenovo_Z580.html нежели вот такой
http://magazin.ru/index.php?route=product/product&path=57&product_id=49.
Но для того, чтобы ЧПУ заработало, нам необходимо переименовать файл .htaccess.txt, в
.htaccess, который находится в папке с файлами нашего сайта - Z:homeurokwww.
Для этого нам понадобится бесплатный текстовый редактор Notepad++. Его можно найти
и скачать с интернета, но я уже это сделал за вас, и он находится в папке с
дополнительными материалами под названием npp.6.3.3.bin. Установите его, он еще
впоследствии вам пригодится.
После установки, откройте с помощью Notepad++ файл .htaccess.txt и ничего не изменяя,
перейдите в Файл – Сохранить как.
21©Алекс Мельников www.magkurs.ru
Далее, выбираем папку, где находятся наши файлы сайта - Z:homeurokwww (Не
забываем ее выбрать). Имя файла оставляем без изменений, в вот Тип файла меняем на
All types и Сохраняем.
У вас появится новый файл .htaccess, который отвечает за дополнительную
конфигурацию веб-сервера и работу вашего сайта.
22©Алекс Мельников www.magkurs.ru
Добавляем категорию товаров.
Сейчас мы попробуем добавить первую категорию и товар. Но сначала нам необходимо
удалить существующие категории. Переходим в административную часть магазина в
Каталог – Категории, выделяем все старые категории с помощью чекбокса и жмем
Удалить.
Здесь же нажимаем Добавить, и у вас появится вот такая форма по добавлению новой
категории.
23©Алекс Мельников www.magkurs.ru
Как видно добавление категории состоит из стрех вкладок: Общие, Данные и Дизайн.
Последнюю мы пока не трогаем.
Как видно из рисунка, вкладку Общие я уже заполнил. Итак, первую категорию я
посветил ноутбукам фирмы Asus, поэтому и соответствующие название.
HTML-тег H1 – это заголовок первого уровня, который будет отображаться на странице
категории.
HTML-тег Title – это название всей страницы. Оно не отображается на самой странице,
но полностью характеризует ее. Этот тег очень важен для поисковых систем.
Мета-тег Keywords – ключевые слова, заполняются через запятую.
Мета-тег Description – описание страницы, в данном случае категории. Не больше двух
предложений.
Описание – описание категории. Здесь думаю и так все понятно. В отличие от описания
конкретного товара, описание категории иногда не заполняют.
24©Алекс Мельников www.magkurs.ru
Во вкладке English заполните только одну строчку – Название категории. Или можно
вообще убрать эту вкладку. Для этого зайдите в Система – Локализация – Языки.
Выберете английский язык (English) и удалите его. Теперь при добавлении категории или
товара вкладки English не будет.
Заполните все эти поля.
Далее переходим во вкладку Данные.
25©Алекс Мельников www.magkurs.ru
Заполните как на рисунке. Здесь ничего сложного нет, главное обратите внимание, что
SEO URL должен быть уникальным для любой категории или товара. Это необходимо
для формирования ЧПУ, про которое шла речь выше. Лучше писать латинскими буквами
транслитом или правильно на английском. У меня есть несколько вариантов. Например:
noutbuk, notebook, notebook_asus или просто Asus, который я и выбрал. То есть, адрес
моей категории будет вида http://magazin.ru/asus/, если выбрал бы notebook, то было бы
вот так - http://magazin.ru/notebook/.
Также, можно добавить изображение в категорию. Хотя это не обязательное условие, и
все решается индивидуально. Но я для примера добавил. Нажимаете Обзор и появится
менеджер изображений.
Здесь можно создать новую папку, что я и сделал с помощью кнопки Нов.папка.
Открываем ее, и жмем Загрузить. Выбираем на компьютере нужное изображение и
загружаем. После загрузки вставляем изображение с помощью двух щелчков мыши.
После заполнения всех данных необходимо Сохранить, и наша первая категория
создана. Теперь осталось добавить первую единицу товара.
26©Алекс Мельников www.magkurs.ru
Добавляем первый товар.
Сейчас, также как с категориями, нам необходимо удалить все имеющиеся товары. Для
этого переходим в Каталог – Товары, выделяем их все с помощью чекбокса и удаляем.
Здесь все по аналогии с категориями.
Теперь нажимаем Добавить. Откроется форма для добавления товара. Здесь намного
больше вкладок и опций. Сначала вам покажется, что добавление товара – это сложное и
долгое дело. Но когда вы «набьете руку» и освоитесь, вы будите это делать намного
быстрее и качественнее, а также оцените функциональные возможности Opencart.
Для примера я добавлю ноутбук Asus N56VZ. По сути, первая вкладка Общие,
заполняется также как и в категориях, но здесь описывается конкретный товар. Я не стал
сильно расписывать Описание (в данном случае характеристики ноутбука и т.д.). Нам
главное понять логику добавления товара, а уже позже вы сделаете все в соответствии со
своей товарной группой.
Также, не забываем про вкладку English, где просто заполняется Название товара.
27©Алекс Мельников www.magkurs.ru
Далее переходим к заполнению вкладки Данные. Смотрите рисунок ниже. Напомню, не
забывайте заполнять SEO URL. Еще в этом примере я выключил Необходимую
доставку, так как предполагается, что доставка будет осуществляться бесплатно. Здесь
решать только вам. Настройке доставки будет посвящен отдельный раздел. Изображение
товара добавляется также как в категориях.
28©Алекс Мельников www.magkurs.ru
Теперь, переходим к вкладке Связи. Здесь выбираем, к какой категории принадлежит
товар. Рекомендуемые мы пока не трогаем, т.к. это у нас только первый и единственный
товар, и рекомендовать нам пока нечего (см. рис. ниже).
29©Алекс Мельников www.magkurs.ru
Теперь, пропуская остальные вкладки, переходим к Изображениям. Здесь добавляются
дополнительные изображения товара. Просто нажимаете Добавить изображение, потом
по аналогии Обзор. А с менеджером изображений вы уже знакомы. Таким образом,
можно добавить несколько дополнительных изображений, и выбрать порядок сортировки
– 1,2,3…. Я добавил три изображения.
30©Алекс Мельников www.magkurs.ru
Первоначальное добавление товара закончено. Жмем Сохранить, переходим в магазин, и
смотрим, что у нас получилось. У меня вышло так:
.
31©Алекс Мельников www.magkurs.ru
Как настроить опции товара?
Бывает так, когда необходимо выводить в карточке товарной позиции несколько свойств
товара или часто повторяющиеся характеристики. Например, это может быть размер
обуви, цвет, форма товара, фасон, дополнительные акссесуары и т.д. У вас тоже могут
быть свои значения в зависимости от группы продаваемых товаров, или вообще их не
быть. Вот для этого и существует такая функция как Опция. Я на примере добавлю на
выбор два цвета для ноутбука Asus N56VZ – черный и серебристый.
Для начала удалим все старые опции. Переходим в Каталог – Опции, все выделяем и
удаляем.
После удаления нажимаем Добавить. У меня эта опция будет назваться Цвет (рисунок
ниже). В названии опции пишем Цвет (color для eng, кстати здесь везде по сайту в этом
поле можно просто копировать русское название), Тип выбираем список, Порядок
сортировки – 1. Дальше нажимаем Добавить значение опции. Добавляем первое
значение опции – это Черный цвет. Потом опять жмем Добавить значение опции.
Добавляем второе значение – Серебристый. Если у вас много значений опций добавляйте
их все, т.е для каждого размера – отдельное значение опции. Жмем Сохранить.
32©Алекс Мельников www.magkurs.ru
Иногда самих опций может быть много. Например, для обуви – это и цвет, и размер, и
возможно материал. Тогда вы в Каталоге – Опции добавляете все эти опции по
отдельности с разными значениями. Все это в дальнейшем сокращает время на
добавление товара.
Переходим к своему первому товару. Каталог – Товары, напротив товара нажимаем
Изменить. Переходим в вкладу Опции. Дальше просто набираем первую букву опции и
выбираем ее
Далее, нажимаем на Добавить значение опции. Выбираю – серебристый. У меня, как вы
помните два значения – черный и серебристый, поэтому я нажимаю второй раз Добавить
значение опции, и выбираю уже черный. Прописываем количество и сохраняем.
33©Алекс Мельников www.magkurs.ru
Переходим на страницу с товаром, и смотрим, что получилось. Запомните! Что после
новых настроек в админчасти, чтобы увидеть изменения на сайте перезагрузите страницу
в браузере.
Опции можно выводить несколькими способами: список, переключатель, флажок. Если
вы хотите, чтобы доступные варианты выводились вот так
34©Алекс Мельников www.magkurs.ru
Тогда в самих настройках опции (Каталог-Опции) измените тип на переключатель.
Также, можно расшить функцию Опции. Допустим, у меня серебристый ноутбук стоит
на 500 рублей дороже, и мне это надо отразить в дополнительных свойствах. И не просто
отразить, а чтобы при выборе этого свойства к основной цене автоматом плюсовались
500 рублей.
35©Алекс Мельников www.magkurs.ru
Опять переходим к настройкам товара (Каталог – Товары - Изменить) и в Опциях
товара к серебристому свойству просто выбираем + и пишем 500 как показано на
картинке. Сохраняем.
А вот, как это выглядит. Теперь при выборе серебристого цвета к основной сумме
прибавятся 500 рублей.
Таким образом, возможности у опций очень широкие. Они достаточно грамотно и удобно
позволяют представить вашим клиентам разные варианты вашего товара. Теперь,
переходим к работе с атрибутами.
36©Алекс Мельников www.magkurs.ru
Как работать с атрибутами товара?
Атрибуты используются в основном для дополнительных характеристик товара, и
значительно облегчают впоследствии добавление товара. Выглядят они вот так.
Атрибуты вполне актуально, например, использовать для различной техники, в том числе
и ноутбуков. Надо сказать, что по сравнению с опциями, атрибуты используются слабо.
Обычно просто копируются характеристики тех же ноутбуков и вставляются таблицей в
описание, иногда и без таблицы. Но для примера я покажу, как добавляются атрибуты.
Атрибуты состоят из группы атрибутов и самих атрибутов. Например, Процессор – это
группа атрибутов, которая состоит из множество других атрибутов – Intel, AMD, Celeron
и т.д. Также и Операционная система, которая включает такие атрибуты как Windows 7,
Windows 8, Linux и т.д. Еще, большой группой могут быть Экран, Видео память, НDD.
Но мы для примера ограничимся двумя группами.
37©Алекс Мельников www.magkurs.ru
Для начала нам необходимо удалить старые группы атрибутов и сами атрибуты.
Переходим Каталог – Атрибуты – Атрибуты, выделяем их все и удаляем. Также
необходимо удалить все группы. Для этого переходим в Каталог – Атрибуты – Группы
Атрибутов.
Далее, создадим первую группу атрибутов – Процессор. Нажимаем Добавить.
Появляется вот такая форма. Заполняем ее и сохраняем.
Точно также создаем и вторую группу – Операционная система. В результате у нас две
группы атрибутов.
Теперь переходим в Каталог – Атрибуты – Атрибуты. Жмем Добавить. Появляется
форма, заполняем ее. Первый атрибут у нас будет Intel, и не забываем для него выбрать
подходящую группу атрибутов и сортировку (рисунок ниже). Заполнили и Сохранили.
38©Алекс Мельников www.magkurs.ru
Далее по аналогии добавляем остальные атрибуты – AMD, Linux, Windows 7, Windows 8.
Этого достаточно для нашего примера. После, должен появится список атрибутов. У
меня такой.
Атрибуты мы создали, теперь их нужно добавить в сам товар. Переходим в Каталог –
Товары, выбираем нужный товар и жмем Изменить. Переходим к вкладке Атрибут, и
нажимаем Добавить атрибут. Пишем название атрибута (не группы!) в первой колонке –
Intel и текст 2300МГц. Здесь же жмем снова Добавить атрибут и добавляем второй
атрибут – Windows 7 и текст. Сохранить. Смотрите рисунок ниже.
39©Алекс Мельников www.magkurs.ru
Смотрим, что получилось. Переходим к карточке товара. У нас появилась новая вкладка
Характеристики с описанием технических данных ноутбука.
40©Алекс Мельников www.magkurs.ru
Атрибутами могут выступать любые характеристики. Все зависит от ваших товаров и
фантазии. А использовать их или нет – это решать вам.
Добавление акций и скидок.
Например, вы решили, что с определенного времени вы будете продавать товар немного
дешевле. При этом вы хотите, чтобы старая цена тоже была видна, но была бы
зачеркнута, а рядом новая, более привлекательная.
Для этого переходим к редактированию товара – Каталог – Товары – Изменить.
Выбираем вкладку Акции и нажимаем Добавить акцию. Заполняем: Ставим приоритет,
затем новую цену, выбираем дату начала и окончания акции. Жмем Сохранить.
Теперь смотрим, что у нас получилась.
41©Алекс Мельников www.magkurs.ru
С помощью настройки даты акции, вы сможете заранее ее запланировать, и она
автоматически включится и отключится.
Что касается вкладки Скидки, то там все настраивается также, только не будет
отображаться старая цена.
Итак, мы с вами добавили первую категорию и товар, научились добавлять опции,
характеристики, акции. Для дальнейшего изучения курса вам необходимо
самостоятельно добавить еще несколько категорий и с десяток товаров. Для начала
и изучения системы этого будет достаточно.
42©Алекс Мельников www.magkurs.ru
Работаем с модулем «Рекомендуемые товары».
Итак, мы добавили несколько категорий и товаров. Теперь можно работать и с модулями.
Вы наверно заметили, что на главной странице вашего магазина есть блок Рекомендуем,
но там нет не одного товара. За вывод товаров в этом блоке отвечает модуль –
Рекомендуемые. Из названия модуля и так понятно за что он отвечает. Сейчас мы его
будем настраивать.
Переходим Дополнения – Модули, ищем там модуль Рекомендуемые и нажимаем
Изменить. В окошко Товары вбиваем начальную букву названия товара и выбираем его.
Нам необходимо по условию выбрать, таким образом, минимум шесть товаров.
После списка товара идет настройка самого модуля. Limit: 6 (будет выводиться 6
товаров), Схема: Home (на главной), Расположение: Вверх страницы, Статус:
Включено, Порядок сортировки: 2. Далее жмем Сохранить. Перезагружаем главную
страницу магазина и смотрим, что получилось.
43©Алекс Мельников www.magkurs.ru
Таким образом, вы можете полностью настроить вывод рекомендуемых вами товаров на
главной странице магазина. Например, вы можете увеличить количество выводимых
товаров, а размер изображений сделать меньше или больше. Здесь необходимо
отталкиваться от общего дизайна, вида магазина. Нам сейчас главное понять, как с этим
модулем работать. Позже вы все сами скорректируете.
Но самое интересное, что список рекомендуемых товаров можно выводить на любой
странице в любом месте. Попробуем вывести этот блок на странице, с каким либо
товаром.
Переходим опять к настройке модуля Рекомендуемые. (Дополнения – Модули -
Изменить). Сначала нажимаем Добавить модуль. Появляется новый модуль для
настройки.
44©Алекс Мельников www.magkurs.ru
В этот раз лимит я поставлю 4, размер изображения: 80x80, а вот схему вывода поставлю
– product, и расположение – левая колонка. Не забываем поставить статус – включено и
порядок сортировки – 2. Нажимаем сохранить. Переходим на страницу любого товара и
смотрим, что получилось.
Вы всегда сможете откорректировать вывод товаров с помощью, например, размера
изображения, сделав его больше или меньше.
Если вы хотите, что бы рекомендуемые появлялись и в категории, то тогда выбирайте
схему – category. Можете потренироваться и по выводить «рекомендуемые» в разных
местах, меняя в настройках лимит, расположение и сортировку.
Также, в списке моделей, есть Хиты продаж и Последние. Найдите их в списке
(Дополнения - Модули) и установите. Они настраиваются также как и рекомендуемые.
45©Алекс Мельников www.magkurs.ru
Попробуйте их тоже повыводить в разных местах сайта. Последние – это последние
добавленные товары в интернет-магазин. Хиты продаж – это последние продажи ваших
товаров. Этот модуль вам ничего не покажет, если не было совершено заказов. Поэтому,
вы можете сами сделать «липовые» заказы, чтобы появился список хитов. Или подождать
первых реальных продаж, а уже потом активировать этот модуль.
Модули Рекомендуемые, Последние, Хиты продаж позволяют вывести
дополнительные списки товаров в любом месте магазина, что способствует увеличению
просмотра клиентами вашего ассортимента.
Добавляем «Похожие товары».
Еще мы можем несколько товаров вывести и в самой карточке товара, рядом с отзывами.
46©Алекс Мельников www.magkurs.ru
Для этого переходим к списку товаров (Каталог-Товары), выбираем любой товар и
жмем Изменить. Нас интересуют вкладка Связи. Там в самом в низу есть блок
Рекомендуемые.
Выберете любые товара (вводите первую букву из названия товара и выбираете). Не
забывайте, что здесь рекомендуете похожие товары. Дальше, Сохранить. Переходим на
страницу этого товара и смотрим, что получилось. Пример выше я показывал.
47©Алекс Мельников www.magkurs.ru
Меняем облик (дизайн) интернет-магазина.
Теперь приступим к смене внешнего облика нашего магазина. Мы начнем с изменения
стандартного дефолтного шаблона. Сам шаблон находится в папке theme по адресу
Z:homeurokwwwcatalogviewtheme под названием default.
Но мы пока не будем трогать файлы самого шаблона, а попробуем видоизменить его с
помощью инструментов административной части.
На самом деле стандартный дизайн интернет-магазина универсален, и подойдет почти
под любую тематику. Посмотрите магазин сделанный одним из учеников - http://aumu.ru.
При чем это был его один из первых заказов, где заказчик остался вполне доволен.
Именно здесь как раз и был видоизменен стандартный шаблон с помощью смены
логотипа, баннера на главной странице и дополнительных промо материалов. Этим мы
как раз и займемся.
Меняем логотип интернет-магазина.
Откройте главную страницу вашего интернет-магазина. Изменения начнем сверху вниз, и
первое что нам нужно сделать – это сменить логотип. Сейчас он выглядит так.
Для начала нам необходимо изготовить новый логотип. Если вы владеете фотошопом или
другими графическими редакторами, то вам наверно не составит труда сделать себе
новый логотип. Также, изготовление логотипа можно заказать у фриленсеров, например
на http://freelance.ru или на https://www.free-lance.ru/. (Не фирменный стиль, а логотип!)
Если таких возможностей нет, то можно воспользоваться бесплатными онлайн сервисами
по изготовлению логотипов и баннеров. Просто наберите в поисковых системах
подобный запрос и вам предложат множество специальных сервисов.
Что касается онлайн сервисов, то мне больше симпатичен http://www.logomaker.com, там
множество интересных иконок и красивые шрифты. Вы можете использовать любой
другой, но я для примера покажу как пользоваться именно этим.
Заходим на logomaker.com и жмем TRY IT NOW.
48©Алекс Мельников www.magkurs.ru
Далее, переходим по GREATE NEW ACCOUNT и заполняем вот такую форму. Жмем
SAVE.
49©Алекс Мельников www.magkurs.ru
Далее, на первом шаге вы можете выбрать графику для своего магазина по своей
тематике.
На втором этапе можно добавить текст (я не стал добавлять графический элемент, а
ограничился названием магазина). После, нажимаем SAVE LOGO.
50©Алекс Мельников www.magkurs.ru
Далее, выбираем свой логотип, и жмем FREE WEB LOGO.
В новом окне копируем адрес своего логотипа, как показано на рисунке ниже, и
вставляем его в адресную строку браузера. Появится наш логотип. Жмем правой кнопкой
мыши и выбираем сохранить картинку как. В поле имя файла, для удобства, пишем
logo.
51©Алекс Мельников www.magkurs.ru
Внимание! Не забывайте про размеры логотипа, а то он может не вписаться. Например,
стандартный логотип имеет размер 268х50 пикселей, что вполне оправдано для этого
шаблона. Изменить размеры, а также формат (png, jpeg) любого изображения вы можете
с помощью того же «фотошопа» или с использованием Диспетчера рисунков Microsoft
Office.
Теперь необходимо заменить старый логотип новым. Для этого идем в
административную часть магазина, переходим в Система – Настройки – Изменить,
вкладка Изображения.
Жмем Обзор, и загружаем новый логотип (старый можно удалить). Выбираем его и
сохраняем. Смотрим что получилось.
52©Алекс Мельников www.magkurs.ru
Меняем иконку магазина (favicon)
Если вы заметили, то там, где вы меняли логотип можно еще сменить и иконку (favicon).
Я покажу, как это можно сделать, но это на первых порах совсем не обязательно.
Иконка (favicon) появляется не только в браузерных вкладках.
53©Алекс Мельников www.magkurs.ru
Но, и в поисковой выдачи, что отличает вас от конкурентов, привлекает внимание и
увеличивает число переходов на ваш сайт (CTR).
54©Алекс Мельников www.magkurs.ru
Главное что Opencart предлагает нам не мучится с форматом .ico (формат хранения
значков), и дает возможность изготовить иконку в формате png, и сменить ее также как и
логотип. Но, ее размеры должны быть ровно 16х16 пикселей.
Во-первых, вы можете сами придумать и сделать себе иконку. Если нет, тогда можно
воспользоваться поиском подходящей на сайтах http://www.iconsearch.ru,
http://www.iconfinder.com, http://findicons.com. Но не забывайте про размеры и формат
значка. Загружается также, как и логотип.
Для примера, я сделал себе в виде ноутбука.
Меняем «Слайдшоу» на главной странице.
Сейчас мы с вами попробуем заменить баннер и добавить новый в слайдшоу на главной
странице. Сейчас он выглядит вот так.
Для того, чтобы нам заменить имеющийся баннер на свой нам необходимо изготовить
новый, и желательно минимум два, чтобы получился полноценный слайдшоу. Вы можете
воспользоваться услугами тех же фриленсеров, или же изготовить их самостоятельно с
помощью графических редакторов.
55©Алекс Мельников www.magkurs.ru
Размеры баннеров должны быть идентичными. Размер баннера по умолчанию 980х280
пикселей. Хотя по высоте вы можете их сделать больше или меньше, а вот по длине
только 980, чтобы не испортить общий дизайн.
После того как вы сделали баннера, заходим в панель администратора и переходим в
Система – Дизайн – Баннеры. Сейчас у нас там два баннера по умолчанию.
Мы будем менять баннер Samsung Tab. Жмем напротив Изменить.
Далее, удаляем старый баннер и нажимаем Добавить баннер.
Добавляем сначала первый баннер. Сначала сменим Название баннера. Я назвал просто
Ноутбуки. Потом, заполняем заголовок, прописываем ссылки, если вы хотите, чтобы по
клику клиент переходил на конкретную страницу. Но для начала можно пропустить этот
пункт, и добавить ссылки после окончательного переноса интернет-магазина на хостинг.
Далее, загружаем и выбираем необходимый баннер с помощью кнопки Обзор. Второй
баннер добавляем здесь же, нажатием Добавить баннер, и выполняем тоже действие
(также для третьего и четвертого). Жмем Сохранить.
56©Алекс Мельников www.magkurs.ru
Если посмотреть Система – Дизайн – Баннеры, то появился новый баннер. У меня под
названием Ноутбуки.
Теперь нам нужно их включить. За это отвечает модуль Слайдшоу. Переходим в
Дополнения – Модули. Ищем Слайдшоу и нажимаем изменить.
Здесь необходимо выбрать свой новый баннер (если вы меняли название), можно
отредактировать размеры изображения, схема – Home, расположение – вверх страницы,
статус – включено, порядок сортировки – 1. Сохраняем. Смотрим, что получилось.
57©Алекс Мельников www.magkurs.ru
Вообще с помощью этого модуля («Слайдшоу») можно выводить графику любых
размеров, практически в любом месте, заранее приготовив необходимые баннеры. Это
позволяют сделать такие настройки как Схема, Расположение, Размеры изображения,
Сортировка.
Опишу настройку Схема, которая может вызвать у вас затруднение. Нас интересует
больше всего три настройки. Home – это показ на главной странице, Category – на
странице товарных категорий, Product – на странице самого продукта. Попробуйте
поэкспериментировать.
Если нужен новый слайдшоу, то просто нажмите здесь же Добавить модуль. Но не
забудьте сначала добавить новый баннер в Система – Дизайн – Баннеры.
58©Алекс Мельников www.magkurs.ru
Если не хотите использовать слайдшоу, то просто нажмите удалить и сохраните.
Как работать с модулем «Карусель»?
На главной странице нашего магазина еще отображается карусель брендов. Вот ее
сейчас и будем менять.
Но если вы не желаете использовать этот модуль, то его можно отключить. Для этого
переходим в Дополнения – Модули, ищем Карусель и жмем изменить. Удаляем
существующий модуль, и не забываем сохранить.
Если вы решили использовать этот модуль, то для его изменения вам сначала
необходимо настроить баннеры. Переходим в Система – Дизайн – Баннеры, выбираем
59©Алекс Мельников www.magkurs.ru
Manufacturers жмем изменить. В новом окне, по желанию можно сразу поменять
Название баннера.
Для добавления новых брендов, у вас должны уже быть подготовлены картинки с их
логотипами. Сначала удаляем все существующие и добавляем свои. По желанию можно
вставить и ссылки ведущие на категории этих брендов или другие страницы. Жмем
Сохранить.
Для корректировки положения модуля, количества выводимых брендов, сортировки и
размера изображений нужно перейти в Дополнения – Модули, найти Карусель и нажать
изменить.
В появившейся форме вы можете настроить вывод этого блока где угодно, так же как и
слайдшоу. Я оставил его на главной странице.
И если я теперь перезагружу главную страницу, то появятся новые бренды.
60©Алекс Мельников www.magkurs.ru
Таким образом, с помощью функции баннеров (Система – Дизайн - Баннеры) и таких
модулей как слайдшоу и карусель вы можете без кардинальных изменений в дизайне
придать своему магазину некую индивидуальность и выводить изображения почти в
любом месте сайта. Единственное с чем может быть сложность – это подготовка самих
баннеров.
Редактируем «подвал» интернет-магазина.
Теперь, перейдем к редактированию и заполнению информационного –
вспомогательного блока, который находится внизу сайта. Здесь ничего сложного нет.
61©Алекс Мельников www.magkurs.ru
Блок Информация можно отредактировать перейдя в Каталог – Статьи. Там же вы
можете добавить новые информационные материалы (статьи). Производителей можно
добавить в Каталог – Производители, а Партнерскую программу можно
отредактировать в Система – Настройка – Изменить, вкладка Опции, где в самом
внизу находиться раздел ПАРТНЕРЫ.
Надо признать, что встроенный партнерский модуль в Opencart слабо функционален. Он
конечно «рабочий», но без дополнительных доработок с ним работать тяжело, особенно
самому партнеру.
Меняем футер (footer).
Footer или футер – это так называем «подвал» сайта, который находится в самом внизу.
Наша задача заключается в том, чтобы заменить находящиеся там ссылки и текст на
свои. Сейчас там строчка «Работает на Opencart». Ее мы и будем менять.
С помощь текстовый редактора Notepad++ открываем файл footer.tpl, который
находится в папке Z:homeurokwwwcatalogviewthemedefaulttemplatecommon
Находим тег <div id=”powered”> (используем функцию в Notepad – найти). Это
приблизительно 43 строка, и удаляем код, между тегами <div id=”powered”>КОД</div>,
и вместо него вписываем все, что угодно. Я написал так:
Сохраняем, и смотрим, что получилось.
62©Алекс Мельников www.magkurs.ru
Внимание! Возможно, что после сохранения у вас будут проблемы с кодировкой, т.е.
вместо русских слов, появятся квадратики или непонятные символы. Поэтому перед
сохранением изменений, в Notepad++, с помощью кнопки в меню – Кодировки
преобразуйте изменяемый файл в UTF-8 без BOM, и сохраните снова, квадратики
должны исчезнуть.
63©Алекс Мельников www.magkurs.ru
Как установить новый шаблон интернет-магазина?
Внешний вид своего интернет-магазина можно изменить еще с помощью шаблона.
Существуют как платные, так и бесплатные шаблоны. Стоит сказать, что покупка
шаблона это неплохой вариант, который поможет вам преобразовать свой интернет-
магазин, и сэкономить на разработке веб-дизайна с нуля. Если вы решили полностью
создать уникальный и неповторимый дизайн, то можно обратиться к дизайнерам
фриленсерам.
Хорошие варианты шаблонов можно найти и сряди бесплатных. Например, на
официальных сообществах по Opencart - http://opencartforum.ru/files/ (Категория
шаблоны) и http://www.opencart.com/index.php?route=extension/extension&path=1 (для
поиска бесплатных в фильтре выберете free). Там же можно и купить понравившийся
шаблон.
При выборе шаблона необходимо, чтобы его версия совпадала с версией вашего
Opencart. Посмотреть версию магазина можно в административной части внизу.
Мы с вами работаем с Opencart 1.5.4.1, именно такой версии и нужно искать шаблон.
Итак, начнем установку. Надеюсь вы нашли себе подходящий шаблон. Для примера я
возьму вот этот http://opencartforum.ru/files/file/720-palioxis-shablon-dlia-opencart/. Скачаю
его.
Сами шаблоны (папки с файлами) находятся в Z:homeurokwwwcatalogviewtheme.
Если вы сейчас туда перейдете, то увидите один единственный шаблон по умолчанию –
default, который у нас и установлен.
Внимание! Перед установкой новых приложений, шаблонов, модулей и т.п., не
забывайте делать бекап (backup) – резервное копирование своего интернет-магазина,
чтобы вы могли всегда вернутся к предыдущим установкам. Для этого просто
заархивируйте все файлы своего магазина Z:homeurokwww. Также, необходимо сделать
и бекап БД (базы данных). Для этого переходим в Система – Резервные копии и жмем
Бекап. Сохраняем файл. Там же, вы сможете и восстановить свою базу данных, просто
выбрав сохраненный файл.
Установка шаблона происходит простым копированием файлов в корень магазина с
заменой. Вообще с установкой шаблона у новичков возникает много вопросов, т.к.
64©Алекс Мельников www.magkurs.ru
скаченные архивы с шаблонами зачастую имеют разную структуру файлов, и непонятно,
что и куда копировать.
Название папок или файлов, должны соответствовать структуре папок или файлов самого
интернет магазина.
В скаченном архиве, обычно файлы шаблона находятся в папке upload или files to
upload. Именно там и находятся файлы для копирования в корень вашего интернет-
магазина. Копируем с заменой!
Бывает, что в архиве идет сразу папка с шаблоном. Копируем ее просто в папку theme -
Z:homeurokwwwcatalogviewtheme.
65©Алекс Мельников www.magkurs.ru
Теперь идем в административную часть, Система – Настройки – Изменить, щелкаем по
вкладке Витрина, и выбираем новый Шаблон магазина, сохраняем и смотрим.
Но, на этом еще установка шаблона не заканчивается. Иногда под определенные
шаблоны необходимо правильно настроить изображения, поэтому в рекомендуемых и в
баннерах необходимо подгонять размер изображений, а также в категориях и в карточке
товара.
В большинстве случаях, в скаченных файлах шаблона могут быть дополнительные
файлы, например readme, documentation и т.п. В них и находятся инструкции по
установке и настройке шаблона. Всегда старайтесь с ними ознакомиться.
Смотрим, что получилось.
66©Алекс Мельников www.magkurs.ru
67©Алекс Мельников www.magkurs.ru
Оптимизация интернет-магазин под поисковые запросы.
Из Википедии: Поисковая оптимизация (англ. search engine optimization, SEO) — комплекс мер для
поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам
пользователей с целью продвижения сайта.
Продвижение интернет-магазина в поисковых системах является одной из приоритетных
задач. Ведь поисковый трафик относительно бесплатный и релевантный, и может
приносить посетителей достаточно длительное время. Главное поддерживать
лидирующее позиции в поисковой выдачи.
Мы с вами сейчас находимся на этапе создания и наполнения своего магазина. Именно на
этом этапе мы должны уделить особое внимание содержанию – текстовому наполнению.
При заполнении карточки товара, обратите внимание на тэг TITLE, а также description и
keywords. Запомните их, именно они характеризуют текстовое содержание на вашей
странице, а поисковые системы в свою очередь придают огромное значение этим тегам и
учитывают их в поисковой выдачи. Оптимизируя эти мета теги, вы можете увеличить
посещаемость за счет низкочастотных запросов.
68©Алекс Мельников www.magkurs.ru
Высокочастотные (ВЧ) – это запросы, имеющие самое большое количество запросов в месяц в
определенной теме. Например, «магазин ноутбуков».
Среднечастотные (СЧ) – запросы, которые имеют среднее количество запросов в месяц. Например,
«купить ноутбук Asus».
Низкочастотные (НЧ) – запросы имеющие малое количество запросов в месяц. Например «купить
ноутбук Asus N56VZ», но на наш взгляд они самые релевантные.
Именно тег Title присутствует в поисковой выдачи. Это общее название всей вашей
отдельной страницы с товаром, а не всего магазина. Поэтому он должен быть
релевантным поисковому запросу.
69©Алекс Мельников www.magkurs.ru
Итак, во-первых, название товара должно повторяться во всех этих тегах. Если я
собираюсь продавать ноутбук Asus N56VZ, то оно обязательно должен присутствовать не
только в title, но и в description и в keywords. Можно туда еще вписать основные
характеристики товара. Например, цвет, фасон, материал, регион и т.п. В моем случае это
размер экрана и регион Москва. На самой странице товара название также должно быть в
заголовке первого уровня – H1.
Поэтому, чтобы получать трафик по низкочастотным запросам, необходимо грамотно
оптимизировать каждую страницу с товаром. Делать это руками очень долго и
утомительно. Поэтому этот процесс необходимо автоматизировать.
70©Алекс Мельников www.magkurs.ru
Автоматизируем оптимизацию внутренних страниц.
Суть автоматизации заключается в том, чтобы при каждом добавлении товара его
название автоматически появлялась в определенных местах на странице с товаром. Но
нам нужно сделать так, чтобы не испортить привлекательность самой страницы. Здесь
необходимо исходить в зависимости от выбранного вами дизайна
Посмотрите на страницу с товаром (рисунок выше). Название товара встречается только
один раз – в заголовке (H1), который тоже по большому счету слабо оптимизирован.
Например, вместо слова – Описание, намного эффективнее будет, если мы сделаем –
«Описание товара N». Это можно проделать и со словом Цена, характеристики, отзывы и
т.д.
Таким образом, вы сможем поднять свои внутренние страницы с товарами в поисковые
топы по низкочастотным запросам, а это в свою очередь дополнительные целевые
посетители для нашего интернет-магазина.
Оптимизация H1
Сейчас мы с вами попробуем автоматизировать заголовок H1, чтобы при каждом
добавлении товара в заголовке автоматически дописывались определенные слова. В моем
случае, я добавил слово «купить» и «в Москве». Вы выбираете в зависимости от вашей
тематики. Но, так как у нас интернет-магазин и мы занимаемся продажами, то слово
«купить» я бы оставил в любом случае. Смотрите на рисунок ниже.
71©Алекс Мельников www.magkurs.ru
Для этого открываем файл product.tpl из нашего шаблона, который находится в папке
catalogviewthemedefaulttemplateproduct.
Обратите внимание, что я делаю изменения в дефолтном шаблоне (default). Если вы
установили новый шаблон, то вам необходимо изменять его файлы
(catalogviewthemeВаш_шаблонtemplateproduct product.tpl ).
Ищем там строку:
<h1><?php echo $heading_title; ?></h1>
И дописываем необходимые нам слова:
<h1>Купить <?php echo $heading_title; ?> в Москве</h1>
Или так
<h1> <?php echo $heading_title; ?>, купить в Москве</h1>
Теперь в карточке каждого товара будут появляться автоматически ваши
дополнительные слова.
Внимание! Повторю еще раз. Возможно, что после сохранения у вас будут проблемы с
кодировкой, т.е. вместо русских слов, появятся квадратики или непонятные символы.
Поэтому перед сохранением изменений, в Notepad++, с помощью кнопки в меню –
Кодировки преобразуйте файл в UTF-8 без BOM, и сохраните снова, квадратики
должны исчезнуть.
Усиление присутствия ключевых запросов.
Например, мы хотим, чтобы наши ключевые слова еще раз прописывались на странице с
товаром, но уже в другом месте, допустим в самом внизу. Но здесь необходимо это
повторение как то обыграть. Например, я вывел вот так:
72©Алекс Мельников www.magkurs.ru
Для этого, в этом же файле (product.tpl) ищем следующую строку:
<?php if ($tags) { ?>
А выше вставляем:
<div style="padding: 10px"><strong>Вы можете купить <?php echo $heading_title; ?> оформив заказ
онлайн или по телефону</strong></div>
Теперь у нас в каждой карточке товара будет внизу выводится эта надпись.
Также, можно прописать условия доставки, или что-то еще повторяющееся в карточке
каждого товара. Здесь все зависит от вашей фантазии.
Это можно вставить и выше, в само описание товара.
Находим:
<div id="tab-description" class="tab-content"><?php echo $description; ?>
И сразу после него вставляем
<div style="padding: 10px"><strong>Вы можете купить <?php echo $heading_title; ?> оформив заказ
онлайн или по телефону</strong></div>
Теперь получилось вот так:
.
73©Алекс Мельников www.magkurs.ru
Добавляем «Описание товара N»
Для того, чтобы рядом со словом Описание добавлялось название товара, как показано
на рисунке ниже,
необходимо открыть файл product.tpl (в папке
catalogviewthemedefaulttemplateproduct. ), и найти следующую строку:
<div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?>
И сразу же через пробел вставляем такой код (он отвечает за вывод Title): <?php echo
$heading_title; ?>
Должно получиться вот так:
<div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?> <?php echo
$heading_title; ?>
Это смело можно проделать и с «Характеристиками» и «Отзывами», что и описано ниже.
Добавляем «Характеристики товара N»
Находим в этом же файле следующий код
<a href="#tab-attribute"><?php echo $tab_attribute; ?>
И сразу же после через пробел вставляем
<?php echo $heading_title; ?>
74©Алекс Мельников www.magkurs.ru
Добавляем «Отзывы на товар N»
Запросы со словом «Отзывы» тоже является нашим целевым запросом. Многие, перед
тем как приобрести товар, внимательно знакомятся с отзывами покупателей, и лишь
потом принимают решение. Поэтому, чтобы привлечь некоторый трафик с поисковых
систем, можно оптимизировать и строчку «Отзывы». Т.е у нас будет вкладка не просто
«Отзывы», а «Отзывы на товар N».
Для этого находим в файле product.tpl (в папке
catalogviewthemedefaulttemplateproduct ) следующий код:
<a href="#tab-review"><?php echo $tab_review; ?>
И сразу же после, через два пробел вставляем
на <?php echo $heading_title; ?>
Делаем строчку «Цена товара N»
Например, мы хотим, чтобы в карточке товара выводилась не просто строчка «Цена», а
«Цена товара такого то». Например, так:
Для этого в знакомом нам файле product.tpl ищем строчку:
<?php echo $text_price; ?>
И сразу же через пробел вставляем:
<?php echo $heading_title; ?>:
75©Алекс Мельников www.magkurs.ru
Но это не все! Необходимо также открыть языковой файл
cataloglanguagerussianproductproduct.php, и убрать двоеточие у цены. То есть
поменять «Цена:» на «Цена»
Внимание! Не стоит переусердствовать. Я лишь указал некоторые способы оптимизации
контента (содержимого сайта). Используйте только часть из них, а не все сразу.
В некоторых шаблонах нет тех или иных слов, не выводиться в силу дизайнерского
расположения, например, Цена, тогда вписывайте ее, например в вставляемый текст, или
используйте другие методы оптимизации.
Таким образом, с помощью не сложных изменений, вы можете увеличить присутствие
ключевых слов на странице с товаром, что однозначно скажется на увеличении
переходов с поисковых систем по низкочастотным запросам.
76©Алекс Мельников www.magkurs.ru
Рекомендации по заполнению страницы с товаром.
Не забывайте про «Рекомендуемые товара», обязательно при добавлении товара в админ
панели указывайте их. Это делается при добавлении или редактировании товаров.
Каталог – Товары, вкладка Связи в самом внизу.
Это увеличит число просмотров страниц вашего сайта, и позволит людям быстро
переходить из товара в товар, и более детально ознакомиться с вашим ассортиментом.
При этом, можно еще вывести «Хиты продаж», «Последние поступления» и др. Про
это писалось выше. Попробуйте вывести эти блоки в разных местах, посмотрите как это
будет выглядеть. Все это настраивается в Дополнениях – Модули.
Обратите внимание на подарки, акции и скидки. Это конечно важный, но для начала не
обязательный нюанс. Наверно, нет такого человека, который бы не любил подарки, даже
если они не столь дороги. Это может быть дополнительный аксессуар, или приличная
скидка на покупку следующих товаров в вашем магазине. Здесь нужно исходить из
ассортимента. Но в любом случае, информация о скидках и акциях должна быть
визуально доступна на любой странице интернет-магазина.
Больше внимание уделяйте описанию товара. Не следует просто копировать
характеристики товаров с других сайтов. Во-первых, вы ничем тогда не выделитесь. А
во-вторых, копированный контент зачастую плохо индексируется поисковыми
системами. Понятно, что характеристики, например, ноутбуков, сложно переделать. Но,
77©Алекс Мельников www.magkurs.ru
никто не мешает, вставить своих пару предложений. Клиент хочет узнать как можно
больше информации о товаре, и будет ее искать по всем сайтам. Старайтесь больше
писать о преимуществах товара, как он может решить проблему клиента.
По возможности вставляйте прямо в описание больше картинок, а также не забывайте
про видео обзоры, которые можно предварительно найти на просторах интернета или
изготовить самому, что на самом деле не так и сложно. «Завоюйте» внимание клиента.
По опыту, можно сказать, что наиболее полное описание товаров, не только увеличивает
конверсию (продажи), но и способствует получению естественных ссылок на ваш сайт.
Люди будут сами делиться на форумах, в социальных сетях наиболее полным и
раскрытым описанием. Увеличение естественных ссылок сыграет свою роль в выдачи
поисковых систем. Работа конечно иногда трудоемкая, но достаточно эффективная.
С клиентом необходимо поддерживать оперативную связь, поэтому не забывайте про
контактную информацию. Она должна быть наиболее полной и предоставлять клиенту
несколько способов для связи. Поэтому не забывайте заполнить раздел «О нас» (Каталог
- Статьи) и «Связаться с нами» (Система – Настройки – Изменить, вкладка Общие).
Важной составляющей при оформлении страницы с товаром являются изображения. Они
должны быть наиболее привлекательными и показывать товар с лучшей стороны.
Рекомендую вставлять изображение прямо в описание товара. Так более эффектнее будет
выглядеть. Изображение получается изначально больших размеров, с удобным
просмотром. При этом клиент сразу знакомиться с текстом и просматривает изображение
товара. Также, желательно каждую картинку комментировать, останавливать внимание
клиента на преимуществах. В этом плане товар удачно представляют на китайских
интернет «моллах». Для примера зайдите на популярный китайский интернет молл
http://www.taobao.com, и посетите страницу любого товара. Согласитесь пролистывать
страницу вниз и знакомится с товарным описание там намного удобнее, нежели в наших
магазинах.
Картинки в описание можно вставлять при добавлении товара, где вы описываете его
основные характеристики, с помощью иконки изображение (рис. см. ниже).
78©Алекс Мельников www.magkurs.ru
Далее, вам необходимо загрузить изображение на сервер (Выбор на сервере -
загрузить), выбрать его, настроить размеры и вставить. Посмотреть, как визуально
смотрится, а потом если что откорректировать размеры.
Это были некоторые рекомендации, которые позволяют увеличить конверсию вашего
магазина. Возьмете их на вооружение или нет – дело за вами.
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга
книга

More Related Content

What's hot

Установка и настройка модуля коммуникации с водителями
Установка и настройка модуля коммуникации с водителямиУстановка и настройка модуля коммуникации с водителями
Установка и настройка модуля коммуникации с водителямиRishat Muhametshin
 
PowerShell Web Access Руководство по использованию
PowerShell Web Access Руководство по использованиюPowerShell Web Access Руководство по использованию
PowerShell Web Access Руководство по использованиюAndrey Markin
 
Флеш в серверах: работа со скоростью вспышки
Флеш в серверах: работа со скоростью вспышкиФлеш в серверах: работа со скоростью вспышки
Флеш в серверах: работа со скоростью вспышкиКРОК
 
Инструкция по настройке сервиса виртуальное рабочее место для Windows ттк
Инструкция по настройке сервиса  виртуальное рабочее место для Windows тткИнструкция по настройке сервиса  виртуальное рабочее место для Windows ттк
Инструкция по настройке сервиса виртуальное рабочее место для Windows тткЕлена Кузовкина
 
Veeam Backup in CV PROTEK for VMware vForum Almaty 2011
Veeam Backup in CV PROTEK for VMware vForum Almaty 2011Veeam Backup in CV PROTEK for VMware vForum Almaty 2011
Veeam Backup in CV PROTEK for VMware vForum Almaty 2011Sergey Schadnyh
 
2 устройство компьютера
2 устройство компьютера2 устройство компьютера
2 устройство компьютераzarechneva
 
Sf0.75 readmev6 ruru
Sf0.75 readmev6 ruruSf0.75 readmev6 ruru
Sf0.75 readmev6 ruruvivivor
 
Администрирование и конфигурирование Windows 10
Администрирование и конфигурирование Windows 10Администрирование и конфигурирование Windows 10
Администрирование и конфигурирование Windows 10kurbanovafaina
 
Сетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы Linux
Сетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы LinuxСетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы Linux
Сетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы Linuxkurbanovafaina
 
ляпушкин виктор ис 21
ляпушкин виктор ис 21ляпушкин виктор ис 21
ляпушкин виктор ис 21аыв цуакуца
 
«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...
«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...
«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...it-people
 
Опыт применения виртуализации для web-систем часть 2
Опыт применения виртуализации для web-систем часть 2Опыт применения виртуализации для web-систем часть 2
Опыт применения виртуализации для web-систем часть 2Alex Chistyakov
 
Виртуальный хостинг на Амазоне: телефон, кредитка, немного времени
Виртуальный хостинг на Амазоне: телефон, кредитка, немного времениВиртуальный хостинг на Амазоне: телефон, кредитка, немного времени
Виртуальный хостинг на Амазоне: телефон, кредитка, немного времениAnton Moiseev
 

What's hot (17)

Установка и настройка модуля коммуникации с водителями
Установка и настройка модуля коммуникации с водителямиУстановка и настройка модуля коммуникации с водителями
Установка и настройка модуля коммуникации с водителями
 
PowerShell Web Access Руководство по использованию
PowerShell Web Access Руководство по использованиюPowerShell Web Access Руководство по использованию
PowerShell Web Access Руководство по использованию
 
Installcd Kyivbsd09
Installcd Kyivbsd09Installcd Kyivbsd09
Installcd Kyivbsd09
 
Флеш в серверах: работа со скоростью вспышки
Флеш в серверах: работа со скоростью вспышкиФлеш в серверах: работа со скоростью вспышки
Флеш в серверах: работа со скоростью вспышки
 
лекция 4
лекция 4лекция 4
лекция 4
 
Инструкция по настройке сервиса виртуальное рабочее место для Windows ттк
Инструкция по настройке сервиса  виртуальное рабочее место для Windows тткИнструкция по настройке сервиса  виртуальное рабочее место для Windows ттк
Инструкция по настройке сервиса виртуальное рабочее место для Windows ттк
 
Veeam Backup in CV PROTEK for VMware vForum Almaty 2011
Veeam Backup in CV PROTEK for VMware vForum Almaty 2011Veeam Backup in CV PROTEK for VMware vForum Almaty 2011
Veeam Backup in CV PROTEK for VMware vForum Almaty 2011
 
2 устройство компьютера
2 устройство компьютера2 устройство компьютера
2 устройство компьютера
 
Ustroystvo pc
Ustroystvo pcUstroystvo pc
Ustroystvo pc
 
os
osos
os
 
Sf0.75 readmev6 ruru
Sf0.75 readmev6 ruruSf0.75 readmev6 ruru
Sf0.75 readmev6 ruru
 
Администрирование и конфигурирование Windows 10
Администрирование и конфигурирование Windows 10Администрирование и конфигурирование Windows 10
Администрирование и конфигурирование Windows 10
 
Сетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы Linux
Сетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы LinuxСетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы Linux
Сетевые Операционные Системы. Структура сетевой ОС. Дистрибутивы Linux
 
ляпушкин виктор ис 21
ляпушкин виктор ис 21ляпушкин виктор ис 21
ляпушкин виктор ис 21
 
«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...
«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...
«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Иг...
 
Опыт применения виртуализации для web-систем часть 2
Опыт применения виртуализации для web-систем часть 2Опыт применения виртуализации для web-систем часть 2
Опыт применения виртуализации для web-систем часть 2
 
Виртуальный хостинг на Амазоне: телефон, кредитка, немного времени
Виртуальный хостинг на Амазоне: телефон, кредитка, немного времениВиртуальный хостинг на Амазоне: телефон, кредитка, немного времени
Виртуальный хостинг на Амазоне: телефон, кредитка, немного времени
 

Viewers also liked

роберт шэнфилд, освобождение от денежной игры
роберт шэнфилд, освобождение от денежной игрыроберт шэнфилд, освобождение от денежной игры
роберт шэнфилд, освобождение от денежной игрыyuli2828
 
Азбука - звук А
Азбука - звук ААзбука - звук А
Азбука - звук Аyuli2828
 
проект по литературному чтению «живая азбука
проект по литературному чтению «живая азбукапроект по литературному чтению «живая азбука
проект по литературному чтению «живая азбукаМария Волга
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShareSlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShareSlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShareSlideShare
 

Viewers also liked (10)

роберт шэнфилд, освобождение от денежной игры
роберт шэнфилд, освобождение от денежной игрыроберт шэнфилд, освобождение от денежной игры
роберт шэнфилд, освобождение от денежной игры
 
звук а. буквы а а
звук а. буквы а азвук а. буквы а а
звук а. буквы а а
 
Азбука - звук А
Азбука - звук ААзбука - звук А
Азбука - звук А
 
буква А
буква Абуква А
буква А
 
проект по литературному чтению «живая азбука
проект по литературному чтению «живая азбукапроект по литературному чтению «живая азбука
проект по литературному чтению «живая азбука
 
четене м
четене мчетене м
четене м
 
звук и буква а
звук и буква азвук и буква а
звук и буква а
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
 

Similar to книга

Урок 6. А Вы знаете КАК ?
Урок 6. А Вы знаете КАК ?Урок 6. А Вы знаете КАК ?
Урок 6. А Вы знаете КАК ?ANSevrukova
 
Docker - быстро, просто, наглядно
Docker - быстро, просто, наглядноDocker - быстро, просто, наглядно
Docker - быстро, просто, наглядноFallenKain
 
Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"
Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"
Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"LogeekNightUkraine
 
Web deployment
Web deploymentWeb deployment
Web deploymentGetDev.NET
 
Презентация компании ВМЛАБ
Презентация компании ВМЛАБПрезентация компании ВМЛАБ
Презентация компании ВМЛАБSaaS.ru Portal
 
Docker : что это, зачем, и как им пользоваться
Docker : что это, зачем, и как им пользоватьсяDocker : что это, зачем, и как им пользоваться
Docker : что это, зачем, и как им пользоватьсяСергей Ладыгин
 
Введение в maven
Введение в mavenВведение в maven
Введение в mavenDmitry Zinushin
 
управление сборками и развертыванием веб приложений
управление сборками и развертыванием веб приложенийуправление сборками и развертыванием веб приложений
управление сборками и развертыванием веб приложенийSergii Shmarkatiuk
 
Cтандартизация рабочего окружения и автоматизация развертывания рабочей среды
Cтандартизация рабочего окружения и автоматизация развертывания рабочей средыCтандартизация рабочего окружения и автоматизация развертывания рабочей среды
Cтандартизация рабочего окружения и автоматизация развертывания рабочей средыWordCamp Kyiv
 
Docker - счастье для хомячка или ника?
Docker - счастье для хомячка или ника?Docker - счастье для хомячка или ника?
Docker - счастье для хомячка или ника?Ruslan Sharipov
 
Mandriva Linux
Mandriva LinuxMandriva Linux
Mandriva Linux0882
 
как вставить презентацию на сайт
как вставить презентацию на сайткак вставить презентацию на сайт
как вставить презентацию на сайтСергей Савченко
 
Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...
Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...
Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...LEDC 2016
 
Docker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous IntegrationDocker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous IntegrationCOMAQA.BY
 
Docker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous IntegrationDocker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous IntegrationSQALab
 

Similar to книга (20)

Installation guide
Installation guideInstallation guide
Installation guide
 
Instalarea DSpace
Instalarea DSpaceInstalarea DSpace
Instalarea DSpace
 
Урок 6. А Вы знаете КАК ?
Урок 6. А Вы знаете КАК ?Урок 6. А Вы знаете КАК ?
Урок 6. А Вы знаете КАК ?
 
Docker - быстро, просто, наглядно
Docker - быстро, просто, наглядноDocker - быстро, просто, наглядно
Docker - быстро, просто, наглядно
 
важное о Dreamweaver cs5.5
важное о Dreamweaver cs5.5важное о Dreamweaver cs5.5
важное о Dreamweaver cs5.5
 
Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"
Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"
Andrii Medvedchuk "Kubernetes and Docker Basics for Running Web Apps"
 
Web deployment
Web deploymentWeb deployment
Web deployment
 
Что такое Docker
Что такое DockerЧто такое Docker
Что такое Docker
 
Презентация компании ВМЛАБ
Презентация компании ВМЛАБПрезентация компании ВМЛАБ
Презентация компании ВМЛАБ
 
Docker : что это, зачем, и как им пользоваться
Docker : что это, зачем, и как им пользоватьсяDocker : что это, зачем, и как им пользоваться
Docker : что это, зачем, и как им пользоваться
 
Введение в maven
Введение в mavenВведение в maven
Введение в maven
 
управление сборками и развертыванием веб приложений
управление сборками и развертыванием веб приложенийуправление сборками и развертыванием веб приложений
управление сборками и развертыванием веб приложений
 
Cтандартизация рабочего окружения и автоматизация развертывания рабочей среды
Cтандартизация рабочего окружения и автоматизация развертывания рабочей средыCтандартизация рабочего окружения и автоматизация развертывания рабочей среды
Cтандартизация рабочего окружения и автоматизация развертывания рабочей среды
 
Docker - счастье для хомячка или ника?
Docker - счастье для хомячка или ника?Docker - счастье для хомячка или ника?
Docker - счастье для хомячка или ника?
 
Mandriva Linux
Mandriva LinuxMandriva Linux
Mandriva Linux
 
Videoblog
VideoblogVideoblog
Videoblog
 
как вставить презентацию на сайт
как вставить презентацию на сайткак вставить презентацию на сайт
как вставить презентацию на сайт
 
Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...
Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...
Александр Бондаренко - CommerceBox - Почему мы решили перевести нашу сборку н...
 
Docker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous IntegrationDocker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous Integration
 
Docker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous IntegrationDocker + Selenium Webdriver в рамках Continuous Integration
Docker + Selenium Webdriver в рамках Continuous Integration
 

More from yuli2828

Памятки в помощь лицам, прибывающим из Украины
Памятки в помощь лицам, прибывающим из УкраиныПамятки в помощь лицам, прибывающим из Украины
Памятки в помощь лицам, прибывающим из Украиныyuli2828
 
Презентация на 27.05.2014 елена васильевна
Презентация на 27.05.2014 елена васильевнаПрезентация на 27.05.2014 елена васильевна
Презентация на 27.05.2014 елена васильевнаyuli2828
 
Моё село Подсосное - история села
Моё село Подсосное - история селаМоё село Подсосное - история села
Моё село Подсосное - история селаyuli2828
 
Презентация1
Презентация1Презентация1
Презентация1yuli2828
 
Фгос проект
Фгос проектФгос проект
Фгос проектyuli2828
 
Презентация1
Презентация1Презентация1
Презентация1yuli2828
 
Презентация по пдд
Презентация по пддПрезентация по пдд
Презентация по пддyuli2828
 
Mорское царство 1
Mорское царство 1Mорское царство 1
Mорское царство 1yuli2828
 
Самопрезентация о.андронова
Самопрезентация о.андроноваСамопрезентация о.андронова
Самопрезентация о.андроноваyuli2828
 
Презентация по пдд
Презентация по пддПрезентация по пдд
Презентация по пддyuli2828
 
Профессия повар презентация
Профессия повар презентацияПрофессия повар презентация
Профессия повар презентацияyuli2828
 
Безопасность детей. Родительское собрание.
Безопасность детей. Родительское собрание.Безопасность детей. Родительское собрание.
Безопасность детей. Родительское собрание.yuli2828
 
К нам приехал цирк
К нам приехал циркК нам приехал цирк
К нам приехал циркyuli2828
 
"Хозяин нового года" творческая работа
"Хозяин нового года" творческая работа"Хозяин нового года" творческая работа
"Хозяин нового года" творческая работаyuli2828
 
презентация новогодняя игрушка
презентация новогодняя игрушкапрезентация новогодняя игрушка
презентация новогодняя игрушкаyuli2828
 
наша новогодняя игрушка
наша новогодняя игрушканаша новогодняя игрушка
наша новогодняя игрушкаyuli2828
 
презентация ярик
презентация ярикпрезентация ярик
презентация ярикyuli2828
 
презентация маша
презентация машапрезентация маша
презентация машаyuli2828
 
презентация диана
презентация дианапрезентация диана
презентация дианаyuli2828
 

More from yuli2828 (20)

Памятки в помощь лицам, прибывающим из Украины
Памятки в помощь лицам, прибывающим из УкраиныПамятки в помощь лицам, прибывающим из Украины
Памятки в помощь лицам, прибывающим из Украины
 
Презентация на 27.05.2014 елена васильевна
Презентация на 27.05.2014 елена васильевнаПрезентация на 27.05.2014 елена васильевна
Презентация на 27.05.2014 елена васильевна
 
Моё село Подсосное - история села
Моё село Подсосное - история селаМоё село Подсосное - история села
Моё село Подсосное - история села
 
Презентация1
Презентация1Презентация1
Презентация1
 
Фгос проект
Фгос проектФгос проект
Фгос проект
 
Презентация1
Презентация1Презентация1
Презентация1
 
Презентация по пдд
Презентация по пддПрезентация по пдд
Презентация по пдд
 
Mорское царство 1
Mорское царство 1Mорское царство 1
Mорское царство 1
 
Пдд
ПддПдд
Пдд
 
Самопрезентация о.андронова
Самопрезентация о.андроноваСамопрезентация о.андронова
Самопрезентация о.андронова
 
Презентация по пдд
Презентация по пддПрезентация по пдд
Презентация по пдд
 
Профессия повар презентация
Профессия повар презентацияПрофессия повар презентация
Профессия повар презентация
 
Безопасность детей. Родительское собрание.
Безопасность детей. Родительское собрание.Безопасность детей. Родительское собрание.
Безопасность детей. Родительское собрание.
 
К нам приехал цирк
К нам приехал циркК нам приехал цирк
К нам приехал цирк
 
"Хозяин нового года" творческая работа
"Хозяин нового года" творческая работа"Хозяин нового года" творческая работа
"Хозяин нового года" творческая работа
 
презентация новогодняя игрушка
презентация новогодняя игрушкапрезентация новогодняя игрушка
презентация новогодняя игрушка
 
наша новогодняя игрушка
наша новогодняя игрушканаша новогодняя игрушка
наша новогодняя игрушка
 
презентация ярик
презентация ярикпрезентация ярик
презентация ярик
 
презентация маша
презентация машапрезентация маша
презентация маша
 
презентация диана
презентация дианапрезентация диана
презентация диана
 

книга

  • 1.
  • 2. 2©Алекс Мельников www.magkurs.ru Оглавление Предисловие.........................................................................................................................4 Установка локального сервера (Денвера)...........................................................................5 Установка расширения для Денвера...................................................................................7 Установка магазина (Opencart) на локальный сервер........................................................8 Первичные настройки интернет-магазина. ......................................................................15 Настройка ЧПУ..................................................................................................................20 Добавляем категорию товаров. .........................................................................................22 Добавляем первый товар. ..................................................................................................26 Как настроить опции товара?............................................................................................31 Как работать с атрибутами товара? ..................................................................................36 Добавление акций и скидок...............................................................................................40 Работаем с модулем «Рекомендуемые товары». ..............................................................42 Добавляем «Похожие товары»..........................................................................................45 Меняем облик (дизайн) интернет-магазина. ....................................................................47 Меняем логотип интернет-магазина..............................................................................47 Меняем иконку магазина (favicon) ................................................................................52 Меняем «Слайдшоу» на главной странице. ..................................................................54 Как работать с модулем «Карусель»?............................................................................58 Редактируем «подвал» интернет-магазина....................................................................60 Как установить новый шаблон интернет-магазина?........................................................63 Оптимизация интернет-магазин под поисковые запросы. ..............................................67
  • 3. 3©Алекс Мельников www.magkurs.ru Автоматизируем оптимизацию внутренних страниц. .....................................................70 Оптимизация H1 .............................................................................................................70 Усиление присутствия ключевых запросов. .................................................................71 Рекомендации по заполнению страницы с товаром. .......................................................76 Установка модулей оплаты (Robokassa, Qiwi).................................................................79 Регистрируем хостинг. ......................................................................................................81 Регистрируем домен. .........................................................................................................87 Переносим интернет-магазина на хостинг.......................................................................91 Настройка платежных систем. ........................................................................................104 Встроенные способы оплаты. .........................................................................................110 Настройка модулей «Доставки»......................................................................................111 Как установить VQMOD? ...............................................................................................113 ДОПОЛНЕНИЕ................................................................................................................114 Как начать торговлю без своего товара.......................................................................114 Установка счетчика статистики посещений................................................................116 ЗАКЛЮЧЕНИЕ................................................................................................................120
  • 4. 4©Алекс Мельников www.magkurs.ru Предисловие. Здравствуйте уважаемый читатель! Добро пожаловать на страницы самоучителя «Делаем профессиональный и эффективный интернет-магазин с нуля на OpenCart». Если вы читаете эти строки, значит, у вас есть большое желание и стремление создать своими руками качественный интернет-магазин и начать новый бизнес в интернете. Со своей стороны я постараюсь вам в этом помочь. Мы с вами с самых азов, шаг за шагом, начнем создавать свой первый интернет-магазин. Вначале может показаться, что все не так просто, и это всегда так, когда приступаешь к освоению чего-то нового. Но, в конце изучения материала вы будите собственником своего полноценного интернет-магазина на отдельном хостинге и домене. Вы наверно заметили, что в скаченном архиве еще присутствует дополнительная папка. Там находятся программы, которые нам понадобятся в процессе создания интернет- магазина. Желаю успехов! поддержка http://magkurs.support-desk.ru
  • 5. 5©Алекс Мельников www.magkurs.ru Установка локального сервера (Денвера). Локальный сервер – это специальная программа, которая позволяет разрабатывать динамические сайты на домашнем компьютере, при этом сам интернет нам не нужен. Это касается и интернет-магазинов. Перед тем, как «вывести» свой сайт в мир интернета сначала целесообразно сделать его на домашнем компьютере, а уже готовый сайт переносить на арендованный хостинг. Для этих целей мы будем использовать локальный сервер под название Денвер (denwer), который можно скачать с официального сайта www.denwer.ru. Но я уже скачал его, и в папке с программами дистрибутив Денвера уже есть. Поэтому вам не обязательно его скачивать. Сначала мы установим сам Денвер, а потом расширение для него. Найдите в папке с программами файл с названием Denwer3 Base PHP52, кликните два раза и начнется установка. Появиться следующее окно. Если откроется браузер, закрываем его. По большому счету необходимо просто соглашаться со всеми подсказками при установке, как на рисунке. Нажмите Enter. Дальше необходимо выбрать имя директории. Оставим без изменений и нажмем опять Enter. Появится следующее окно.
  • 6. 6©Алекс Мельников www.magkurs.ru Соглашаемся, вбивая Y, и снова нажимаем Enter. Дальше нам нужно выбрать букву виртуального диска. Рекомендую поставить, как предлагает сам Денвер – Z. Но если у вас уже есть локальный диск с такой буквой (можно проверить зайдя в Мой компьютер), тогда придумайте любую другую. Нажимаем Enter. Дальше выбираем вариант 1, и создаем ярлыки на рабочем столе. Все! Установка локального сервера завершена. На рабочем столе должны появиться три вот таких иконки: Start Denwer (включение Денвера), Restart Denwer (Перезагрузка Денвера), Stop Denwer (остановка Денвера). В дальнейшем если я буду писать, что необходимо перезагрузить Денвер или локальный сервер, то вы нажимаете Restart Denwer.
  • 7. 7©Алекс Мельников www.magkurs.ru Установка расширения для Денвера Чтобы установить Opencart на локальный компьютер, необходимо еще установить расширение для нашего локального сервера. Находим в папке с программами файл Denwer dop, и начинаем установку по аналогии с Денвером. Внимание! Дополнение устанавливаем туда же, где установлен и сам денвер, т.е соглашаемся с тем, что говорит нам программа при установке. Проверим, как все работает. Запускаем Денвер нажатием - Start Denwer. Дальше, в любом браузере наберите localhost. Должна загрузиться вот такая страница, которая означает, что все правильно установлено и локальный сервер работает. Все, теперь наш локальный сервер готов, и можно приступить к установке самого интернет-магазина.
  • 8. 8©Алекс Мельников www.magkurs.ru Установка магазина (Opencart) на локальный сервер. Для установки интернет-магазина на локальный сервер, нам понадобятся файлы самого интернет-магазина. В папке с дополнительными программами уже имеется архив с файлами Ocstore - ocstore_v1.5.4.1. Также, дистрибутив можно скачать с официального сайта http://myopencart.ru. Мы будем устанавливать последнюю версию Ocstore на момент написания книги, с индексом – 1.5.4.1. Если даже на официальном сайте появилась более новая версия Oсstore, то можно скачать ее. Установка ничем принципиально отличаться не будет. Для начала перейдем на созданный локальный диск - Z (Мой компьютер) в папку home. Внутри нее создаем новую папку с названием нашего магазина. Например, я назвал ее urok. Вы можете назвать ее как угодно, но главное латинскими буквами для дальнейшего удобства пользования. При переносе нашего магазина в интернет, мы всегда сможем поменять его название, поэтому как вы его назовете в процессе разработки на локальном сервере не так важно. Теперь, заходим в новую папку (urok), и внутри нее создаем еще одну новую папку, которую именуем как www. Здесь уже без вариантов выбора названия! Именно в папке www и будут находиться все файлы сайта. У меня путь до файлов сайта получился такой Z:homeurokwww.
  • 9. 9©Алекс Мельников www.magkurs.ru Дальше открываем архив с файлами сайта ocstore_v1.5.4.1, переходим в папку uplouad и копируем все находящиеся в ней файлы (выделены желтым) на локальный сервер в папку www - Z:homeurokwww (Внимание! Если вы устанавливаете версию Ocstore 1.5.5.1.1., то вам необходимо переименовать два файла - config-dist.php и admin/config-dist.php в config.php) Теперь нам необходимо создать Базу Данных (БД) для нашего магазина (проверьте, что Денвер у вас работает). Набираем в браузере localhost и переходим ниже по ссылке phpMyAdmin - администрирование СУБД MySQL. Дальше в самом верху жмем на Базы данных. И создаем новую базу данных, латинскими буквами. Название БД можно придумать любое. Я назвал ее, как и локальный сайт – urok. Нажимаем Создать. Все база данных создана. Запомните ее название.
  • 10. 10©Алекс Мельников www.magkurs.ru Теперь обязательно перезагрузите Денвер, чтобы новые параметры начали работать. Приступаем к установке самого магазина. Набираем в строке браузера название нашего магазина. У меня, как вы помните, это urok. Нажимаем Enter. Появится страница с первым шагом установки. Соглашаемся с лицензией и нажимаем Продолжить (У новых версий Ocstore установочный интерфейс может отличаться, но действия мы выполняем те же). Если у вас не открылась установочная страница, проверьте, включен ли Денвер. Если локальный сервер работает, то убедитесь, что файлы сайта присутствуют в папке Z:homeНазвание_вашего_сайтаwww. На втором шаге проверяются все параметры системы. Если все правильно, в строке состояние будут только зеленые галочки. Нажимаем Продолжить.
  • 11. 11©Алекс Мельников www.magkurs.ru Мы перешли к третьему важному шагу – к настройке конфигурации. Смотрите рисунок ниже. Заполняем: Сервер БД: localhost Пользователь: root (только так) Пароль: оставляем пустым Имя БД: urok (вы вписываете то, которое придумали)
  • 12. 12©Алекс Мельников www.magkurs.ru Префикс БД: оставляем пустым После, заполняете логин и пароль администратора, а также email. Здесь я придумал простые данные. Их всегда можно поменять позже через административную часть магазина. После заполнения нажимаем Continue. Все, установка завершена, но система предупреждает нас, что мы должны обязательно удалить установочную папку. Это во избежание случайной и повторной установки.
  • 13. 13©Алекс Мельников www.magkurs.ru Для этого переходим в папку с файлами нашего магазина, напомню, у меня это папка Z:homeurokwww и удаляем папку install. Теперь мы можем посмотреть, и ознакомится с нашим магазином. Набираем в строке браузера его название – urok, и мы увидим главную страницу магазина с демо-товарами.
  • 14. 14©Алекс Мельников www.magkurs.ru Можете «полазить» по своему магазину, перейти в категории, товары, посмотреть, как все выглядит. Теперь, перейдем в административную часть. Чтобы зайти в «админку» необходимо набрать в браузере urok/admin/. Вводим свои данные – логин и пароль. Мы заполняли их на третьем этапе установки. У меня это логин: admin и пароль: 123456. Заходим в административную панель. Выглядит она так: Можете также с ней ознакомиться, посетив различные вкладки в меню. Вы увидите, насколько функционален интернет-магазин на Opencart!
  • 15. 15©Алекс Мельников www.magkurs.ru Первичные настройки интернет-магазина. Начнем мы с общих настроек интернет-магазина. Для этого в админ-панели жмем на вкладку Система, далее Настройки и Изменить (Далее писать буду так: Система- Настройки-Изменить). Откроется страница с настройками с множеством вкладок. С общими настройками в принципе все понятно. Заполняем название, владельца, адрес и т.д. по своему усмотрению. Кстати в качестве примера я буду делать интернет-магазин ноутбуков, что и отражено на рисунке выше. Рекомендую писать подробные контактные данные, т.к. эта информация отражается на странице под названием «Связаться с нами». Но можно этот этап пропустить и заполнить его позже. Далее, переходим на вкладку Витрина. Здесь необходимо обязательно заполнить Заголовок и Мета-тег Description (Описание). Заголовок не должен быть слишком длинным. У меня: Интернет-магазин ноутбуков город Москва. Это название главной страницы нашего магазина. Описание же не делайте больше двух предложений. Правильное заполнение заголовков и мета-тегов мы рассмотрим в специальном разделе. Также, на этой странице можно выбрать схему и шаблон магазина. Но здесь мы пока все оставим без изменений.
  • 16. 16©Алекс Мельников www.magkurs.ru Далее, переходим к вкладке Локализация. В зависимости от того, где вы находитесь и где собираетесь торговать заполняем этот раздел. Здесь сложностей нет. Я заполнил так:
  • 17. 17©Алекс Мельников www.magkurs.ru Переходим к вкладке Опции. Здесь находится очень много настроек. Ознакомьтесь пока с ней. Вы еще к ней вернетесь при разработке магазина. Исходя из своих потребностей, я настроил, как показано на рисунке ниже (если рисунки для вас слабо читаемы, можете воспользоваться полноразмерными, в папке Дополнительные программы под названием nastroyki 1.png и nastroyki 2.png).
  • 19. 19©Алекс Мельников www.magkurs.ru Вкладка Изображения позволяют нам настроить размеры картинок в категориях и карточках товара, а также поменять иконку и логотип. Мы к этому шагу еще вернемся. Во вкладке Почта нас волнуют параметры Оповещение о заказе по E-mail и Оповещение о новом клиенте. Рекомендую их включить нажатием Да. Также, ниже можно внести еще дополнительные email адреса через запятую. И последнее, что нас больше всего интересует - это вкладка Сервер. Настраиваем так, как показано на рисунке ниже. Включаем сам ЧПУ (чекбокс Да), и выбираем тип ЧПУ – SeoPro. Окончание ЧПУ пишем .html (обязательно с точкой впереди), а ключ шифрования меняем на свой, используя только цифры и латинские буквы. Можно просто поменять некоторые значения в уже имеющемся ключе.
  • 20. 20©Алекс Мельников www.magkurs.ru Все, основные настройки изменены. Теперь Сохраняем нажатием кнопки верху справа. Настройка ЧПУ. Таким образом, мы с вами включили ЧПУ (описано выше), что позволяет формировать понятные для человеческого восприятия адреса веб-страниц. Согласитесь, что намного удобнее когда, например страница с товаром имеет вот такой веб-адрес - http://magazin.ru/Lenovo/Lenovo_Z580.html нежели вот такой http://magazin.ru/index.php?route=product/product&path=57&product_id=49. Но для того, чтобы ЧПУ заработало, нам необходимо переименовать файл .htaccess.txt, в .htaccess, который находится в папке с файлами нашего сайта - Z:homeurokwww. Для этого нам понадобится бесплатный текстовый редактор Notepad++. Его можно найти и скачать с интернета, но я уже это сделал за вас, и он находится в папке с дополнительными материалами под названием npp.6.3.3.bin. Установите его, он еще впоследствии вам пригодится. После установки, откройте с помощью Notepad++ файл .htaccess.txt и ничего не изменяя, перейдите в Файл – Сохранить как.
  • 21. 21©Алекс Мельников www.magkurs.ru Далее, выбираем папку, где находятся наши файлы сайта - Z:homeurokwww (Не забываем ее выбрать). Имя файла оставляем без изменений, в вот Тип файла меняем на All types и Сохраняем. У вас появится новый файл .htaccess, который отвечает за дополнительную конфигурацию веб-сервера и работу вашего сайта.
  • 22. 22©Алекс Мельников www.magkurs.ru Добавляем категорию товаров. Сейчас мы попробуем добавить первую категорию и товар. Но сначала нам необходимо удалить существующие категории. Переходим в административную часть магазина в Каталог – Категории, выделяем все старые категории с помощью чекбокса и жмем Удалить. Здесь же нажимаем Добавить, и у вас появится вот такая форма по добавлению новой категории.
  • 23. 23©Алекс Мельников www.magkurs.ru Как видно добавление категории состоит из стрех вкладок: Общие, Данные и Дизайн. Последнюю мы пока не трогаем. Как видно из рисунка, вкладку Общие я уже заполнил. Итак, первую категорию я посветил ноутбукам фирмы Asus, поэтому и соответствующие название. HTML-тег H1 – это заголовок первого уровня, который будет отображаться на странице категории. HTML-тег Title – это название всей страницы. Оно не отображается на самой странице, но полностью характеризует ее. Этот тег очень важен для поисковых систем. Мета-тег Keywords – ключевые слова, заполняются через запятую. Мета-тег Description – описание страницы, в данном случае категории. Не больше двух предложений. Описание – описание категории. Здесь думаю и так все понятно. В отличие от описания конкретного товара, описание категории иногда не заполняют.
  • 24. 24©Алекс Мельников www.magkurs.ru Во вкладке English заполните только одну строчку – Название категории. Или можно вообще убрать эту вкладку. Для этого зайдите в Система – Локализация – Языки. Выберете английский язык (English) и удалите его. Теперь при добавлении категории или товара вкладки English не будет. Заполните все эти поля. Далее переходим во вкладку Данные.
  • 25. 25©Алекс Мельников www.magkurs.ru Заполните как на рисунке. Здесь ничего сложного нет, главное обратите внимание, что SEO URL должен быть уникальным для любой категории или товара. Это необходимо для формирования ЧПУ, про которое шла речь выше. Лучше писать латинскими буквами транслитом или правильно на английском. У меня есть несколько вариантов. Например: noutbuk, notebook, notebook_asus или просто Asus, который я и выбрал. То есть, адрес моей категории будет вида http://magazin.ru/asus/, если выбрал бы notebook, то было бы вот так - http://magazin.ru/notebook/. Также, можно добавить изображение в категорию. Хотя это не обязательное условие, и все решается индивидуально. Но я для примера добавил. Нажимаете Обзор и появится менеджер изображений. Здесь можно создать новую папку, что я и сделал с помощью кнопки Нов.папка. Открываем ее, и жмем Загрузить. Выбираем на компьютере нужное изображение и загружаем. После загрузки вставляем изображение с помощью двух щелчков мыши. После заполнения всех данных необходимо Сохранить, и наша первая категория создана. Теперь осталось добавить первую единицу товара.
  • 26. 26©Алекс Мельников www.magkurs.ru Добавляем первый товар. Сейчас, также как с категориями, нам необходимо удалить все имеющиеся товары. Для этого переходим в Каталог – Товары, выделяем их все с помощью чекбокса и удаляем. Здесь все по аналогии с категориями. Теперь нажимаем Добавить. Откроется форма для добавления товара. Здесь намного больше вкладок и опций. Сначала вам покажется, что добавление товара – это сложное и долгое дело. Но когда вы «набьете руку» и освоитесь, вы будите это делать намного быстрее и качественнее, а также оцените функциональные возможности Opencart. Для примера я добавлю ноутбук Asus N56VZ. По сути, первая вкладка Общие, заполняется также как и в категориях, но здесь описывается конкретный товар. Я не стал сильно расписывать Описание (в данном случае характеристики ноутбука и т.д.). Нам главное понять логику добавления товара, а уже позже вы сделаете все в соответствии со своей товарной группой. Также, не забываем про вкладку English, где просто заполняется Название товара.
  • 27. 27©Алекс Мельников www.magkurs.ru Далее переходим к заполнению вкладки Данные. Смотрите рисунок ниже. Напомню, не забывайте заполнять SEO URL. Еще в этом примере я выключил Необходимую доставку, так как предполагается, что доставка будет осуществляться бесплатно. Здесь решать только вам. Настройке доставки будет посвящен отдельный раздел. Изображение товара добавляется также как в категориях.
  • 28. 28©Алекс Мельников www.magkurs.ru Теперь, переходим к вкладке Связи. Здесь выбираем, к какой категории принадлежит товар. Рекомендуемые мы пока не трогаем, т.к. это у нас только первый и единственный товар, и рекомендовать нам пока нечего (см. рис. ниже).
  • 29. 29©Алекс Мельников www.magkurs.ru Теперь, пропуская остальные вкладки, переходим к Изображениям. Здесь добавляются дополнительные изображения товара. Просто нажимаете Добавить изображение, потом по аналогии Обзор. А с менеджером изображений вы уже знакомы. Таким образом, можно добавить несколько дополнительных изображений, и выбрать порядок сортировки – 1,2,3…. Я добавил три изображения.
  • 30. 30©Алекс Мельников www.magkurs.ru Первоначальное добавление товара закончено. Жмем Сохранить, переходим в магазин, и смотрим, что у нас получилось. У меня вышло так: .
  • 31. 31©Алекс Мельников www.magkurs.ru Как настроить опции товара? Бывает так, когда необходимо выводить в карточке товарной позиции несколько свойств товара или часто повторяющиеся характеристики. Например, это может быть размер обуви, цвет, форма товара, фасон, дополнительные акссесуары и т.д. У вас тоже могут быть свои значения в зависимости от группы продаваемых товаров, или вообще их не быть. Вот для этого и существует такая функция как Опция. Я на примере добавлю на выбор два цвета для ноутбука Asus N56VZ – черный и серебристый. Для начала удалим все старые опции. Переходим в Каталог – Опции, все выделяем и удаляем. После удаления нажимаем Добавить. У меня эта опция будет назваться Цвет (рисунок ниже). В названии опции пишем Цвет (color для eng, кстати здесь везде по сайту в этом поле можно просто копировать русское название), Тип выбираем список, Порядок сортировки – 1. Дальше нажимаем Добавить значение опции. Добавляем первое значение опции – это Черный цвет. Потом опять жмем Добавить значение опции. Добавляем второе значение – Серебристый. Если у вас много значений опций добавляйте их все, т.е для каждого размера – отдельное значение опции. Жмем Сохранить.
  • 32. 32©Алекс Мельников www.magkurs.ru Иногда самих опций может быть много. Например, для обуви – это и цвет, и размер, и возможно материал. Тогда вы в Каталоге – Опции добавляете все эти опции по отдельности с разными значениями. Все это в дальнейшем сокращает время на добавление товара. Переходим к своему первому товару. Каталог – Товары, напротив товара нажимаем Изменить. Переходим в вкладу Опции. Дальше просто набираем первую букву опции и выбираем ее Далее, нажимаем на Добавить значение опции. Выбираю – серебристый. У меня, как вы помните два значения – черный и серебристый, поэтому я нажимаю второй раз Добавить значение опции, и выбираю уже черный. Прописываем количество и сохраняем.
  • 33. 33©Алекс Мельников www.magkurs.ru Переходим на страницу с товаром, и смотрим, что получилось. Запомните! Что после новых настроек в админчасти, чтобы увидеть изменения на сайте перезагрузите страницу в браузере. Опции можно выводить несколькими способами: список, переключатель, флажок. Если вы хотите, чтобы доступные варианты выводились вот так
  • 34. 34©Алекс Мельников www.magkurs.ru Тогда в самих настройках опции (Каталог-Опции) измените тип на переключатель. Также, можно расшить функцию Опции. Допустим, у меня серебристый ноутбук стоит на 500 рублей дороже, и мне это надо отразить в дополнительных свойствах. И не просто отразить, а чтобы при выборе этого свойства к основной цене автоматом плюсовались 500 рублей.
  • 35. 35©Алекс Мельников www.magkurs.ru Опять переходим к настройкам товара (Каталог – Товары - Изменить) и в Опциях товара к серебристому свойству просто выбираем + и пишем 500 как показано на картинке. Сохраняем. А вот, как это выглядит. Теперь при выборе серебристого цвета к основной сумме прибавятся 500 рублей. Таким образом, возможности у опций очень широкие. Они достаточно грамотно и удобно позволяют представить вашим клиентам разные варианты вашего товара. Теперь, переходим к работе с атрибутами.
  • 36. 36©Алекс Мельников www.magkurs.ru Как работать с атрибутами товара? Атрибуты используются в основном для дополнительных характеристик товара, и значительно облегчают впоследствии добавление товара. Выглядят они вот так. Атрибуты вполне актуально, например, использовать для различной техники, в том числе и ноутбуков. Надо сказать, что по сравнению с опциями, атрибуты используются слабо. Обычно просто копируются характеристики тех же ноутбуков и вставляются таблицей в описание, иногда и без таблицы. Но для примера я покажу, как добавляются атрибуты. Атрибуты состоят из группы атрибутов и самих атрибутов. Например, Процессор – это группа атрибутов, которая состоит из множество других атрибутов – Intel, AMD, Celeron и т.д. Также и Операционная система, которая включает такие атрибуты как Windows 7, Windows 8, Linux и т.д. Еще, большой группой могут быть Экран, Видео память, НDD. Но мы для примера ограничимся двумя группами.
  • 37. 37©Алекс Мельников www.magkurs.ru Для начала нам необходимо удалить старые группы атрибутов и сами атрибуты. Переходим Каталог – Атрибуты – Атрибуты, выделяем их все и удаляем. Также необходимо удалить все группы. Для этого переходим в Каталог – Атрибуты – Группы Атрибутов. Далее, создадим первую группу атрибутов – Процессор. Нажимаем Добавить. Появляется вот такая форма. Заполняем ее и сохраняем. Точно также создаем и вторую группу – Операционная система. В результате у нас две группы атрибутов. Теперь переходим в Каталог – Атрибуты – Атрибуты. Жмем Добавить. Появляется форма, заполняем ее. Первый атрибут у нас будет Intel, и не забываем для него выбрать подходящую группу атрибутов и сортировку (рисунок ниже). Заполнили и Сохранили.
  • 38. 38©Алекс Мельников www.magkurs.ru Далее по аналогии добавляем остальные атрибуты – AMD, Linux, Windows 7, Windows 8. Этого достаточно для нашего примера. После, должен появится список атрибутов. У меня такой. Атрибуты мы создали, теперь их нужно добавить в сам товар. Переходим в Каталог – Товары, выбираем нужный товар и жмем Изменить. Переходим к вкладке Атрибут, и нажимаем Добавить атрибут. Пишем название атрибута (не группы!) в первой колонке – Intel и текст 2300МГц. Здесь же жмем снова Добавить атрибут и добавляем второй атрибут – Windows 7 и текст. Сохранить. Смотрите рисунок ниже.
  • 39. 39©Алекс Мельников www.magkurs.ru Смотрим, что получилось. Переходим к карточке товара. У нас появилась новая вкладка Характеристики с описанием технических данных ноутбука.
  • 40. 40©Алекс Мельников www.magkurs.ru Атрибутами могут выступать любые характеристики. Все зависит от ваших товаров и фантазии. А использовать их или нет – это решать вам. Добавление акций и скидок. Например, вы решили, что с определенного времени вы будете продавать товар немного дешевле. При этом вы хотите, чтобы старая цена тоже была видна, но была бы зачеркнута, а рядом новая, более привлекательная. Для этого переходим к редактированию товара – Каталог – Товары – Изменить. Выбираем вкладку Акции и нажимаем Добавить акцию. Заполняем: Ставим приоритет, затем новую цену, выбираем дату начала и окончания акции. Жмем Сохранить. Теперь смотрим, что у нас получилась.
  • 41. 41©Алекс Мельников www.magkurs.ru С помощью настройки даты акции, вы сможете заранее ее запланировать, и она автоматически включится и отключится. Что касается вкладки Скидки, то там все настраивается также, только не будет отображаться старая цена. Итак, мы с вами добавили первую категорию и товар, научились добавлять опции, характеристики, акции. Для дальнейшего изучения курса вам необходимо самостоятельно добавить еще несколько категорий и с десяток товаров. Для начала и изучения системы этого будет достаточно.
  • 42. 42©Алекс Мельников www.magkurs.ru Работаем с модулем «Рекомендуемые товары». Итак, мы добавили несколько категорий и товаров. Теперь можно работать и с модулями. Вы наверно заметили, что на главной странице вашего магазина есть блок Рекомендуем, но там нет не одного товара. За вывод товаров в этом блоке отвечает модуль – Рекомендуемые. Из названия модуля и так понятно за что он отвечает. Сейчас мы его будем настраивать. Переходим Дополнения – Модули, ищем там модуль Рекомендуемые и нажимаем Изменить. В окошко Товары вбиваем начальную букву названия товара и выбираем его. Нам необходимо по условию выбрать, таким образом, минимум шесть товаров. После списка товара идет настройка самого модуля. Limit: 6 (будет выводиться 6 товаров), Схема: Home (на главной), Расположение: Вверх страницы, Статус: Включено, Порядок сортировки: 2. Далее жмем Сохранить. Перезагружаем главную страницу магазина и смотрим, что получилось.
  • 43. 43©Алекс Мельников www.magkurs.ru Таким образом, вы можете полностью настроить вывод рекомендуемых вами товаров на главной странице магазина. Например, вы можете увеличить количество выводимых товаров, а размер изображений сделать меньше или больше. Здесь необходимо отталкиваться от общего дизайна, вида магазина. Нам сейчас главное понять, как с этим модулем работать. Позже вы все сами скорректируете. Но самое интересное, что список рекомендуемых товаров можно выводить на любой странице в любом месте. Попробуем вывести этот блок на странице, с каким либо товаром. Переходим опять к настройке модуля Рекомендуемые. (Дополнения – Модули - Изменить). Сначала нажимаем Добавить модуль. Появляется новый модуль для настройки.
  • 44. 44©Алекс Мельников www.magkurs.ru В этот раз лимит я поставлю 4, размер изображения: 80x80, а вот схему вывода поставлю – product, и расположение – левая колонка. Не забываем поставить статус – включено и порядок сортировки – 2. Нажимаем сохранить. Переходим на страницу любого товара и смотрим, что получилось. Вы всегда сможете откорректировать вывод товаров с помощью, например, размера изображения, сделав его больше или меньше. Если вы хотите, что бы рекомендуемые появлялись и в категории, то тогда выбирайте схему – category. Можете потренироваться и по выводить «рекомендуемые» в разных местах, меняя в настройках лимит, расположение и сортировку. Также, в списке моделей, есть Хиты продаж и Последние. Найдите их в списке (Дополнения - Модули) и установите. Они настраиваются также как и рекомендуемые.
  • 45. 45©Алекс Мельников www.magkurs.ru Попробуйте их тоже повыводить в разных местах сайта. Последние – это последние добавленные товары в интернет-магазин. Хиты продаж – это последние продажи ваших товаров. Этот модуль вам ничего не покажет, если не было совершено заказов. Поэтому, вы можете сами сделать «липовые» заказы, чтобы появился список хитов. Или подождать первых реальных продаж, а уже потом активировать этот модуль. Модули Рекомендуемые, Последние, Хиты продаж позволяют вывести дополнительные списки товаров в любом месте магазина, что способствует увеличению просмотра клиентами вашего ассортимента. Добавляем «Похожие товары». Еще мы можем несколько товаров вывести и в самой карточке товара, рядом с отзывами.
  • 46. 46©Алекс Мельников www.magkurs.ru Для этого переходим к списку товаров (Каталог-Товары), выбираем любой товар и жмем Изменить. Нас интересуют вкладка Связи. Там в самом в низу есть блок Рекомендуемые. Выберете любые товара (вводите первую букву из названия товара и выбираете). Не забывайте, что здесь рекомендуете похожие товары. Дальше, Сохранить. Переходим на страницу этого товара и смотрим, что получилось. Пример выше я показывал.
  • 47. 47©Алекс Мельников www.magkurs.ru Меняем облик (дизайн) интернет-магазина. Теперь приступим к смене внешнего облика нашего магазина. Мы начнем с изменения стандартного дефолтного шаблона. Сам шаблон находится в папке theme по адресу Z:homeurokwwwcatalogviewtheme под названием default. Но мы пока не будем трогать файлы самого шаблона, а попробуем видоизменить его с помощью инструментов административной части. На самом деле стандартный дизайн интернет-магазина универсален, и подойдет почти под любую тематику. Посмотрите магазин сделанный одним из учеников - http://aumu.ru. При чем это был его один из первых заказов, где заказчик остался вполне доволен. Именно здесь как раз и был видоизменен стандартный шаблон с помощью смены логотипа, баннера на главной странице и дополнительных промо материалов. Этим мы как раз и займемся. Меняем логотип интернет-магазина. Откройте главную страницу вашего интернет-магазина. Изменения начнем сверху вниз, и первое что нам нужно сделать – это сменить логотип. Сейчас он выглядит так. Для начала нам необходимо изготовить новый логотип. Если вы владеете фотошопом или другими графическими редакторами, то вам наверно не составит труда сделать себе новый логотип. Также, изготовление логотипа можно заказать у фриленсеров, например на http://freelance.ru или на https://www.free-lance.ru/. (Не фирменный стиль, а логотип!) Если таких возможностей нет, то можно воспользоваться бесплатными онлайн сервисами по изготовлению логотипов и баннеров. Просто наберите в поисковых системах подобный запрос и вам предложат множество специальных сервисов. Что касается онлайн сервисов, то мне больше симпатичен http://www.logomaker.com, там множество интересных иконок и красивые шрифты. Вы можете использовать любой другой, но я для примера покажу как пользоваться именно этим. Заходим на logomaker.com и жмем TRY IT NOW.
  • 48. 48©Алекс Мельников www.magkurs.ru Далее, переходим по GREATE NEW ACCOUNT и заполняем вот такую форму. Жмем SAVE.
  • 49. 49©Алекс Мельников www.magkurs.ru Далее, на первом шаге вы можете выбрать графику для своего магазина по своей тематике. На втором этапе можно добавить текст (я не стал добавлять графический элемент, а ограничился названием магазина). После, нажимаем SAVE LOGO.
  • 50. 50©Алекс Мельников www.magkurs.ru Далее, выбираем свой логотип, и жмем FREE WEB LOGO. В новом окне копируем адрес своего логотипа, как показано на рисунке ниже, и вставляем его в адресную строку браузера. Появится наш логотип. Жмем правой кнопкой мыши и выбираем сохранить картинку как. В поле имя файла, для удобства, пишем logo.
  • 51. 51©Алекс Мельников www.magkurs.ru Внимание! Не забывайте про размеры логотипа, а то он может не вписаться. Например, стандартный логотип имеет размер 268х50 пикселей, что вполне оправдано для этого шаблона. Изменить размеры, а также формат (png, jpeg) любого изображения вы можете с помощью того же «фотошопа» или с использованием Диспетчера рисунков Microsoft Office. Теперь необходимо заменить старый логотип новым. Для этого идем в административную часть магазина, переходим в Система – Настройки – Изменить, вкладка Изображения. Жмем Обзор, и загружаем новый логотип (старый можно удалить). Выбираем его и сохраняем. Смотрим что получилось.
  • 52. 52©Алекс Мельников www.magkurs.ru Меняем иконку магазина (favicon) Если вы заметили, то там, где вы меняли логотип можно еще сменить и иконку (favicon). Я покажу, как это можно сделать, но это на первых порах совсем не обязательно. Иконка (favicon) появляется не только в браузерных вкладках.
  • 53. 53©Алекс Мельников www.magkurs.ru Но, и в поисковой выдачи, что отличает вас от конкурентов, привлекает внимание и увеличивает число переходов на ваш сайт (CTR).
  • 54. 54©Алекс Мельников www.magkurs.ru Главное что Opencart предлагает нам не мучится с форматом .ico (формат хранения значков), и дает возможность изготовить иконку в формате png, и сменить ее также как и логотип. Но, ее размеры должны быть ровно 16х16 пикселей. Во-первых, вы можете сами придумать и сделать себе иконку. Если нет, тогда можно воспользоваться поиском подходящей на сайтах http://www.iconsearch.ru, http://www.iconfinder.com, http://findicons.com. Но не забывайте про размеры и формат значка. Загружается также, как и логотип. Для примера, я сделал себе в виде ноутбука. Меняем «Слайдшоу» на главной странице. Сейчас мы с вами попробуем заменить баннер и добавить новый в слайдшоу на главной странице. Сейчас он выглядит вот так. Для того, чтобы нам заменить имеющийся баннер на свой нам необходимо изготовить новый, и желательно минимум два, чтобы получился полноценный слайдшоу. Вы можете воспользоваться услугами тех же фриленсеров, или же изготовить их самостоятельно с помощью графических редакторов.
  • 55. 55©Алекс Мельников www.magkurs.ru Размеры баннеров должны быть идентичными. Размер баннера по умолчанию 980х280 пикселей. Хотя по высоте вы можете их сделать больше или меньше, а вот по длине только 980, чтобы не испортить общий дизайн. После того как вы сделали баннера, заходим в панель администратора и переходим в Система – Дизайн – Баннеры. Сейчас у нас там два баннера по умолчанию. Мы будем менять баннер Samsung Tab. Жмем напротив Изменить. Далее, удаляем старый баннер и нажимаем Добавить баннер. Добавляем сначала первый баннер. Сначала сменим Название баннера. Я назвал просто Ноутбуки. Потом, заполняем заголовок, прописываем ссылки, если вы хотите, чтобы по клику клиент переходил на конкретную страницу. Но для начала можно пропустить этот пункт, и добавить ссылки после окончательного переноса интернет-магазина на хостинг. Далее, загружаем и выбираем необходимый баннер с помощью кнопки Обзор. Второй баннер добавляем здесь же, нажатием Добавить баннер, и выполняем тоже действие (также для третьего и четвертого). Жмем Сохранить.
  • 56. 56©Алекс Мельников www.magkurs.ru Если посмотреть Система – Дизайн – Баннеры, то появился новый баннер. У меня под названием Ноутбуки. Теперь нам нужно их включить. За это отвечает модуль Слайдшоу. Переходим в Дополнения – Модули. Ищем Слайдшоу и нажимаем изменить. Здесь необходимо выбрать свой новый баннер (если вы меняли название), можно отредактировать размеры изображения, схема – Home, расположение – вверх страницы, статус – включено, порядок сортировки – 1. Сохраняем. Смотрим, что получилось.
  • 57. 57©Алекс Мельников www.magkurs.ru Вообще с помощью этого модуля («Слайдшоу») можно выводить графику любых размеров, практически в любом месте, заранее приготовив необходимые баннеры. Это позволяют сделать такие настройки как Схема, Расположение, Размеры изображения, Сортировка. Опишу настройку Схема, которая может вызвать у вас затруднение. Нас интересует больше всего три настройки. Home – это показ на главной странице, Category – на странице товарных категорий, Product – на странице самого продукта. Попробуйте поэкспериментировать. Если нужен новый слайдшоу, то просто нажмите здесь же Добавить модуль. Но не забудьте сначала добавить новый баннер в Система – Дизайн – Баннеры.
  • 58. 58©Алекс Мельников www.magkurs.ru Если не хотите использовать слайдшоу, то просто нажмите удалить и сохраните. Как работать с модулем «Карусель»? На главной странице нашего магазина еще отображается карусель брендов. Вот ее сейчас и будем менять. Но если вы не желаете использовать этот модуль, то его можно отключить. Для этого переходим в Дополнения – Модули, ищем Карусель и жмем изменить. Удаляем существующий модуль, и не забываем сохранить. Если вы решили использовать этот модуль, то для его изменения вам сначала необходимо настроить баннеры. Переходим в Система – Дизайн – Баннеры, выбираем
  • 59. 59©Алекс Мельников www.magkurs.ru Manufacturers жмем изменить. В новом окне, по желанию можно сразу поменять Название баннера. Для добавления новых брендов, у вас должны уже быть подготовлены картинки с их логотипами. Сначала удаляем все существующие и добавляем свои. По желанию можно вставить и ссылки ведущие на категории этих брендов или другие страницы. Жмем Сохранить. Для корректировки положения модуля, количества выводимых брендов, сортировки и размера изображений нужно перейти в Дополнения – Модули, найти Карусель и нажать изменить. В появившейся форме вы можете настроить вывод этого блока где угодно, так же как и слайдшоу. Я оставил его на главной странице. И если я теперь перезагружу главную страницу, то появятся новые бренды.
  • 60. 60©Алекс Мельников www.magkurs.ru Таким образом, с помощью функции баннеров (Система – Дизайн - Баннеры) и таких модулей как слайдшоу и карусель вы можете без кардинальных изменений в дизайне придать своему магазину некую индивидуальность и выводить изображения почти в любом месте сайта. Единственное с чем может быть сложность – это подготовка самих баннеров. Редактируем «подвал» интернет-магазина. Теперь, перейдем к редактированию и заполнению информационного – вспомогательного блока, который находится внизу сайта. Здесь ничего сложного нет.
  • 61. 61©Алекс Мельников www.magkurs.ru Блок Информация можно отредактировать перейдя в Каталог – Статьи. Там же вы можете добавить новые информационные материалы (статьи). Производителей можно добавить в Каталог – Производители, а Партнерскую программу можно отредактировать в Система – Настройка – Изменить, вкладка Опции, где в самом внизу находиться раздел ПАРТНЕРЫ. Надо признать, что встроенный партнерский модуль в Opencart слабо функционален. Он конечно «рабочий», но без дополнительных доработок с ним работать тяжело, особенно самому партнеру. Меняем футер (footer). Footer или футер – это так называем «подвал» сайта, который находится в самом внизу. Наша задача заключается в том, чтобы заменить находящиеся там ссылки и текст на свои. Сейчас там строчка «Работает на Opencart». Ее мы и будем менять. С помощь текстовый редактора Notepad++ открываем файл footer.tpl, который находится в папке Z:homeurokwwwcatalogviewthemedefaulttemplatecommon Находим тег <div id=”powered”> (используем функцию в Notepad – найти). Это приблизительно 43 строка, и удаляем код, между тегами <div id=”powered”>КОД</div>, и вместо него вписываем все, что угодно. Я написал так: Сохраняем, и смотрим, что получилось.
  • 62. 62©Алекс Мельников www.magkurs.ru Внимание! Возможно, что после сохранения у вас будут проблемы с кодировкой, т.е. вместо русских слов, появятся квадратики или непонятные символы. Поэтому перед сохранением изменений, в Notepad++, с помощью кнопки в меню – Кодировки преобразуйте изменяемый файл в UTF-8 без BOM, и сохраните снова, квадратики должны исчезнуть.
  • 63. 63©Алекс Мельников www.magkurs.ru Как установить новый шаблон интернет-магазина? Внешний вид своего интернет-магазина можно изменить еще с помощью шаблона. Существуют как платные, так и бесплатные шаблоны. Стоит сказать, что покупка шаблона это неплохой вариант, который поможет вам преобразовать свой интернет- магазин, и сэкономить на разработке веб-дизайна с нуля. Если вы решили полностью создать уникальный и неповторимый дизайн, то можно обратиться к дизайнерам фриленсерам. Хорошие варианты шаблонов можно найти и сряди бесплатных. Например, на официальных сообществах по Opencart - http://opencartforum.ru/files/ (Категория шаблоны) и http://www.opencart.com/index.php?route=extension/extension&path=1 (для поиска бесплатных в фильтре выберете free). Там же можно и купить понравившийся шаблон. При выборе шаблона необходимо, чтобы его версия совпадала с версией вашего Opencart. Посмотреть версию магазина можно в административной части внизу. Мы с вами работаем с Opencart 1.5.4.1, именно такой версии и нужно искать шаблон. Итак, начнем установку. Надеюсь вы нашли себе подходящий шаблон. Для примера я возьму вот этот http://opencartforum.ru/files/file/720-palioxis-shablon-dlia-opencart/. Скачаю его. Сами шаблоны (папки с файлами) находятся в Z:homeurokwwwcatalogviewtheme. Если вы сейчас туда перейдете, то увидите один единственный шаблон по умолчанию – default, который у нас и установлен. Внимание! Перед установкой новых приложений, шаблонов, модулей и т.п., не забывайте делать бекап (backup) – резервное копирование своего интернет-магазина, чтобы вы могли всегда вернутся к предыдущим установкам. Для этого просто заархивируйте все файлы своего магазина Z:homeurokwww. Также, необходимо сделать и бекап БД (базы данных). Для этого переходим в Система – Резервные копии и жмем Бекап. Сохраняем файл. Там же, вы сможете и восстановить свою базу данных, просто выбрав сохраненный файл. Установка шаблона происходит простым копированием файлов в корень магазина с заменой. Вообще с установкой шаблона у новичков возникает много вопросов, т.к.
  • 64. 64©Алекс Мельников www.magkurs.ru скаченные архивы с шаблонами зачастую имеют разную структуру файлов, и непонятно, что и куда копировать. Название папок или файлов, должны соответствовать структуре папок или файлов самого интернет магазина. В скаченном архиве, обычно файлы шаблона находятся в папке upload или files to upload. Именно там и находятся файлы для копирования в корень вашего интернет- магазина. Копируем с заменой! Бывает, что в архиве идет сразу папка с шаблоном. Копируем ее просто в папку theme - Z:homeurokwwwcatalogviewtheme.
  • 65. 65©Алекс Мельников www.magkurs.ru Теперь идем в административную часть, Система – Настройки – Изменить, щелкаем по вкладке Витрина, и выбираем новый Шаблон магазина, сохраняем и смотрим. Но, на этом еще установка шаблона не заканчивается. Иногда под определенные шаблоны необходимо правильно настроить изображения, поэтому в рекомендуемых и в баннерах необходимо подгонять размер изображений, а также в категориях и в карточке товара. В большинстве случаях, в скаченных файлах шаблона могут быть дополнительные файлы, например readme, documentation и т.п. В них и находятся инструкции по установке и настройке шаблона. Всегда старайтесь с ними ознакомиться. Смотрим, что получилось.
  • 67. 67©Алекс Мельников www.magkurs.ru Оптимизация интернет-магазин под поисковые запросы. Из Википедии: Поисковая оптимизация (англ. search engine optimization, SEO) — комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей с целью продвижения сайта. Продвижение интернет-магазина в поисковых системах является одной из приоритетных задач. Ведь поисковый трафик относительно бесплатный и релевантный, и может приносить посетителей достаточно длительное время. Главное поддерживать лидирующее позиции в поисковой выдачи. Мы с вами сейчас находимся на этапе создания и наполнения своего магазина. Именно на этом этапе мы должны уделить особое внимание содержанию – текстовому наполнению. При заполнении карточки товара, обратите внимание на тэг TITLE, а также description и keywords. Запомните их, именно они характеризуют текстовое содержание на вашей странице, а поисковые системы в свою очередь придают огромное значение этим тегам и учитывают их в поисковой выдачи. Оптимизируя эти мета теги, вы можете увеличить посещаемость за счет низкочастотных запросов.
  • 68. 68©Алекс Мельников www.magkurs.ru Высокочастотные (ВЧ) – это запросы, имеющие самое большое количество запросов в месяц в определенной теме. Например, «магазин ноутбуков». Среднечастотные (СЧ) – запросы, которые имеют среднее количество запросов в месяц. Например, «купить ноутбук Asus». Низкочастотные (НЧ) – запросы имеющие малое количество запросов в месяц. Например «купить ноутбук Asus N56VZ», но на наш взгляд они самые релевантные. Именно тег Title присутствует в поисковой выдачи. Это общее название всей вашей отдельной страницы с товаром, а не всего магазина. Поэтому он должен быть релевантным поисковому запросу.
  • 69. 69©Алекс Мельников www.magkurs.ru Итак, во-первых, название товара должно повторяться во всех этих тегах. Если я собираюсь продавать ноутбук Asus N56VZ, то оно обязательно должен присутствовать не только в title, но и в description и в keywords. Можно туда еще вписать основные характеристики товара. Например, цвет, фасон, материал, регион и т.п. В моем случае это размер экрана и регион Москва. На самой странице товара название также должно быть в заголовке первого уровня – H1. Поэтому, чтобы получать трафик по низкочастотным запросам, необходимо грамотно оптимизировать каждую страницу с товаром. Делать это руками очень долго и утомительно. Поэтому этот процесс необходимо автоматизировать.
  • 70. 70©Алекс Мельников www.magkurs.ru Автоматизируем оптимизацию внутренних страниц. Суть автоматизации заключается в том, чтобы при каждом добавлении товара его название автоматически появлялась в определенных местах на странице с товаром. Но нам нужно сделать так, чтобы не испортить привлекательность самой страницы. Здесь необходимо исходить в зависимости от выбранного вами дизайна Посмотрите на страницу с товаром (рисунок выше). Название товара встречается только один раз – в заголовке (H1), который тоже по большому счету слабо оптимизирован. Например, вместо слова – Описание, намного эффективнее будет, если мы сделаем – «Описание товара N». Это можно проделать и со словом Цена, характеристики, отзывы и т.д. Таким образом, вы сможем поднять свои внутренние страницы с товарами в поисковые топы по низкочастотным запросам, а это в свою очередь дополнительные целевые посетители для нашего интернет-магазина. Оптимизация H1 Сейчас мы с вами попробуем автоматизировать заголовок H1, чтобы при каждом добавлении товара в заголовке автоматически дописывались определенные слова. В моем случае, я добавил слово «купить» и «в Москве». Вы выбираете в зависимости от вашей тематики. Но, так как у нас интернет-магазин и мы занимаемся продажами, то слово «купить» я бы оставил в любом случае. Смотрите на рисунок ниже.
  • 71. 71©Алекс Мельников www.magkurs.ru Для этого открываем файл product.tpl из нашего шаблона, который находится в папке catalogviewthemedefaulttemplateproduct. Обратите внимание, что я делаю изменения в дефолтном шаблоне (default). Если вы установили новый шаблон, то вам необходимо изменять его файлы (catalogviewthemeВаш_шаблонtemplateproduct product.tpl ). Ищем там строку: <h1><?php echo $heading_title; ?></h1> И дописываем необходимые нам слова: <h1>Купить <?php echo $heading_title; ?> в Москве</h1> Или так <h1> <?php echo $heading_title; ?>, купить в Москве</h1> Теперь в карточке каждого товара будут появляться автоматически ваши дополнительные слова. Внимание! Повторю еще раз. Возможно, что после сохранения у вас будут проблемы с кодировкой, т.е. вместо русских слов, появятся квадратики или непонятные символы. Поэтому перед сохранением изменений, в Notepad++, с помощью кнопки в меню – Кодировки преобразуйте файл в UTF-8 без BOM, и сохраните снова, квадратики должны исчезнуть. Усиление присутствия ключевых запросов. Например, мы хотим, чтобы наши ключевые слова еще раз прописывались на странице с товаром, но уже в другом месте, допустим в самом внизу. Но здесь необходимо это повторение как то обыграть. Например, я вывел вот так:
  • 72. 72©Алекс Мельников www.magkurs.ru Для этого, в этом же файле (product.tpl) ищем следующую строку: <?php if ($tags) { ?> А выше вставляем: <div style="padding: 10px"><strong>Вы можете купить <?php echo $heading_title; ?> оформив заказ онлайн или по телефону</strong></div> Теперь у нас в каждой карточке товара будет внизу выводится эта надпись. Также, можно прописать условия доставки, или что-то еще повторяющееся в карточке каждого товара. Здесь все зависит от вашей фантазии. Это можно вставить и выше, в само описание товара. Находим: <div id="tab-description" class="tab-content"><?php echo $description; ?> И сразу после него вставляем <div style="padding: 10px"><strong>Вы можете купить <?php echo $heading_title; ?> оформив заказ онлайн или по телефону</strong></div> Теперь получилось вот так: .
  • 73. 73©Алекс Мельников www.magkurs.ru Добавляем «Описание товара N» Для того, чтобы рядом со словом Описание добавлялось название товара, как показано на рисунке ниже, необходимо открыть файл product.tpl (в папке catalogviewthemedefaulttemplateproduct. ), и найти следующую строку: <div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?> И сразу же через пробел вставляем такой код (он отвечает за вывод Title): <?php echo $heading_title; ?> Должно получиться вот так: <div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?> <?php echo $heading_title; ?> Это смело можно проделать и с «Характеристиками» и «Отзывами», что и описано ниже. Добавляем «Характеристики товара N» Находим в этом же файле следующий код <a href="#tab-attribute"><?php echo $tab_attribute; ?> И сразу же после через пробел вставляем <?php echo $heading_title; ?>
  • 74. 74©Алекс Мельников www.magkurs.ru Добавляем «Отзывы на товар N» Запросы со словом «Отзывы» тоже является нашим целевым запросом. Многие, перед тем как приобрести товар, внимательно знакомятся с отзывами покупателей, и лишь потом принимают решение. Поэтому, чтобы привлечь некоторый трафик с поисковых систем, можно оптимизировать и строчку «Отзывы». Т.е у нас будет вкладка не просто «Отзывы», а «Отзывы на товар N». Для этого находим в файле product.tpl (в папке catalogviewthemedefaulttemplateproduct ) следующий код: <a href="#tab-review"><?php echo $tab_review; ?> И сразу же после, через два пробел вставляем на <?php echo $heading_title; ?> Делаем строчку «Цена товара N» Например, мы хотим, чтобы в карточке товара выводилась не просто строчка «Цена», а «Цена товара такого то». Например, так: Для этого в знакомом нам файле product.tpl ищем строчку: <?php echo $text_price; ?> И сразу же через пробел вставляем: <?php echo $heading_title; ?>:
  • 75. 75©Алекс Мельников www.magkurs.ru Но это не все! Необходимо также открыть языковой файл cataloglanguagerussianproductproduct.php, и убрать двоеточие у цены. То есть поменять «Цена:» на «Цена» Внимание! Не стоит переусердствовать. Я лишь указал некоторые способы оптимизации контента (содержимого сайта). Используйте только часть из них, а не все сразу. В некоторых шаблонах нет тех или иных слов, не выводиться в силу дизайнерского расположения, например, Цена, тогда вписывайте ее, например в вставляемый текст, или используйте другие методы оптимизации. Таким образом, с помощью не сложных изменений, вы можете увеличить присутствие ключевых слов на странице с товаром, что однозначно скажется на увеличении переходов с поисковых систем по низкочастотным запросам.
  • 76. 76©Алекс Мельников www.magkurs.ru Рекомендации по заполнению страницы с товаром. Не забывайте про «Рекомендуемые товара», обязательно при добавлении товара в админ панели указывайте их. Это делается при добавлении или редактировании товаров. Каталог – Товары, вкладка Связи в самом внизу. Это увеличит число просмотров страниц вашего сайта, и позволит людям быстро переходить из товара в товар, и более детально ознакомиться с вашим ассортиментом. При этом, можно еще вывести «Хиты продаж», «Последние поступления» и др. Про это писалось выше. Попробуйте вывести эти блоки в разных местах, посмотрите как это будет выглядеть. Все это настраивается в Дополнениях – Модули. Обратите внимание на подарки, акции и скидки. Это конечно важный, но для начала не обязательный нюанс. Наверно, нет такого человека, который бы не любил подарки, даже если они не столь дороги. Это может быть дополнительный аксессуар, или приличная скидка на покупку следующих товаров в вашем магазине. Здесь нужно исходить из ассортимента. Но в любом случае, информация о скидках и акциях должна быть визуально доступна на любой странице интернет-магазина. Больше внимание уделяйте описанию товара. Не следует просто копировать характеристики товаров с других сайтов. Во-первых, вы ничем тогда не выделитесь. А во-вторых, копированный контент зачастую плохо индексируется поисковыми системами. Понятно, что характеристики, например, ноутбуков, сложно переделать. Но,
  • 77. 77©Алекс Мельников www.magkurs.ru никто не мешает, вставить своих пару предложений. Клиент хочет узнать как можно больше информации о товаре, и будет ее искать по всем сайтам. Старайтесь больше писать о преимуществах товара, как он может решить проблему клиента. По возможности вставляйте прямо в описание больше картинок, а также не забывайте про видео обзоры, которые можно предварительно найти на просторах интернета или изготовить самому, что на самом деле не так и сложно. «Завоюйте» внимание клиента. По опыту, можно сказать, что наиболее полное описание товаров, не только увеличивает конверсию (продажи), но и способствует получению естественных ссылок на ваш сайт. Люди будут сами делиться на форумах, в социальных сетях наиболее полным и раскрытым описанием. Увеличение естественных ссылок сыграет свою роль в выдачи поисковых систем. Работа конечно иногда трудоемкая, но достаточно эффективная. С клиентом необходимо поддерживать оперативную связь, поэтому не забывайте про контактную информацию. Она должна быть наиболее полной и предоставлять клиенту несколько способов для связи. Поэтому не забывайте заполнить раздел «О нас» (Каталог - Статьи) и «Связаться с нами» (Система – Настройки – Изменить, вкладка Общие). Важной составляющей при оформлении страницы с товаром являются изображения. Они должны быть наиболее привлекательными и показывать товар с лучшей стороны. Рекомендую вставлять изображение прямо в описание товара. Так более эффектнее будет выглядеть. Изображение получается изначально больших размеров, с удобным просмотром. При этом клиент сразу знакомиться с текстом и просматривает изображение товара. Также, желательно каждую картинку комментировать, останавливать внимание клиента на преимуществах. В этом плане товар удачно представляют на китайских интернет «моллах». Для примера зайдите на популярный китайский интернет молл http://www.taobao.com, и посетите страницу любого товара. Согласитесь пролистывать страницу вниз и знакомится с товарным описание там намного удобнее, нежели в наших магазинах. Картинки в описание можно вставлять при добавлении товара, где вы описываете его основные характеристики, с помощью иконки изображение (рис. см. ниже).
  • 78. 78©Алекс Мельников www.magkurs.ru Далее, вам необходимо загрузить изображение на сервер (Выбор на сервере - загрузить), выбрать его, настроить размеры и вставить. Посмотреть, как визуально смотрится, а потом если что откорректировать размеры. Это были некоторые рекомендации, которые позволяют увеличить конверсию вашего магазина. Возьмете их на вооружение или нет – дело за вами.