Полное руководство Shopify + Swarmify для видеохостинга электронной коммерции

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

Знаете ли вы, что страницы продуктов с видеоконтентом увеличивают конверсию на 80 % ? Правильно, вашим клиентам нравится видеть то, что они получают.

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

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

И в сегодняшнем сообщении в блоге мы покажем вам, как именно использовать Swarmify и Shopify для мгновенного запуска, без буферизации и невероятно быстрых видео для ваших пользователей. Настроить все это так же просто, как A, B, C, так что не беспокойтесь, если вы не разбираетесь в технологиях :)

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

Теперь вы этого не хотите, и мы тоже. Без дальнейших церемоний, давайте начнем с некоторой справочной информации, так что мы на одной странице.

Что такое Shopify?

Shopify — ведущая в отрасли платформа для электронной коммерции. Они предлагают вам массу инструментов для создания интернет-магазина и сразу же приступайте к работе.

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

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

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

Кроме того, у вас есть все инструменты, необходимые для обработки и отправки заказов без особых усилий. Кроме того, они предлагают вам набор маркетинговых инструментов для «…создания, выполнения и анализа кампаний цифрового маркетинга…» без догадок.

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

Они начинают вас с 14-дневной пробной версии без кредитной карты, чтобы проверить воду. Чтобы разблокировать все возможности Shopify, вы должны подписаться на платный план.

Ключевые особенности Shopify

Shopify — это платформа электронной коммерции, которую выбирают миллионы пользователей благодаря таким функциям, как:

• Простой в использовании редактор веб-сайтов для создания интернет-магазинов, как у опытного веб-разработчика.
• Более 70 тем, которые вы можете настроить в соответствии с вашим магазином
• Точка продажи (POS), поэтому вы можете продавать в своем магазине или на своем смартфоне / мобильном устройстве.
• Простая интеграция Oberlo для предприятий прямой доставки
• Конструктор интернет-магазинов
• Несколько платежных систем
• Адаптивный и удобный для мобильных устройств дизайн
• Бесплатные стоковые фото
• Легко редактируйте HTML, CSS и JS вашего магазина
• Пользовательское доменное имя, например, swarmify.com
• Полная платформа для ведения блога, которая отлично подходит для контент-маркетинга.
• Бесплатный SSL-сертификат
• Восстановление заброшенной кассы
• Гибкие тарифы на доставку и автоматические налоги
• Несколько языков
• 100 долларов США на рекламу Google, если вы потратите 25 долларов США на новую учетную запись Google Advertising.
• Полная интеграция с социальными сетями
• Неограниченная пропускная способность
• Круглосуточная поддержка
• И многое другое!

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

Чтобы подсластить сделку, Shopify предлагает доступные планы, начиная всего с 9 долларов в месяц. Если вы начинаете новый бизнес, их план Basic Shopify (29 долларов в месяц) предлагает отличное соотношение цены и качества.

Тем не менее, что такое Swarmify?

Что такое Swarmify?

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

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

Если вы используете (или планируете использовать) видео в своем магазине Shopify, мы предлагаем вам именно то, что вам нужно для повышения скорости загрузки ваших видео.

Кроме того, мы помогаем вам предоставлять покупателям полностью персонализированные видеоматериалы.

Вместо использования видеоплеера YouTube, который поставляется с логотипом YouTube, ссылками и рекомендуемыми видео от ваших конкурентов, мы предлагаем вам наш проигрыватель SmartVideo.

Наш революционный видеоплеер не содержит брендинга или ссылок. Он на 100 % свободен от беспорядка, плюс вы можете настроить его в соответствии с вашим магазином Shopify за считанные минуты.

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

Ключевые особенности Swarmify

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

