Благодаря тому, что покупатели все больше и больше покидают обычные магазины по всему миру, онлайн-бизнес процветает. Неудивительно, почему — цены дешевле благодаря практически отсутствию накладных расходов, никаких проблем с парковкой и отсутствию торгового персонала. Поэтому время никогда не было лучше, чтобы открыть свой собственный интернет-магазин — и это намного проще, чем вы думаете. Если вы хотите продавать свои товары ручной работы, доставлять товары из Китая или генерировать больше трафика в магазине благодаря присутствию в Интернете, это руководство проведет вас через весь процесс — от настройки хостинга до успешного запуска собственного виртуального магазина. ,
Чтобы это руководство было всеобъемлющим, оно было написано вместе с созданием моего собственного онлайн-магазина, размещенного в (mt) Media Temple и использующего все описанные приемы. Хотя в прошлом я работал с рядом сайтов электронной коммерции, на этот раз я начал с нуля, чтобы понять любые проблемы и проблемы, с которыми вы можете столкнуться на этом пути. Вы можете просмотреть магазин, который я создал на DuinoBits.com. Я продаю доступные стартовые наборы микроконтроллеров, чем я увлечен. Я надеюсь, что это руководство позволит вам также продолжить свою страсть.
1. Система магазинов
Я решил использовать WordPress в качестве базовой системы, поскольку уровень поддержки со стороны разработчиков, дизайнеров тем, плагинов и учебных пособий не имеет себе равных. Предполагается, что WordPress поддерживает около 20% всего Интернета, поэтому вы не будете одиноки. Не беспокойтесь, если вы никогда раньше не пользовались WordPress — мы расскажем вам об основах — но вам также рекомендуется скачать мое предыдущее бесплатное руководство « Начало работы с WordPress. WordPress обеспечит основную структуру сайта и обеспечит поддержку любых элементов блога, которые мы выбираем для включения, а также статических страниц (таких как «о нас», «страница контактов» и т. Д.).
Кроме того, мы будем использовать самый популярный плагин электронной коммерции с открытым исходным кодом для WordPress, WooCommerce , потому что у него самый широкий выбор, когда речь идет о дополнительных плагинах функций и шаблонах магазинов. JigoShop — самая большая альтернатива, и, по правде говоря, очень мало разграничить их — если у вас есть шанс, скачайте оба и поиграйте с ними несколько дней, прежде чем сделать окончательный выбор.
Существуют также специальные системы электронной коммерции — Magento, ZenCart и OpenCart, пожалуй, являются одними из самых популярных из них — но работа с WordPress означает, что нам гарантирована надежная система, от которой в ближайшее время не откажутся. Он также открывает множество функций, которые обычно не встречаются на сайтах электронной коммерции, и это именно то, что вам нужно, если вы собираетесь выделиться из толпы.
1.1 Настройка домена и хостинга
Мы будем использовать службу Grid-хостинга от Media Temple, поскольку это отличный баланс между стоимостью, производительностью и масштабируемостью. При цене $ 20 в месяц это доступная отправная точка для вашего бизнеса с пропускной способностью 1 ТБ и 100 ГБ дискового пространства — большинству небольших магазинов никогда не потребуется обновляться.
В отличие от других планов «общего хостинга», Media Temple Grid будет поддерживать работу сайта даже при большой нагрузке от скачков трафика (как они этого добиваются, будет объяснено в следующей главе о производительности). Вы можете разместить несколько доменов, если хотите, так что есть потенциал для экспериментов.
Если вы думаете, что вам нужен более низкоуровневый доступ к серверу, потому что вы из тех людей, которые любят возиться с Linux, рассмотрите решение виртуального частного сервера «Media Temple» «Media Temple». При цене 50 долларов в месяц это дает вам полную виртуальную машину, которую вы можете настроить на свое усмотрение, хотя задачи по оптимизации будут полностью зависеть от вас.
Зайдите на MediaTemple.net/webhosting/shared, чтобы начать:
Кратко рассмотрите функции, а затем нажмите « Зарегистрироваться» .
Вам нужно будет сразу выбрать доменное имя, чтобы настроить свою учетную запись — вы всегда можете добавить больше позже и изменить этот основной домен, если хотите. Если у вас его еще нет, введите его, чтобы узнать, доступен ли он. Регистрация нового доменного имени через Media Temple начинается с 12 долларов в год. Вы также можете настроить его для домена, купленного в другом месте, но вам нужно настроить серверы имен для этого домена на ns1.mediatemple.net и ns2.mediatemple.net из панели управления, где бы вы ни приобрели домен.
Если повезет, ваш домен будет доступен! «Конфиденциальность домена» не обязательна, но без нее ваше имя и адрес будут легко доступны любому, кто знает, где искать. Если вы все равно совершаете покупку по служебному адресу, это, очевидно, не является проблемой, но вы можете включить эту услугу, если это ваш домашний адрес.
На следующем экране заполните свой адрес и платежные реквизиты. Вскоре вы должны получить приветственное письмо — прежде чем начать, вам нужно будет установить пароль. Перейдите по ссылке в письме, чтобы сделать это, и обязательно используйте что-нибудь действительно безопасное (я использую StrongPasswordGenerator.com для генерации 15-символьного безопасного пароля — держите вкладку открытой, вам понадобится еще один в минуту). После этого вы можете войти в свой аккаунт-центр .
Наиболее важные кнопки, которые вы хотите знать на этом экране:
- Администратор — который открывает панель управления сайтом и позволяет создавать адреса электронной почты, базы данных или использовать функции установки приложений одним щелчком.
- Добавить новый домен — дополнительные расходы на хостинг для домена не требуются, хотя сам домен необходимо будет приобрести.
- Новый запрос в службу поддержки — где вы можете получить помощь по всем вопросам, связанным с вашей учетной записью. Также есть чат 24/7/365, доступный из нижней правой панели инструментов.
- База знаний — это вики, полная информации о каждом аспекте управления вашим сервером. Всегда ищите это первым, когда у вас есть вопросы.
1.2 Сделать адрес электронной почты
Давайте настроим ваш первый адрес электронной почты — хотя вы можете иметь до 1000, если хотите. Нажмите на кнопку Admin , затем Email Users . Обратите внимание, что это немного отличается от псевдонимов электронной почты . Псевдоним — это, в основном, адрес пересылки — он может получать электронную почту, но будет переходить на другую указанную учетную запись электронной почты, а не иметь собственную отдельную папку входящих сообщений. Нажмите Добавить нового пользователя . Вам действительно нужно беспокоиться о битах имени, описания и пароля — остальные могут быть скорректированы позже, если это необходимо, например, если вы нанимаете помощника и вам нужно предоставить ему доступ по FTP без ущерба для основной учетной записи администратора. Заполните настройки автоответчика, если вы хотите, чтобы по умолчанию отправлялось подтверждение всем, кто вам пишет, например: «Спасибо, что связались, мы постараемся ответить в течение дня» .
После настройки перейдите по адресу http://MediaTemple.net/help/mail/mailconfig/, чтобы использовать удивительный инструмент автоматической настройки электронной почты Media Temple — просто введите свой адрес электронной почты, сообщите ему, какой клиент (приложение электронной почты) вы пытаетесь чтобы настроить, и он отправит вам файл, который вы можете запустить, чтобы настроить все автоматически.
1.3 Выберите пароль базы данных
Прежде чем мы сможем использовать установку в один клик, вам нужно будет установить пароль базы данных — опять же, используйте генератор надежных паролей, чтобы создать новый. На следующем экране вам будет предложено создать новую базу данных — не беспокойтесь об этом, просто вернитесь на главный экран администратора. С этого момента мы будем использовать установку в один клик.
1.4 Установка WordPress одним щелчком мыши
Выберите Установка одним щелчком на экране администратора -> Добавить новое приложение -> WordPress -> и выберите Пуск . Для других хостов, оснащенных CPanel, обратитесь к руководству по установке WordPress.org .
По умолчанию установщик попытается настроить WordPress на blog.yourdomain.com (известный как поддомен). Это не то, что мы хотим, так как WordPress будет хостинг и для основного магазина — не только для блога — поэтому обязательно удалите этот бит. Не включайте WWW в домен! Вы можете оставить другие поля для базы данных по умолчанию, если хотите, но из соображений безопасности я рекомендую хотя бы изменить префикс базы данных вместо wp_ — таким образом, если кому-то удастся взломать ваш сайт или ввести вредоносные команды базы данных. , они не будут знать названия таблиц для таргетинга.
Вы получите сообщение о существующей папке HTML — это страница сервера по умолчанию. Не стесняйтесь отказаться от этого и перезаписать. Как только установка будет готова для вас, появится зеленая кнопка с надписью Finish .
Нажмите эту кнопку, чтобы завершить последние шаги установки внутри самого WordPress, то есть выбрать заголовок сайта и имя администратора и т. Д. Отключите параметр, позволяющий поисковым системам индексировать сайт на данный момент, — вы можете включить его позже, как только вы действительно готовы к запуску.
2. WordPress 101
WordPress начал свою жизнь как простая платформа для ведения блогов, но его популярность и открытый исходный код привели к тому, что система была адаптирована для работы со многими видами веб-сайтов. Как система управления контентом , WordPress позволяет легко создавать посты в хронологическом порядке — например, в блоге — и статические страницы, используемые для таких вещей, как «О нас», «Часто задаваемые вопросы» или «Контакты». WordPress обрабатывает загрузку файлов. (СМИ) и комментарии к статьям. Вся эта информация хранится в базе данных, затем, когда страница загружена, соответствующий шаблон темы заполняется правильной информацией. Сообщения могут быть классифицированы и помечены, помогая пользователю перемещаться по интересующим их элементам. WordPress также имеет обширную систему плагинов, которая добавляет функции или настраивает функциональность вашего сайта.
Вот быстрый взгляд на интерфейс — вы всегда можете добраться до него, добавив / wp-admin в конец вашего домена, например:
http://yourdomain.com/wp-admin/
> Первый экран, который вы видите при входе в систему, — это панель инструментов, которая дает обзор соответствующей информации, такой как общее количество постов и комментариев, последние комментарии или кто ссылается на вас.
Вдоль левой стороны экрана расположена основная панель навигации. Наведите указатель мыши на элемент, и может появиться подменю. Из элемента сообщений вы можете просматривать все существующие сообщения, добавлять новые сообщения или настраивать категории и теги.
Медиа позволяет просматривать все файлы, которые были загружены, но, как правило, вам не нужно делать это, так как вы будете загружать их непосредственно на страницы продукта или в блогах. Вы можете использовать экран СМИ для загрузки логотипа.
Страницы — это место, где вы просматриваете или создаете статические страницы, а «Посты» — это место, где происходит действие. Посты — это хронологические записи в блоге, основной фокус большинства установок WordPress. В подменю «Сообщения» также отображаются экраны управления категориями и тегами. Поскольку мы используем WordPress для электронной коммерции, мы не будем так часто использовать эти экраны.
Комментарии переносят вас в очередь на модерацию, где вы помечаете комментарии как спам или одобряете их.
Внешний вид — это то место, где вы будете выбирать, какую тему запускать, и, если ваша тема поддерживает ее, может быть еще несколько вариантов настроек для конкретной темы. Вы также отрегулируете настройки виджетов — это специальные блоки функций на вашем сайте, такие как календарь или список самых популярных продуктов на боковой панели. Вы также можете настроить пункты меню здесь, но опять же, это зависит от вашей темы. По сути, если вы хотите что-то изменить в том, как выглядит ваш сайт, он, вероятно, где-то здесь изменился.
Плагины предназначены для управления, добавления или отключения плагинов; некоторые плагины могут также добавлять свои собственные настройки в это меню (хотя некоторые вместо этого помещают его в инструменты). Вы можете установить плагины, выполнив поиск в каталоге WordPress, или загрузить ZIP-файл (если вы приобрели премиальный плагин). Примечание. Обычно встречается фактический zip-файл плагина внутри другого zip-файла контейнера, в дополнение к таким вещам, как readme для инструкций. Если при загрузке возникают ошибки, попробуйте сначала развернуть исходный файл на локальном жестком диске, а затем загрузить найденный в нем ZIP-файл.
Пользователи для редактирования, которые могут войти на сайт. Существует пять классов «пользователя», от администратора (это вы — администраторы могут настроить все, что касается сайта, и очень легко его отключить) до «подписчика» — так клиенты регистрируются, чтобы их данные можно было запомнить.
Инструменты можно безопасно игнорировать, хотя некоторые плагины размещают здесь свои пункты меню.
Наконец, Настройки . Пока достаточно проверить пункты подменю General и Permalink . На странице « Общие настройки» обязательно установите слоган для своего сайта — однострочное описание, которое может отображаться на главной странице для некоторых тем, а также местный часовой пояс. Постоянные ссылки относятся к URL-адресам, которые будут использоваться для доступа к контенту — по умолчанию они будут выглядеть примерно так:
http://yoursite.com/?p=12345
… Что не только некрасиво, но и ужасно для поисковых систем (об этом позже есть целая глава, не волнуйтесь). Выберите тот, который включает название поста, но я рекомендую не включать дату, если вы не планируете публиковать много постов в блоге, чувствительных ко времени. Позже я предложу вам писать посты в блоге, однако, чтобы привлечь поисковые системы на ваш сайт, таким образом, URL для них будет выглядеть так:
http://yoursite.com/why-my-products-are-awesome/
Уделите немного времени просмотру всех вариантов, возможно, добавьте несколько тестовых сообщений — попробуйте загрузить и вставить в них картинку, затем просмотрите свой сайт и прокомментируйте эти сообщения, а также посмотрите, как они выглядят в области администратора. Вы должны найти все довольно очевидно.
Совет по производительности: по умолчанию установлен пакет плагинов под названием JetPack. Вопреки тому, что может предложить название, это на самом деле значительно замедляет ваш сайт. Отключите это на экране плагинов для мгновенного повышения производительности — функции этого плагина можно найти отдельно в других местах.
2.1 Настройка магазина
Чтобы добавить компоненты магазина WooCommerce в WordPress, выберите «Добавить новый» на боковой панели плагинов. Найдите «woocommerce» и установите верхнюю опцию, которая на момент написания
WooCommerce — превосходная электронная коммерция 2.0.14 . К тому времени, когда вы читаете это, может быть более свежая версия, поэтому не беспокойтесь, если номер версии не совпадает.
После установки нажмите на ссылку « Активировать плагин» . Как только появится этот баннер, нажмите ссылку Install WooCommerce Pages — это добавит необходимые статические страницы, такие как Checkout и My Account.
Наконец, вам нужно будет снова установить параметры постоянной ссылки, настроив страницы продукта для использования базового URL-адреса / product , / shop или custom . Не забудьте сохранить изменения после завершения, и новая структура постоянной ссылки будет записана на сервер.
2.2 Регулировка настроек
Предполагая, что установка прошла успешно, у вас должно появиться два новых раздела на боковой панели. Первый, WooCommerce, — это то, где вы будете управлять магазином, заниматься заказами и выполнять все настройки. Щелкните элемент подменю «Настройки» и сначала ознакомьтесь со всеми общими настройками — по умолчанию они обычно подходят, но я бы предложил следующие изменения:
Включите регистрацию на странице «Моя учетная запись» — в противном случае клиенты будут вынуждены использовать стандартную регистрацию WordPress.
Запретить пользователям входить в WordPress Admin — в конце концов, для них нет причин быть там, и кажется более профессиональным скрывать сторону WordPress от них.
Включите текст уведомления о магазине в любом месте — на тот случай, если кто-то наткнется на ваш магазин и попытается сделать заказ.
На вкладке « Каталог » можно настроить единицы измерения и некоторые подробности отображения продукта. По умолчанию размеры и вес будут отображаться в разделе «Дополнительная информация о продукте» на страницах продукта. Если у вас нет веских причин для их отключения, я предлагаю оставить их включенными по причинам SEO («поисковая оптимизация», одна из последующих глав в этом руководстве).
Пока игнорируйте вкладку Страницы — она позволяет вам создавать определенные пользовательские страницы для функций магазина, но WooCommerce уже создала все необходимые страницы для вас, когда она была установлена, поэтому у вас не должно быть оснований для их изменения.
Вкладка Inventory предназначена для управления запасами. Отключите управление запасами, если вы хотите обрабатывать эту сторону самостоятельно, изготавливая товары на заказ или отправляя товары по сниженным ценам. Если вы планируете отслеживать уровни запасов, автоматическое предупреждение о низких запасах может быть весьма полезным.
Налог Это широкая тема, и предполагается, что вы поймете налоговую систему в вашем районе. В Великобритании вы должны заплатить 20% НДС, если ваш общий оборот превышает 79 000 фунтов стерлингов в год — однако, после регистрации вы также можете требовать возврата НДС на бизнес-покупки, так что это не так плохо, как потеря 20% прибыли для вас. Прочитайте это для более подробной информации о НДС .
Ситуация гораздо сложнее в США, где ставки варьируются в зависимости от штата, как и товары, на которые распространяется освобождение — хотя вы, как правило, освобождаетесь от налога с продаж, если у вас нет физического присутствия, например, в офисе или розничном магазине (технически Ваши клиенты онлайн должны платить налог самостоятельно). Однако существует законодательство, которое устранит это исключение и возложит ответственность на интернет-магазин, поэтому сначала проверьте.
Все налоговые расчеты по умолчанию отключены в WooCommerce.
Доставка : в WooCommerce есть базовые варианты доставки — например, фиксированная ставка или бесплатная доставка. Вы можете приобрести дополнительные варианты доставки, такие как USPS или Royal Mail, в официальном магазине расширений WooCommerce. По умолчанию в вашем магазине включена только бесплатная доставка, но вы можете изменить это, нажав на синие ссылки в верхней части вкладки Доставка. Не забудьте также отключить бесплатную доставку, если вы выберете одну из других, или клиенты, вероятно, выберут бесплатную опцию!
Платежные шлюзы — это различные способы, которыми вы можете принимать платежи от клиентов. Опять же, вы можете приобрести или загрузить дополнительные платежные шлюзы у WooCommerce или других разработчиков, но имейте в виду, что прием платежей по кредитным картам непосредственно на вашем сайте создает целый ряд новых проблем для работы с SSL. Прочтите отдельную главу по SSL, чтобы узнать об этом. Не беспокойтесь: вы все равно можете принимать платежи по кредитным картам через PayPal. На последней странице оформления заказа клиент будет перенаправлен на защищенную страницу PayPal, после чего автоматически будет перенаправлен обратно на ваш сайт для обычного «спасибо за ваше сообщение заказа». Плата составляет всего 0,10 $ за транзакцию.
2.2.1. Вопросы SSL
SSL — Secure Sockets Layer — защищает ваш заказ, создавая зашифрованное соединение для ваших клиентов. Вы должны подтвердить свой сайт, чтобы получить сертификат SSL, который подтверждает, что вы действительно являетесь тем, кем вы себя называете, и это позволит различным маркерам безопасности браузера появляться на странице оформления заказа. Получение SSL-сертификата стоит денег — $ 75 / год, если вы приобретаете его через Media Temple — и приводит к некоторым другим сложностям, упомянутым далее в этом руководстве.
3. Выбор темы
Тематика является важной частью WordPress и WooCommerce. Хотя администраторская сторона остается знакомой, выбранная вами тема будет определять все, что видят ваши клиенты, поэтому выбор хорошей темы имеет решающее значение. Как человек с несколькими сайтами WordPress, я должен признать, что потратил ненормальное количество на поиск следующей лучшей темы!
Тем не менее, изменить тему также очень просто — вам не нужно переписывать HTML или CSS, хотя вам может понадобиться перенастроить некоторые меню.
Если вы уже потратили немного времени на просмотр своего сайта, вы заметили, что WooCommerce работает из коробки с темой WordPress по умолчанию, но стили не совпадают, потому что она не была специально разработана для работы с компонентами WooCommerce. Если у вас есть существующая тема, с которой вы хотите интегрировать WooCommerce, это должно быть возможно — но добавление пользовательских стилей выходит за рамки этого руководства. Я предполагаю, что вы приобретете новую тему, специально разработанную для работы с WooCommerce, поэтому стиль отображения продукта должен идеально соответствовать частям окружающего шаблона.
Я рекомендую торговую площадку ThemeForest WooCommerce , хотя это не единственное место, где можно найти премиальную тему. Ожидайте, что вы заплатите где-нибудь от 50 до 100 долларов за неисключительную лицензию на один сайт (это означает, что другие люди тоже могут использовать эту тему). Вот некоторые ключевые слова, на которые стоит обратить внимание:
- Отзывчивый . Тема будет изменять размер фотографий и корректировать макет в зависимости от размера экрана — поэтому она должна работать с мобильными телефонами и планшетами. Вы можете изменить размер окна вашего браузера, чтобы протестировать — он будет динамически настраиваться. Учитывая, что большое количество покупателей теперь делают покупки со своего дивана, на этом этапе необходимо питание хотя бы для планшетов.
- WordPress Customizer Совместимо . Недавнее дополнение к WordPress — возможность настраивать элементы дизайна темы — такие как фон заголовка и цвета — без редактирования какого-либо кода. В этом нет необходимости — большинство тем в любом случае будут иметь собственную панель пользовательских настроек, но это попытка WordPress стандартизировать процесс.
- Мега Меню . Меню обычно представляют собой один столбец текстовых ссылок; Мега-меню может состоять из нескольких столбцов и может содержать краткую графику в верхней части или описания ссылок — в основном, намного больше, чем стандартное меню.
- Aqua Page Builder . Инструмент для перетаскивания шаблонов.
- Слайдер Революция . Позволяет добавлять привлекательные слайд-шоу с эффектами изображения и текста. Отличный способ привлечь внимание клиентов и представить конкретный продукт.
Каждая тема должна иметь кнопку предварительного просмотра, где вы можете проверить ее. Посмотрите на все пункты меню, чтобы увидеть функции, предлагаемые темой — большинство будет включать в себя различные макеты.
Когда дело доходит до загрузки новой темы, вам может быть предложена опция «Только файлы тем WordPress» и «Все файлы и документация». Вы захотите скачать оба, но сначала захватите файл темы WordPress, поскольку мы можем использовать его для загрузки в WordPress.
В подменю « Внешний вид» -> « Темы» перейдите на вкладку «Установка» и нажмите « Загрузить» . Найдите файл своей темы и нажмите « Установить сейчас» .
После завершения он должен быть указан в доступных темах и готов к активации.
Поскольку каждая тема различна, параметры для настройки и способы настройки различных функций будут сильно различаться. Некоторые авторы тем предоставляют демонстрационный контент, который вы используете для настройки функций, которые могут быть добавлены с помощью Сервис -> Утилита импорта . Некоторые из них будут иметь дополнительные плагины, включенные в полный пакет загрузки, которые необходимо будет установить отдельно (процесс такой же, как и для темы — просто зайдите в Плагины -> Добавить новый -> Загрузить и выберите zip-файл). Все темы будут иметь какую-то документацию и форум онлайн поддержки. Даже опытные профессионалы должны ссылаться на эту документацию, но это может быть ошеломляющим для новичка с огромным количеством доступных вариантов и различным дизайном страниц. Делайте вещи по одному маленькому шагу за раз, и не расстраивайтесь только потому, что ваш сайт еще не похож на предварительный просмотр.
Советы по экономии денег : если вы хотите, чтобы полупрофессиональный логотип был сделан без оплаты более 500 долларов, посетите Fiverr.com , площадку для креативных типов, чтобы получить опыт и создать портфолио. Вы можете получить базовую концепцию логотипа за 5 долларов, но ожидайте, что заплатите 50 долларов за полный набор PSD и векторных файлов.
В разделе « Внешний вид» есть несколько пунктов меню, которые являются стандартными для каждой темы, поэтому давайте кратко рассмотрим их.
3.1 Виджеты
Виджеты — это небольшие функциональные возможности, которые можно добавить в любые боковые панели / области виджетов в вашей теме. Несколько сбивает с толку, боковая панель также может быть найдена в верхнем или нижнем колонтитуле — это зависит от темы, но они обычно включают более одной. Не всегда очевидно, где находятся эти области виджетов, поэтому еще раз обратитесь к документации для получения подробной информации. Вот несколько примеров доступных виджетов, которые можно добавить в WooCommerce:
- Поиск продукта
- Ценовой фильтр
- Случайные продукты
- Корзина (может быть скрыта, если пуста)
- Недавно просмотренные продукты
3.2 Меню
Большинство тем также предоставляют одно или несколько мест меню. Сначала должны быть созданы меню, а затем назначены для определенного места.
Если вы хотите, чтобы элемент меню расширялся, когда пользователь наводит на него курсор, перетащите элементы в редакторе меню влево или вправо, чтобы сделать их родительским (верхний уровень) или дочерним элементом.
4. Добавление продуктов и вариантов
Если вы никогда не управляли интернет-магазином раньше, концепция вариантов продукта может быть для вас новой. Ваш магазин может обрабатывать следующие основные типы продуктов:
- Простой продукт : один элемент без опций. Самый простой в управлении.
- Переменная : основной продукт с различными атрибутами, из которого клиент может выбирать — это может быть размер или цвет. Если вы позволяете системе управлять уровнями запасов для вас, каждая комбинация вариантов является уникальной и, следовательно, имеет свой собственный уровень запасов.
- Сгруппированный : коллекция связанных простых продуктов, которые можно приобрести по отдельности. Сгруппированный продукт состоит из множества дочерних продуктов, но сам по себе не имеет цены или уровня запасов; это просто способ визуально сгруппировать товары на одной странице, чтобы клиенты могли легче добавлять отдельные товары в корзину.
- Внешний / аффилированный : вместо кнопки «добавить в корзину» будет показана кнопка «читать дальше», которая отправляет пользователя на другой веб-сайт.
- Загружаемые : файл, который может быть доставлен клиенту после успешной оплаты. Обычно это каким-то образом защищено и может быть ограничено определенным количеством загрузок или датой истечения срока действия.
- Виртуальный : эти продукты не требуют доставки и, следовательно, не будут влиять на стоимость доставки — используются в основном для продажи услуг.
Дополнительные типы продуктов могут быть приобретены в виде плагинов — например, комплекты продуктов или принудительные продажи . Большую часть времени вы будете работать только с простыми и переменными продуктами.
Все продукты могут иметь атрибуты, описывающие эти продукты, такие как цвет. Простым продуктом может быть свитер, доступный только в красном цвете (т. Е. Без вариантов), но клиент все равно захочет, чтобы он был включен, если бы он фильтровал красные продукты.
4.1 Добавление простого продукта
Чтобы добавить простой продукт, перейдите в « Продукты» -> « Добавить новый» или используйте панель быстрого администрирования в верхней части экрана ( + «Новый» -> « Продукт» ). Экран редактирования должен быть легким для восприятия.
В дополнение к названию и описанию продукта вы найдете поле « Краткое описание» . В большинстве тем это появляется непосредственно рядом с изображением продукта с полным описанием внизу страницы; на некоторых темах он может вообще не использоваться.
Прокрутите страницу немного вниз, чтобы найти поле « Сведения о продукте» . Здесь добавляются важные данные о цене и размерах упаковки.
Читайте дальше, чтобы узнать, как добавлять изображения.
Совет: если вы ищете что-то на экране редактирования и не можете его найти, поле может быть скрыто. Нажмите « Параметры экрана» в правом верхнем углу и убедитесь, что все поля включены (или отключите те, которые вам не нужны, чтобы создать менее загроможденный экран редактирования).
4.2 Избранные изображения и галерея продуктов
В левом нижнем углу экрана «Редактировать или добавить новый продукт» вы найдете раздел рекомендуемых изображений и галереи продуктов. Показанное изображение является основным изображением продукта, которое отображается непосредственно пользователю и размещается по всему сайту. Для показанного изображения можно использовать только одно изображение, и каждая тема будет иметь идеальный размер изображения для использования. Загрузите все с достаточно высоким качеством (но не более 2 МБ на изображение), и WordPress автоматически уменьшит размер по мере необходимости для размеров миниатюр.
Раздел «Галерея продуктов» можно использовать для добавления нескольких дополнительных изображений к продукту. Они показаны на странице сведений о продукте под основным изображением. В случае переменных продуктов у каждого варианта также может быть свое изображение, которое будет отображаться, когда пользователь изменяет свой выбор.
Процесс фактической загрузки изображений не требует пояснений — после того, как вы нажали «Установить рекомендуемое изображение» или «Добавить галерею продукта», вы можете выбрать одно из существующих изображений или перейти на вкладку загрузки. Перетащите в это окно, чтобы загрузить. Для галерей продуктов, удерживайте нажатой клавишу CMD / CTRL, чтобы выбрать несколько изображений одновременно из медиабраузера.
4.3 Советы по фотографии продукта
Основные «бесшовные фоны» могут быть достигнуты с помощью белой части карты, прислоненной к стене и плоской поверхности. Для действительно профессионального взгляда рассмотрите создание коробки для фотографий продукта DIY (на фото ниже — фотоальбом Digital Photography School ). По крайней мере, используйте рассеиватель для равномерного освещения.
Если ваши продукты могли бы быть полезны, если бы их видели под всеми углами, подумайте о покупке плагина Magic360 (£ 99), который создает вращающийся виджет 360-градусного объекта из 18 или 36 фотографий продуктов. Вы можете сделать недорогую платформу для фотографирования с помощью распылителя Lazy Susan party, окрашенного в белый цвет.
4.4 Глобальные атрибуты
Доступные из боковой панели « Продукт» -> « Атрибуты» , глобальные атрибуты могут быть применены к ряду продуктов.
Давайте продолжим и создадим глобальный атрибут цвета в качестве примера. На экране « Продукты» -> « Атрибуты» выберите имя и укажите новый атрибут. Убедитесь, что тип атрибута установлен на «выбрать».
Добавьте атрибут, и он появится в списке — нажмите кнопку настройки терминов, чтобы добавить отдельные цвета. Примечание. Если вы хотите использовать фактические «цветные образцы» для параметров продукта, вам необходимо приобрести дополнительное расширение «Цветовые и графические образцы» за 99 долларов . По умолчанию вы можете использовать только текст.
На экране « Продукт» прокрутите вниз до поля « Сведения о продукте», и теперь вы сможете добавить новый цвет атрибута.
После добавления вам нужно выбрать, какие цветовые термины применяются к данному конкретному продукту — используйте «Выбрать все», чтобы быстро добавить все возможные цвета. Предполагая, что вы хотите, чтобы они создавали варианты продукта и были доступны для выбора клиентом, убедитесь, что установлены оба флажка, как показано, затем нажмите Сохранить атрибуты.
Теперь перейдем на вкладку Variations . Если данные о товаре не меняются — цена, высота и т. Д. — и варианты просто для предпочтения пользователя, вам нужно добавить только один вариант и оставить любые атрибуты, как Любой цвет, Любой размер (например). Это означает, что независимо от цвета и размера, который выберет пользователь, он будет отображать одинаковые цены и расчеты доставки.
Если цена или вес меняются в зависимости от того, что выберет пользователь, вам нужно будет добавить варианты и обновить информацию отдельно. При связывании всех атрибутов будет автоматически генерироваться новый вариант для каждой имеющейся комбинации атрибутов — это полезно, если вы используете только один атрибут, но не рекомендуется, если у вас есть несколько атрибутов, поскольку число созданных вариантов будет огромным. Если цена и стоимость доставки изменяются в соответствии с выбранным размером, но не по цвету, вы создадите новый вариант для каждого размера, но оставите атрибут цвета «любой цвет».
4.5 Атрибуты, категории и теги путаницы
Существует определенное функциональное совпадение, когда дело доходит до описания продуктов с атрибутами , тегами или категориями . Если бы ваш магазин состоял только из простых товаров, вы могли бы, например, создать категорию для «красной одежды» или определить «красную» метку — и то, и другое было бы функционально схожим для группировки «красных товаров».
Вот как я пытаюсь запомнить различия:
Категории должны использоваться в навигационных целях. Вероятно, они — первый способ, которым ваш покупатель выберет обход магазина, поэтому они должны быть сосредоточены на намерениях пользователя — как пользователь ожидает, что магазин будет разделен? Подумайте о логических разделах универмага — вы не найдете красный раздел, но вы найдете «вечернюю одежду» или «летние платья». Помните, что вы также можете определить подкатегории — в соответствии с рекомендациями следует ограничить количество категорий верхнего уровня до 10 или менее. В отличие от реального универмага, вы можете назначить товар нескольким категориям.
Атрибуты можно рассматривать как фильтр: цена, размер или цвет помогают сузить ваш выбор, но они, безусловно, не являются основным способом поиска товаров в вашем магазине. Вы не заходите в универмаг и не говорите «покажите мне все, что у вас есть в XL». Атрибуты также могут быть выбраны одновременно — таким образом, клиент может искать что-то красное, размером M и менее чем за 30 фунтов стерлингов. Если бы у вас были категории для каждой из них, они могли бы искать только по одной за раз.
Теги необязательны — явление цифрового века. Они также могут быть использованы для перекрестных ссылок на продукты. Если у вас есть ключевое слово или метка для описания набора продуктов, которые не имеют логического смысла в своей категории или в качестве атрибута, тег может быть уместным. Не беспокойтесь, если вы не можете придумать, почему вы используете теги — большинство интернет-магазинов тоже этого не делают, но они есть, если вы этого хотите.
5. SEO для электронной коммерции
Поисковая оптимизация (SEO) — то есть процесс обеспечения того, что ваш сайт будет выглядеть достаточно высоко в результатах, представленных в пользовательских поисковых запросах, — особенно сложен, когда дело доходит до электронной коммерции. Не потому, что правила для онлайн-магазинов отличаются от блогов или других сайтов, а потому, что они абсолютно одинаковы. Последние несколько лет обновления Google были особенно жесткими на сайтах электронной коммерции. Google решил, что контент в длинных формах является сильным показателем качества веб-сайта — это хорошо для блогов, состоящих из текста и изображений, но гораздо сложнее для интернет-магазинов, которые по сути являются просто каталогами с абзацем описательного текста, если вы счастливый.
Проблема заключается в том, что для большинства сайтов электронной коммерции очень мало различий между страницами продукта (изображения, заголовок и цена), в то время как основное содержимое страницы (шаблон вокруг нее, меню и т. Д.) Остается неизменным. С точки зрения Google, у вас есть большое количество страниц с похожим содержанием низкого качества, что означает, что они не будут считаться авторитетными для любых ключевых слов.
Это, конечно, огромная проблема для интернет-магазинов — и эти строгие алгоритмы «проверки качества», которые Google усилил в последние годы, несут единоличную ответственность за огромный спад продаж для многих сайтов онлайн-покупок. К счастью, мы можем понять решение, посмотрев на крупных игроков.
5.1 Техническая SEO
В этом разделе я расскажу о тактике SEO для электронной коммерции, но есть определенные технические аспекты SEO, которые применимы к любому сайту, который у нас просто не хватает места — это, вероятно, удвоило бы размер этого сайта. руководство.Если у вас есть время, просмотрите эти 5 сайтов, чтобы изучить основы SEO Как только вы поймете основы, я предлагаю использовать WordPress SEO (бесплатно) с плагинами Yoast SEO для WooCommerce ($ 29) для их реализации. Не забывайте об этом шаге — SEO — это невероятно важный аспект ведения бизнеса в Интернете сегодня — «если вы его построите, они придут», то это просто не применимо, если ваш SEO не работает правильно.
5.2 Как Amazon удается противостоять тренду?
Верхняя область страницы продукта Amazon похожа на любой другой сайт электронной коммерции — фотографию или два продукта, некоторую базовую информацию и кнопки «цена / добавить в корзину». На этом сходство заканчивается. Прокрутите вниз, и мы найдем множество дополнительной информации и виджетов.
5.2.1 Обширные описания
Забудьте простые поверхностные описания, состоящие из одного абзаца, — запишите как можно больше. Размеры продукта, вес, страна изготовления, материалы — все это добавляет ценный дополнительный контент на вашу страницу.
Если вы продаете из базы данных оптовых торговцев, где вам предлагаются названия продуктов и описания, переписывание уникальных описаний особенно важно. Эти предоставленные описания, вероятно, дословно используются в сотнях других магазинов, поэтому Google сочтет многие из них дублирующимся контентом. Очень важно, чтобы вы отличались от этих сайтов.
Очевидно, что если продукты, которые вы продаете, являются единственными в своем роде, вам не нужно слишком беспокоиться об этом, но все равно стоит предоставить как можно больше информации. Помните, что когда Google «читает» вашу страницу, на самом деле она не учитывает изображения — поэтому очень важно иметь соответствующий текстовый контент (не являясь спамом).
5.2.2 Отзывы пользователей
Один из самых простых способов повысить ценность страницы — публиковать отзывы пользователей о продукте. Тем не менее, это займет некоторое время, чтобы собрать их у клиентов, поэтому подумайте о том, чтобы предложить стимул «5% от вашего следующего заказа, если вы оставите отзыв». Настройте время электронной почты, чтобы напомнить клиентам оставить отзыв через неделю после их покупки. В Письма Automated Follow Up плагин (129 $) может помочь вам достичь этого, но вы можете также отправить электронную почту вручную.
Некоторые сайты пойдут на дополнительный шаг и примут «выстрелы» для клиентов. Хотя они могут быть полезны для пользователя, они не добавляют слишком много с точки зрения ценности SEO. Один из уникальных подходов, использованный Black Milk Clothing, заключался в том, чтобы взаимодействовать с API Instagram и получать фотографии, помеченные названием продукта, — он работает, потому что сам продукт является особенно вирусным, то есть платье, которое вы действительно хотите показать своим друзьям.
Часто задаваемые вопросы по продукту — где пользователи могут задать вопрос и ожидать от вас ответа, также можно быстро добавить полезную информацию на страницу. Этот продукт часто задаваемые вопросы для плагина WooCommerce является бесплатным.
5.2.3 Виджеты
Потратьте немного времени, чтобы изучить некоторые из ваших любимых торговых сайтов и определить ключевые элементы на странице, которые вы считаете полезными с точки зрения покупателя — есть вероятность, что есть плагин для WooCommerce, который также поможет вам добавить это. Однако не перегружайте страницу — каждый дополнительный «виджет» будет замедлять работу сайта, и в соответствии с хорошей практикой пользовательского интерфейса , чем более сфокусирована страница, тем больше вероятность того, что пользователь перейдет в платного клиента.
5.3 Знание эксперта и ведение блога
Если вы продаете продукты, которые вам нравятся, у вас, вероятно, есть достаточное количество экспертных знаний по этой теме. Напишите о последних тенденциях моды, если вы продаете одежду; напишите о том, как создать красочную летнюю границу, если вы продаете семена. «Как» и списочные статьи, такие как «10 отличных способов…», как правило, работают очень хорошо. Вы будете не только писать контент, который демонстрирует Google, что вы знаете свои вещи, но также вы будете создавать контент, которым пользователи любят делиться на Facebook или Twitter. Для начала просто начните создавать новые сообщения , и они автоматически появятся в хронологическом порядке в разделе блога на вашем сайте.
Даже если вы решите не включать блог в свой собственный интернет-магазин, гостевой блоггинг может стать отличным рекламным инструментом — именно здесь другие сайты будут публиковать статью со ссылкой на ваш магазин. Просто убедитесь, что ваш контент действительно полезен для читателя, а не просто используется для привлечения трафика. Для систематического подхода к гостевому блоггингу вы можете попробовать MyBlogGuest , но, по моему опыту, прямое обращение к сайтам и предложение ваших услуг может быть более эффективным.
Короче говоря, недостаточно просто предлагать товар на продажу. Ваш сайт должен отличаться как инновационными функциями, так и качественным контентом. Если вы можете, зарекомендуйте себя в качестве отраслевого эксперта — придайте авторитетности публикуемые вами статьи и покажите, что вы хорошо осведомлены о продукте. Убедитесь, что ваш список товаров более привлекательный, более полезный и содержит больше информации, чем любые другие конкуренты.
6. Ускорение сайта и производительность
Скорость имеет значение. Проще говоря, медленный сайт расстроит потенциальных клиентов, заставив их уйти до того, как продажи будут достигнуты, поэтому важно сделать все возможное, чтобы оптимизировать свой сайт. Следующий совет относится конкретно к панели управления Grid Service Media Temple, но некоторые или все эти методы будут доступны в той или иной форме на других хостах.
6.1 Включить FastCGI
В области « Настройки PHP» на панели управления учетной записью активируйте FastCGI. Не вдаваясь в технические аспекты, это ускоряет работу PHP-кода, языка, который создает динамические веб-страницы в WordPress. Это важно для запуска следующего улучшения — mod_pagespeed.
6.2 Включить mod_pagespeed
mod_pagespeed — это плагин веб-сервера, написанный Google, предназначенный для автоматизации некоторых задач оптимизации, таких как минимизация CSS и Javascript (это означает удаление пробелов и сжатие нескольких файлов в один файл). Если вам действительно интересно узнать о механике и деталях, посмотрите это часовое видео объяснение .
Чтобы настроить это, вы найдете параметры PageSpeed в последней строке панели управления.
На следующем экране включите его для всех ваших доменов и сохраните. Выполнено!
6.3 Включить бесплатную учетную запись CloudFlare
В раскрывающемся меню Account Center -> Domains выберите Add New Domain или Service . Прокрутите вниз, пока не найдете CloudFlare, и нажмите кнопку активации . Предполагая, что у вас еще нет учетной записи CloudFlare, пройдитесь по простой форме регистрации.
После этого вы попадете на страницу активации с перечнем отдельных доменов. Продолжайте и активируйте сейчас, или вы можете вернуться к этому экрану в любое время из нового раздела «Дополнительные услуги», который будет создан в вашем Центре учетных записей -> вкладка « Обзор ».
Обратите внимание, что бесплатная учетная запись CloudFlare не поддерживает соединения SSL — это проблема, если ваш сайт напрямую принимает платежи по кредитным картам через собственный платежный шлюз. Если ваш магазин полагается исключительно на внешние платежные шлюзы, такие как PayPal, это не проблема, и вам не нужен SSL. Премиум-аккаунт CloudFlare начинается от 20 долларов в месяц.
6.4 Используйте CDN для обслуживания статических ресурсов
Веб-серверы хороши для генерации динамических страниц из базы данных, но не так хороши для устойчивой передачи файлов, таких как изображения или Javascript. CDN, или Content Delivery Network, состоит из особого вида веб-сервера, который не выполняет никаких типичных функций веб-сервера — он очень оптимизирован для доставки файлов, и все. CDN также поддерживают серверы по всему миру — поэтому, хотя начальная страница может быть сгенерирована в Америке, дополнительные файлы ресурсов загружаются из более локальных источников.
Пропускная способность в CDN дешевле, чем пропускная способность, предоставляемая вашим хостом, поэтому, если вы используете ежемесячную квоту пропускной способности, вам обязательно следует установить CDN.
Тем не менее, CDN — это сервис премиум-класса, который доступен в качестве дополнения в Media Temple. Начиная с $ 20 / месяц (ежемесячный контракт), Media Temple ProCDN обеспечивает пропускную способность 200 ГБ и более 10 точек кэширования контента (POP) в центрах обработки данных высшего уровня.
Вам действительно нужен CDN? Это не важно, если у вас работают другие оптимизации, поэтому подождите, пока не обнаружите, что вы используете ежемесячную полосу пропускания или если ваши страницы особенно загружены графикой. Если вы решите использовать CDN, вам также понадобится плагин в WordPress, который переписывает URL-адреса, чтобы они указывали на ваш CDN, а не на локальный сайт. Для этого вам понадобится ….
6,5 W3 Total Cache
Total Cache от w3 Edge — это полноценное решение для кеширования для опытных пользователей. При правильной настройке он может создавать минимизированные файлы почти так же, как mod_pagespeed, но этот процесс действительно не для начинающих. Total Cache состоит из различных модулей, каждый из которых может быть активирован, поэтому настройка этого плагина выходит за рамки данного руководства. Вы можете прочитать мое краткое введение по настройке общего кэша w3 здесь. настроить . Media Temple также имеет подробное руководство по настройке функции CDN , если вы решите использовать их решение ProCDN.
6.6 О «использовании GPU»
GPU — или Grid Performance Unit — это метод Media Temple, позволяющий определить, какую долю серверов использует ваш сайт в настоящее время, обеспечивая справедливую производительность для всех. В основном это касается циклов ЦП, но также учитывает такие вещи, как операции чтения и записи на диск. В любой момент вы можете проверить текущее использование графического процессора в час и прогнозируемое превышение в соответствующем разделе панели управления учетной записью.
Если ваш сайт испытывает внезапный всплеск трафика — например, если ссылка размещена на первой странице Reddit — Grid Service будет разумно распределять больше ресурсов, чтобы справиться с этим всплеском. В отличие от большинства общих хостов, это означает, что сайт будет оставаться в сети. Использование вашего графического процессора может увеличиться за это время, но до тех пор, пока всплеск трафика не будет поддерживаться в течение целого месяца, ваше общее ежемесячное использование графического процессора, вероятно, не превысит квоту.
Вообще говоря, вам не нужно беспокоиться об этом — месячная квота 2000 графических процессоров (эквивалент 2.78 графических процессоров в день) была рассчитана таким образом, чтобы 98% сайтов, размещенных на Grid, никогда не превышали ее.
7. Запуск и Акции
Не спешите рассказывать миру о своем сайте — мой опыт подсказывает, что клиентов всегда будут ждать небольшие ошибки, поэтому запуск с низким ключом — лучший выбор. Чтобы протестировать свой сайт, попробуйте из разных браузеров и убедитесь, что вы не вошли в WordPress — страницы, которые вы просматриваете как пользователь-администратор, иногда отличаются от тех, которые видит обычный посетитель.
Если вы уверены, что сайт готов для всех, попробуйте следующую тактику, чтобы получить как можно больше шагов.
7.1 Соревнования
Используйте бесплатный бесплатный виджет от PunchTab.com, чтобы поощрять различные действия. Клиенты смогут получать заявки на участие в конкурсе для отправки своего адреса электронной почты, написания твитов или добавления понравившейся страницы, представления друзей, становления фанатом Facebook или ответа на вопрос.
7.2 Социальные сети
Независимо от вашей моральной позиции в Facebook или личного мнения о Twitter, правда в том, что социальные сети играют большую роль в современном онлайн-маркетинге. У нас есть отдельное полное руководство, которое вы можете скачать или прочитать онлайн прямо сейчас — ваше руководство по маркетингу в социальных сетях, ваше руководство по маркетингу в социальных сетях, Используйте виджет соревнования PunchTab, упомянутый выше, чтобы собрать новых последователей Twitter и поклонников Facebook.
7.3 Список рассылки
Используйте свой существующий список клиентов, чтобы приглашать людей на сайт, и используйте месяцы, предшествующие запуску, для сбора адресов. Используйте плагин Ultimate Coming Soon Pro ($ 29) и учетную запись управления списком MailChimp (различные планы, начинаются бесплатно), чтобы представить посетителям страницу подписки на новостную рассылку, сохраняя возможность предварительного просмотра и работы на сайте при входе в систему как Администратор Если вы чувствуете себя щедрым, предложите подписчикам купон на скидку от первого заказа (и еще один после первого заказа, чтобы поощрить их вернуться).
7.4 Google Adwords
Google Adwords — это огромная тема, которая выходит за рамки этой книги, но Google позволяет легко «делать ставки» на конкретные поисковые запросы по ключевым словам, чтобы привлечь потенциальных клиентов. Хотя это и не обязательно в начале, вам, возможно, захочется в какой-то момент попробовать рекламную кампанию Adwords .
Удачи!
Теперь вы должны быть готовы начать свой собственный онлайн-бизнес — от покупки домена до запуска сайта и всего, что между ними. Последующие моменты — это то, что действительно испытает вас — управление запасами, работа со сложными поставщиками и еще более сложными клиентами, мошенничество с платежами, потерянные поставки и т. Д. Я боюсь, что нет плагинов, чтобы помочь вам в этом!
Правда в том, что у вас будет много конкурентов, поэтому я действительно не могу особо подчеркнуть, насколько важно каким-то образом дифференцировать себя: благодаря вашим экспертным знаниям ваш удивительно красивый сайт наполнен полезной информацией и отличным обслуживанием клиентов. Не нужно тратить свои сбережения на дорогие дизайнерские агентства и мошеннические SEO-сервисы, хотя несколько сотен долларов — это все, что вам нужно, чтобы протестировать свой продукт и потенциально стать вашим собственным боссом. Выбирая WooCommerce и WordPress, вы гарантируете, что, если у вас возникнут проблемы или у вас возникнут вопросы, ответом всегда будет быстрый поиск в Google. Теперь действительно, чего вы ждете?