Shopify vs. WooCommerce 客製化 – 從開發者的觀點

Shopify 和 WooCommerce 一直是全球電子商務市場中相當熱門的兩個解決方案,根據 Builtwith 的統計,目前全球的電子商務網站,約有 30% 使用 WooCommerce,Shopify 則有 22% 的市佔率,第三名是 Magento (8%),第四名則是 OpenCart (3%),另外則有 37% 使用其他各種不同的解決方案。

2020/10/27 截止的統計

網路上有一些針對 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 客製化訂單清單欄位
可以自由地調整訂單列表的欄位,或是新增功能,例如產生貨運的托運單等功能

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

WooCommerce 客製化訂單出貨管理
針對不同人員和單位的訂單出貨管理介面

Shopify 的客製化方式

跟 WooCommerce 不同,Shopify 屬於 SaaS 服務,你不用管理主機,只要註冊帳號即可開始使用。也因為是 SaaS 服務,因此在客製化的彈性就不如 WooCommerce 來得高了。

前台

Shopify 一樣有很多佈景主題可以選擇使用,你也可以直接在線上修改佈景主題的檔案。

Shopify theme 佈景主題客製化

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

關於如何在 Shopify 中更新佈景主題,可以參考官方的文件 Updating themes

Shopify 佈景主題檔案版本紀錄
佈景主題的檔案版本紀錄

後台

前面提到,由於 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了,還記得 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 這樣的架構所帶來的好處。

WooCommerceShopify
使用方式自行架設主機安裝線上服務 (SaaS)
客製化方式Actions、Filters、覆寫範本客製化 App(需另外架設主機),透過 API 來存取資料
客製化彈性較方便、自由度高限制較多,較麻煩
外掛/App 衝突機會高

在實際接觸了兩個電子商務解決方案之後,我覺得 WooCommerce 和 Shopify 各有各的優勢和劣勢,如果你想要自由度高一點,客製化彈性高,那 WooCommerce 絕對是你的首選。如果你不想擔心主機,且你的電商應用沒有太複雜的功能,現有的 App 即可滿足你的需求的狀況下,或許 Shopify 會是一個好選擇。

在〈Shopify vs. WooCommerce 客製化 – 從開發者的觀點〉中有 2 則留言

  1. 謝謝!這篇文章非常的好,比一般的 Shopify vs. WooCommerce 的文章都要好。一般的文章只是在強調二個系統的基本特性,但最重要的擴充部分,都避而不談。當然,理論上花錢可以解決問題,但如果花的錢太多,很多時候也就喪失了自建網站的優勢。 (附註:我試著登入 Facebook 發表迴響,但發生問題,連接不上 Facebook,即使已經確認 Facebook 的授權。)

    回覆
    • Hi ian,

      謝謝你的留言和讚美。其實不是大家避而不談,而是要同時有這兩個平台的開發經驗的人或公司少之又少,所以通常要討論的話也比較難以深入。如果你之後有什麼使用上的經驗也歡迎你跟大家分享喔!(那個 Facebook 登入發表留言的功能應該是壞掉了…)

      回覆

發佈回覆給「王昱程」的留言 取消回覆

%d 位部落客按了讚: