Shopify 和 WooCommerce 一直是全球電子商務市場中相當熱門的兩個解決方案,根據 Builtwith 的統計,目前全球的電子商務網站,約有 30% 使用 WooCommerce,Shopify 則有 22% 的市佔率,第三名是 Magento (8%),第四名則是 OpenCart (3%),另外則有 37% 使用其他各種不同的解決方案。
網路上有一些針對 Shopify 和 WooCommerce 就功能和費用的比較,由於每個商店都是不一樣的,因此你的商店所需要的整體費用,可能會根據你的商店所需要的功能而有所不同。在 WooCommerce 上有許多免費外掛也許就能滿足你的需求,但在 Shopify 上通常很少看到提供免費使用的應用程式,大多是提供免費試用期,這也跟 Shopify 本身的架構和客製化的方式有關,這在文章後段會提到。
本篇文章不針對你所需要的可能花費去做討論,而是從開發者客製化的角度去比較兩者之間的差異,讓你了解兩個系統在根本上的不同。
WooCommerce 的客製化方式
由於 WooCommerce 是需要自己去架設伺服器的軟體解決方案,因此你可以得到完全的掌控,這對於想要針對網站做很多客製化的人再適合不過了,在遵循 WordPress 和 WooCommerce 的客製化規範下,你可以針對網站做任何的修改,幾乎可以說沒有什麼是不可能的了。
前台
功能客製化的方式,最常見的就是透過 Actions 和 Filters 的方式來進行客製化,你可以將你的客製化程式放在子佈景主題的 functions.php 中,或是透過外掛的方式來進行客製化。
針對外觀的客製化,同樣的你也是可以使用佈景主題提供的 Actions 和 Filters 來進行客製化,如果你想針對版面做比較多的改動,你則可以透過覆寫範本 (Overriding Template) 的方式,將範本複製到你的子佈景主題下來進行客製化。如果想針對覆寫範本做更深入的了解,也歡迎參考我之前寫的文章:如何正確客製化 WooCommerce 。
以上是透過修改程式來達到客製化的目的,當然坊間有很多外掛可以讓你在不寫程式的狀況下進行客製化,不過基本上這些外掛也都是基於以上兩點來做客製的,知道原理後,將來要做什麼修改都難不倒你了。
後台
當然除了前台的客製化外,在後台 WooCommerce 的管理介面也提供了很多的 Actions 和 Filters 來讓你進行客製化,例如你可以修改訂單的列表表格,來顯示更多的欄位資訊。透過後台的 Actions 和 Filters,你可以將你新增的功能整合進原本 WooCommerce 的後台介面,讓使用者在操作的時候更加直覺方便。

若你不想直接在原本 WooCommerce 的介面上進行客製化,你也可以自己新增頁面,透過 WordPress 和 WooCommerce 提供的 API 來操作資料的讀寫,這也是很容易可以辦到的。

Shopify 的客製化方式
跟 WooCommerce 不同,Shopify 屬於 SaaS 服務,你不用管理主機,只要註冊帳號即可開始使用。也因為是 SaaS 服務,因此在客製化的彈性就不如 WooCommerce 來得高了。
前台
Shopify 一樣有很多佈景主題可以選擇使用,你也可以直接在線上修改佈景主題的檔案。

不過要注意的是 Shopify 沒有像 WooCommerce 提供覆寫範本的機制,這代表著當你使用的佈景主題推出了更新版本,若你直接更新,那麼你之前的客製化程式就會不見。你必須在更新之後,再將之前的客製化程式更新到新的佈景主題中,算是稍微麻煩一點。不過 Shopify 有幫你的佈景主題檔案做版本管理,所以你可以很輕易地檢視不同版本的內容。
關於如何在 Shopify 中更新佈景主題,可以參考官方的文件 Updating themes。

後台
前面提到,由於 Shopify 是 SaaS 平台,因此不可能允許你把客製化程式直接放在 Shopify 的雲端主機中,所以 Shopify 的功能客製化都必須透過應用程式 (App) 來處理,而應用程式必須透過 Shopify API 來存取商店的資料。
Shopify APP 可以大致分成以下三種:
- 公開的應用程式 (Public App)
- 客製化應用程式 (Custom App)
- 私密應用程式 (Private App)
如果想了解這三種 App 的不同,可以參考我之前寫的文章。
那麼到底什麼是一個 Shopify App? 我一開始也搞不懂,後來看了許多文章和教學影片後,終於理解了:
Shopify App 就是一個網站(Web)
所以若你要提供 Shopify 網站一些客製化的功能,基本上你就是要架設一個網站 (你可以用任何程式語言),在經過授權之後,透過 Shopify API 來存取資料。其中 Public App 和 Custom App 可以透過 Shopify App Bridge 的功能以 embedded app 的形式存在 Shopify 後台 (很神奇吧),商店管理者就可以直接在 Shopify 後台直接使用你寫好的 App 來操作功能。
下圖是我安裝的一個可以針對商品、訂單等資源設定客製化欄位的 App (可以想成 WordPress 中的 Advanced Custom Fields)。這個介面雖然看起來跟後台差不多,但其實這個是由 App 開發者(商) 所撰寫的 App。
跟 WooCommerce 可以直接在編輯商品的時候就輸入客製化欄位內容不同,在 Shopify 中你是無法在原本的 Shopify 介面中去做這件事的,任何的客製化功能都是在 App 的介面中來完成,這點我真的覺得超不直覺,例如當我原本在編輯商品時,若我要編輯這個商品的客製化欄位內容,我就要再進入 App 的設定介面,然後再找出我要修改的商品來輸入內容,整個編輯的流程會變得很麻煩。
但就如我前面所說的,由於 Shopify 是一個 SaaS 服務,因此他不太可能讓你去修改原本的介面,相對應的作法則是提供 API,讓你建立 App 透過 API 來跟 Shopify 的資料做互動,而你自己在 App 中的介面和功能要怎麼設計就是你自己可以發揮的了。