• Неограниченная пропускная способность , знаете ли, как Shopify :)
• Неограниченное хранилище
• Сеть доставки видеоконтента SmartCDN. Ваши покупатели получают видео в 12 раз быстрее, чем в среднем по отрасли, независимо от того, где они находятся.
• Автоматическое преобразование YouTube. Если вы уже используете YouTube и у вас есть несколько видеороликов YouTube в магазине Shopify, SmartVideo автоматически преобразует все видео и передает их из наших сверхбыстрых стеков и CDN.
• Возможность размещения видео на нескольких платформах, таких как YouTube, Wistia, Vimeo, Google Drive, Amazon S3, pCloud и так далее. Ваши клиенты не заметят разницы, потому что мы обслуживаем все ваши видео в нашем видеоплеере без помех.
• Превосходное кодирование видео для оптимизации просмотра на любом устройстве
• Непрерывная оптимизация потоковой передачи. Во время воспроизведения SmartVideo постоянно отслеживает качество видео каждого отдельного пользователя и предотвращает сбои до их возникновения.
• Воспроизведение без остановок — SmartVideo обеспечивает в 8 раз меньшую буферизацию во время воспроизведения, чем в среднем другие проигрыватели. Теперь вашим клиентам не нужно ждать буферизации видео о товарах. Вы должны поблагодарить за это наш EdgeAI :)
• Простая установка
• Первоклассная поддержка, поддерживаемая увлеченными разработчиками
• И многое другое (Подробнее о возможностях читайте здесь)

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

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

Входит Swarmify, и вы спасаете положение. Мы предлагаем вам именно то, что вам нужно, чтобы предоставить вашим покупателям быстрое, индивидуальное и профессиональное видео.

Благодаря быстрому и высококачественному воспроизведению видео продажи в вашем магазине Shopify становятся намного проще, чем если бы вы размещали видео непосредственно с YouTube, Wistia, Vimeo или других веб-сайтов видеохостинга.

С этой преамбулой давайте двигаться дальше и интегрировать SmartVideo с вашим магазином Shopify.

Как использовать Shopify + SmartVideo для видеохостинга электронной коммерции

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

Кроме того, вам нужна готовая учетная запись Swarmify. Ознакомьтесь с нашими доступными тарифными планами и выберите план, который идеально подходит для вашего бизнеса. Хотите узнать больше? Ознакомьтесь с нашим растущим списком тематических исследований.

Как добавить SmartVideo на страницу продукта Shopify

В разделе «Медиа» на странице администратора вашего продукта нажмите «Добавить медиа» и загрузите видео. Как только SmartVideo будет установлен на вашем сайте, видео будет доставлено из нашей глобальной сети доставки, однако оно по-прежнему будет отображаться в стандартном видеоплеере Shopify.

Чтобы отобразить видео в проигрывателе SmartVideo, необходимо разрешить SmartVideo автоматически конвертировать видео YouTube или Vimeo.

Для нашего образца продукта я позаимствовал обзорное видео с Unbox Therapy на YouTube.

Затем я пошел дальше и создал образец продукта с видео на YouTube. Вот как это выглядит в нашем примере магазина Shopify:

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

Во-первых, есть очевидный брендинг YouTube, который может не подойти вашему магазину Shopify.

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

В-третьих, вот как выглядит проигрыватель YouTube, когда пользователь запускает видео и ставит его на паузу:

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

Смотрите раздел "Еще видео"?

В этом разделе могут быть видео ваших конкурентов , что просто недопустимо. И когда ваш покупатель делится видео с друзьями, ссылка перенаправляет пользователей обратно на YouTube, а не в ваш магазин Shopify!

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

Или, как говорится, нет ничего лучше бесплатного обеда :)

Проще говоря...

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

Как добавить SmartVideo на стандартную страницу Shopify

После установки SmartVideo видео YouTube и Vimeo будут автоматически конвертироваться на вашем сайте, но самый простой способ добавить SmartVideo на обычную страницу Shopify — воспользоваться тегом SmartVideo.

В разделе содержимого панели администратора вашей страницы нажмите кнопку «Вставить видео» и вставьте тег SmartVideo в текстовое поле.

