電子商務視頻託管的完整 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 證書
• 放棄結賬恢復
• 靈活的運費和自動稅費
• 多種語言
• 如果您在新的 Google Advertising 帳戶上花費 25 美元，則可獲得 100 美元的 Google 廣告積分
• 無縫的社交媒體集成
• 無限帶寬
• 24/7 支持
• 還有更多！

如果您已經使用 Shopify，則無需我指出為什麼它是一個出色的電子商務平台。 如果您是一個技術技能為零的新手，那麼 Shopify 作為您的電子商務提供商永遠不會出錯。

為了讓交易更加甜蜜，Shopify 提供了價格實惠的計劃，起價僅為每月 9 美元。 如果您要開展新業務，他們的基本Shopify計劃（每月 29 美元）提供物超所值的服務。

也就是說，什麼是 Swarmify？

什麼是 Swarmify？

除非您是這裡的新手，否則 Swarmify 是一種獨一無二的視頻加速服務，可幫助您以 12 倍的速度向用戶提供視頻。

我們使用流媒體巨頭 Netflix 和 Hulu 使用的相同技術來提供無延遲和無緩衝的視頻體驗。

如果您在 Shopify 商店中使用（或計劃使用）視頻，我們會為您提供提高視頻加載速度所需的確切內容。

最重要的是，我們幫助您為您的買家提供完全定制的視頻體驗。

我們為您提供我們的 SmartVideo 播放器，而不是使用帶有 YouTube 品牌、鏈接和競爭對手推薦視頻的 YouTube 視頻播放器。

我們革命性的視頻播放器不包含任何品牌或鏈接。 它 100% 整潔，而且您可以在幾分鐘內對其進行自定義以匹配您的 Shopify 商店。

這就是為什麼許多像您這樣的企業家為其 Shopify 在線商店選擇 Swarmify SmartVideo 的原因。

Swarmify 主要功能

我們是該領域的領導者，並為您提供與我們的聲譽相匹配的功能。

• 無限帶寬，你知道的，就像 Shopify :)
• 無限存儲
• SmartCDN 視頻內容交付網絡 - 您的買家無論身在何處都能享受比行業平均速度快 12 倍的視頻
• 自動 YouTube 轉換 - 如果您已經使用 YouTube，並且您的 Shopify 商店中有一些 YouTube 視頻，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 視頻。

對於我們的示例產品，我借用了 YouTube 上 Unbox Therapy 的評論視頻。

然後我繼續創建了一個包含 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 儀表板簡單易用。 我們不會讓您陷入無用的功能。 我們按照您喜歡的方式保持精益 :)

接下來，單擊配置選項卡，如下所示。

在下一個屏幕上，選擇您的 Shopify 商店中是否已有 YouTube 視頻，然後單擊Next ：

專業提示：最好選擇“是”以打開 YouTube 自動轉換。 我也選擇了“是”。

之後，選擇您的 Shopify 商店中是否有背景視頻，然後單擊Next 。 我沒有背景視頻，所以我選擇了“否：”

在下一頁上，選擇是否要更改視頻播放器配色方案。

如果您想更改配色方案，請選擇是(1)，選擇您的自定義顏色 (2)，然後單擊下一步(3)，正如我們在下面的屏幕截圖中突出顯示的那樣。

你做得很棒:)

接下來，選擇視頻播放器按鈕形狀，然後單擊Next 。 目前，我們有三個選項：默認（六角形）、矩形和圓形：

接下來，選擇是否要為視頻添加自定義水印，然後單擊下一步按鈕：

最後，選​​擇是否要在視頻中啟用廣告，然後點擊Finish ：

由於您可能正在向 Shopify 產品添加解釋器視頻，因此最好不要使用廣告。

之後，單擊Copy to Clipboard ，如下所述。

複製您的 Swarmify 代碼段後，您就可以進行下一部分：將其添加到您的 Shopify 商店。

將 Swarmify 代碼段添加到 Shopify 商店

在以下部分中，我們將您剛剛複制的 Swarmify 代碼段添加到您的 Shopify 商店。

別擔心，這很簡單:)

登錄到您的 Shopify 商店儀表板，然後從左側導航菜單中單擊在線商店：

接下來，單擊Themes ，如下所示。

之後，單擊Actions下拉菜單，然後選擇Edit Code ：

接下來，點擊{/} theme.liquid ：

向下滾動，直到您看到包含其他 JavaScript 代碼的部分。 通常，它以<script>標記開頭。 這是一個屏幕截圖以提供幫助：

接下來，將您之前複製的Swarmify Snippet粘貼到<script>標記上方，然後單擊Save ，如下所示。

就是這樣！

您的 Shopify 商店現已連接到 Swarmify！

太棒了，對吧？

謝謝你這麼有耐心。 我不想跳過任何步驟，因為從一開始就做好這件事很重要:)

現在，您可以繼續將視頻上傳到 YouTube 並將它們添加到您的 Shopify 商店。 Swarmify 將在一個漂亮且整潔的視頻播放器中編碼、轉換和提供所有視頻。

你知道，是這樣的：

沒有 YouTube 品牌，沒有鏈接，也沒有乾擾 - 只是一個整潔的視頻播放器，即使在用戶播放和暫停視頻時看起來也很棒:)

N/B ：視頻需要時間根據長度進行優化。 我的示例視頻長 3.58 分鐘，所以我等了大約四分鐘 :)

我怎麼知道視頻已經完全優化？ 在您的視頻播放器上，您會看到Video Acceleration: ON ，如下所示。

相同的視頻，相同的頁面 - 不同的結果。 一切會吸引您的流量的東西都消失了。

噗！ 全沒了。

現在，您可以將買家放在最需要他們的地方 - 在您的產品頁面上 :)

視頻加載速度比普通播放器快 12 倍，新的整潔的播放器看起來令人驚嘆且專業。

如果 Unbox Therapy 沒有說“請訂閱並通過描述中的鏈接關注我……等等等等……”，你不會知道我是從 YouTube 獲得視頻的。

順便說一句，他是個好人，但我希望你明白這一點:)

進一步自定義視頻播放器

我們有幾個標籤可以進一步自定義您的視頻播放器。

N/B ：與我們添加到{/}theme.liquid文件的 <HEAD> 部分的 JavaScript 代碼不同，您可以直接在要顯示視頻播放器的位置添加以下 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結合使用，否則許多瀏覽器會限制autoplay 。 我們建議僅將autoplay與muted結合使用。 此外，添加playinline對於在 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 示例

為了說明如何在 Shopify 中使用 SmartVideo 標籤，我將向新的 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 標籤並單擊Save ，如下所示：

現在，如果您在前端查看頁面，您將看到：

我們的測試視頻在那裡 - 完成了背景視頻加速。 視頻開始自動播放，因為我的 SmartVideo 標籤包含自動播放並且被靜音。 您還可以在那裡看到所有控件。

這就是使用 SmartVideo 標籤進一步自定義您的視頻播放器的全部內容。 結合不同的標籤來達到你想要的結果。

最後的話

Swarmify 是視頻託管的新標準。 將我們的技術與 Shopify 相結合，您就擁有了為熱切的買家提供出色視頻體驗的工具。

我們為各種企業提供快速、可定制和高質量的視頻體驗，就像您的企業一樣。 這是我們的首要任務，我們每天都在做得更好。

不要相信我們的話，請查看我們的案例研究並了解其他企業如何通過 Swarmify 電子商務視頻託管來扼殺牠。