看到這邊也不難理解,為什麼 Shopify 的應用程式市集中,很少有完全免費的 App了,還記得 Shopify App 其實就是一個網站嗎?有網站就需要主機,誰會沒事花錢租一台主機然後讓你用免費的?如果有麻煩告訴我!
另外有一點要注意的就是,由於每一個 Shopify App 其實就是一個網站,因此網站和主機的穩定性就很重要了。曾遇過客戶買了一個 App,結果要設定資料的時候 App 掛點沒辦法使用,不過還好很快就恢復連線了,我想這也是這樣的架構所無法避免的事情。
最後,雖然本篇文章是就客製化的角度去分享兩個解決方案的不同,但有一點還是會影響到費用。就是如果你是針對單一客戶所開發的客製化 App (Custom App) 或是 私密 App (Private App),對客戶來說勢必會有一個額外的主機費用支出,而這是會隨著網站存在而一直產生的,你可以把它想成客戶架設了兩個網站,一個是 Shopify 本身的網站,另一個就是客製化 App 的網站。這點務必在客製化專案進行之前跟客戶說明。
結論
在好奇心使然的狀況下接觸了幾個 Shopify 專案,也讓我對 Shopify 的整體架構有了更深入的認識。就客製化彈性來說,我個人覺得 WooCommerce 還是完勝的,因為你可以很容易地去修改核心的功能。對於 Shopify 來說,由於是 SaaS 服務,所以我能夠理解它不讓你直接去修改內建的一些功能和介面,而是都要透過 API 來操作。
WooCommerce 雖然在修改的彈性上勝出,但是 WooCommerce 這樣的客製化方式存在著一個問題,因為任何的外掛和開發者都可以透過 Action 和 Filter 來修改後台介面和功能,所以外掛之間會存在著很高的衝突機率,當發生問題時,你就要一個個去檢查,看是哪一個外掛造成問題,另外也有可能因為外掛寫得不好,造成頁面載入速度過慢的問題。這是方便和彈性所帶來的可能問題。
相反地,Shopify 的客製化由於都要透過 API 來操作資料,你還必須要建立一個 App (架設一個網站),來處理客製化,但就不會有App 之間彼此衝突的問題,也不會因為某個 App 寫不好而影響別的 App 的操作,網站整體會穩定一些。這就是 Shopify 這樣的架構所帶來的好處。
WooCommerce | Shopify | |
使用方式 | 自行架設主機安裝 | 線上服務 (SaaS) |
客製化方式 | Actions、Filters、覆寫範本 | 客製化 App(需另外架設主機),透過 API 來存取資料 |
客製化彈性 | 較方便、自由度高 | 限制較多,較麻煩 |
外掛/App 衝突 | 機會高 | 無 |
在實際接觸了兩個電子商務解決方案之後,我覺得 WooCommerce 和 Shopify 各有各的優勢和劣勢,如果你想要自由度高一點,客製化彈性高,那 WooCommerce 絕對是你的首選。如果你不想擔心主機,且你的電商應用沒有太複雜的功能,現有的 App 即可滿足你的需求的狀況下,或許 Shopify 會是一個好選擇。
謝謝!這篇文章非常的好,比一般的 Shopify vs. WooCommerce 的文章都要好。一般的文章只是在強調二個系統的基本特性,但最重要的擴充部分,都避而不談。當然,理論上花錢可以解決問題,但如果花的錢太多,很多時候也就喪失了自建網站的優勢。 (附註:我試著登入 Facebook 發表迴響,但發生問題,連接不上 Facebook,即使已經確認 Facebook 的授權。)
Hi ian,
謝謝你的留言和讚美。其實不是大家避而不談,而是要同時有這兩個平台的開發經驗的人或公司少之又少,所以通常要討論的話也比較難以深入。如果你之後有什麼使用上的經驗也歡迎你跟大家分享喔!(那個 Facebook 登入發表留言的功能應該是壞掉了…)