После установки SmartVideo (об этом мы поговорим в следующем разделе) видео будет видно на вашей странице:

Теперь, когда вы знаете, с чем мы работаем, давайте интегрируем Swarmify с вашим магазином Shopify и увидим разницу.

Скопируйте фрагмент конфигурации Swarmify

На момент написания у нас нет приложения Shopify. Это означает, что вы должны интегрировать Swarmify с Shopify вручную. Тем не менее, процесс прост, как A, B, C.

Что делать?

Войдите в свою панель управления Swarmify :

Панель инструментов Swarmify проста и удобна в использовании. Мы не утомляем вас бесполезными функциями. Мы держим его так, как вам нравится :)

Затем перейдите на вкладку « Конфигурация », как показано ниже.

На следующем экране выберите, есть ли у вас уже видео YouTube в магазине Shopify, и нажмите « Далее »:

Совет профессионала : лучше всего выбрать « Да », чтобы включить автоматическое преобразование YouTube. Я также выбрал « Да».

После этого выберите, есть ли у вас фоновые видео в магазине Shopify, и нажмите « Далее ». У меня нет фоновых видео, поэтому я выбрал « Нет »:

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

Если вы хотите изменить цветовую схему, выберите « Да » (1), выберите собственный цвет (2) и нажмите « Далее » (3), как показано на снимке экрана ниже.

У тебя фантастически получается :)

Затем выберите форму кнопки видеоплеера и нажмите « Далее ». На данный момент у нас есть три варианта: По умолчанию (Шестиугольный), Прямоугольник и Круг :

Затем выберите, хотите ли вы добавить собственный водяной знак к своим видео, и нажмите кнопку « Далее »:

Наконец, выберите, хотите ли вы включить рекламу в своих видео, и нажмите «Готово »:

Поскольку вы, вероятно, добавляете объясняющие видео в продукты Shopify, вам лучше обойтись без рекламы.

После этого нажмите «Копировать в буфер обмена », как мы подробно расскажем ниже.

Скопировав фрагмент Swarmify, вы готовы к следующей части: добавлению его в свой магазин Shopify.

Добавление фрагмента Swarmify в магазин Shopify

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

Не волнуйтесь, это просто :)

Войдите в панель инструментов магазина Shopify и нажмите « Интернет-магазин » в левом навигационном меню:

Затем нажмите Темы , как показано ниже.

После этого щелкните раскрывающееся меню « Действия » и выберите « Редактировать код» :

Затем нажмите {/} theme.liquid :

Прокрутите вниз, пока не увидите раздел с другим кодом JavaScript. Обычно он начинается с тега <script> . Вот скриншот в помощь:

Затем вставьте скопированный ранее фрагмент Swarmify над тегом <script> и нажмите « Сохранить », как показано ниже.

Вот и все!

Ваш магазин Shopify теперь подключен к Swarmify!

Потрясающе, правда?

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

Теперь вы можете продолжать загружать видео на YouTube и добавлять их в свой магазин Shopify. Swarmify будет кодировать, конвертировать и обслуживать все видео в красивом и удобном видеоплеере.

Знаете, как-то так:

Никакого брендинга YouTube, никаких ссылок и никаких отвлекающих факторов — просто видеоплеер без помех, который отлично выглядит, даже когда пользователь воспроизводит и приостанавливает видео :)

N/B : для оптимизации видео требуется время в зависимости от длины. Мое пробное видео длилось 3,58 минуты, поэтому я ждал около четырех минут :)

И как я узнал, что видео полностью оптимизировано? В видеоплеере вы увидите Ускорение видео: ВКЛ , как показано ниже.

То же видео, та же страница — разные результаты. Все, что могло бы откачать ваш трафик, исчезло.

Пуф! Все ушли.

Теперь вы можете держать своих покупателей там, где они вам нужны больше всего - на страницах ваших товаров :)

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

Вы бы не знали, что я получил видео с YouTube, если бы Unbox Therapy не сказал: «Пожалуйста, подпишитесь и следуйте за мной по ссылкам в описании… бла-бла…»

Кстати, он отличный парень, но я надеюсь, что вы поняли суть :)

Дальнейшая настройка видеоплеера

У нас есть пара тегов для дальнейшей настройки вашего видеоплеера.

N/B . В отличие от кода JavaScript, который мы добавили в раздел <HEAD> файла {/}theme.liquid , вы добавляете следующие теги SmartVideo непосредственно туда, где хотите отобразить видеоплеер. У нас есть отличный пример Shopify ближе к концу :)

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

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls></smartvideo>

Заметки:

• Замените « path/to/my/video.mp4» и « path/to/my/image.png» фактическими путями к вашему видео и постерному изображению соответственно.
• Вы можете настроить ширину и высоту вашего плеера по своему усмотрению

Для автоматического воспроизведения видео используйте следующий тег SmartVideo:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls muted autoplay></smartvideo>

Совет для профессионалов: если не используется параметр muted , многие браузеры будут ограничивать автовоспроизведение . Мы рекомендуем использовать автовоспроизведение только в сочетании с отключенным звуком . Кроме того, добавление playsinline необходимо для правильного воспроизведения в IOS/Safari при автоматическом воспроизведении.

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

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls muted></smartvideo>

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

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls loop></smartvideo>

Чтобы видео не воспроизводилось в полноэкранном режиме в Safari iOS, используйте:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls playsinline></smartvideo>

Чтобы сделать игрока невосприимчивым (фиксированная ширина и высота), удалите class="swarm-fluid" из своего тега.

N/B: Если вы используете YouTube в качестве источника видео:

• Измените все видео с «частных» на «не в списке». Таким образом, Swarmify сможет получать и обрабатывать ваши видео.
• Используйте правильную ссылку для встраивания, а не прямую ссылку на страницу. Например, используйте https://www.youtube.com/embed/wBp0Rb-ZJak (хорошо) вместо https://www.youtube.com/watch?v=wBp0Rb-ZJak (плохо) .

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

Рабочий пример Shopify

Чтобы проиллюстрировать, как использовать теги SmartVideo в Shopify, я добавлю видео на новую страницу Shopify.

Вы также можете добавлять теги SmartVideo в сообщения блога Shopify — процедура остается прежней.

Я использую то же видео из Unbox Therapy. Не забудьте использовать код для встраивания, а не прямую ссылку.

Таким образом, мой готовый тег SmartVideo выглядит так:

 <smartvideo src="https://www.youtube.com/embed/MPzBcvGtry8" width="1280" height="720" class="swarm-fluid" controls muted autoplay></smartvideo>

Затем войдите в систему администратора магазина Shopify, перейдите в « Интернет-магазин» > «Страницы» и добавьте новую страницу :

Обратите внимание, у меня совершенно новый магазин без страниц :) Если бы у вас были существующие страницы, вы бы увидели что-то вроде этого:

Это не имеет значения, вы можете либо отредактировать существующую страницу, либо нажать « Добавить страницу» , чтобы добавить новую. Это приведет вас к редактору страниц.

Затем добавьте заголовок на свою страницу и переключитесь на HTML, как показано ниже.

Затем скопируйте и вставьте тег SmartVideo и нажмите « Сохранить », как показано ниже:

Теперь, если вы просмотрите свою страницу в интерфейсе, вы увидите:

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

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

Заключительные слова

Swarmify — это новый стандарт видеохостинга. Объедините нашу технологию с Shopify, и у вас есть инструменты, чтобы предложить вашим нетерпеливым покупателям фантастические видео.

Мы предоставляем быстрое, настраиваемое и высококачественное видео для широкого круга компаний, таких как ваша. Это наша главная миссия, и с каждым днем ​​мы становимся лучше.

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