還在用 Shopify 後台的線上編輯器一行一行修改主題嗎?老實說,這種工作方式真的太沒效率了。在我協助多個品牌進行 Shopify 開發的經驗中,發現許多開發者還在用最傳統的方式工作——每次修改都要等同步,預覽要重新整理,部署更是一個個檔案上傳。這種工作流程不僅耗時,還容易出錯。

Shopify CLI 的出現徹底改變了這個局面。透過終端機,你可以在本機建立主題、即時預覽變更、直接部署到正式環境,整個開發流程一氣呵成。更重要的是,新版 Shopify CLI 已經改用 TypeScript 重新實作,完全移除了 Ruby 的依賴,開發伺服器啟動速度大幅提升,對 Liquid 主題的更新幾乎是即時同步。

為什麼要用 Shopify CLI?

從實務角度來看,Shopify CLI 帶來的不只是速度提升。對於正在建立 D2C 品牌的團隊來說,能夠將主題開發整合進現代化的工作流程中至關重要。你可以使用 Git 進行版本控管、建立分支進行功能開發、透過 Pull Request 進行 Code Review,甚至串接 CI/CD 自動化部署。

這種開發方式特別適合以下情境:

團隊協作開發: 多人同時開發不同功能時,本機開發配合 Git 分支可以避免互相干擾,每個人都有獨立的開發環境。

客製化需求: 對於需要深度客製化的電商品牌,能在本機使用熟悉的編輯器和開發工具,開發效率會比線上編輯器高出數倍。

Headless Commerce 架構: 如果你的團隊正在考慮 Headless Shopify 架構,CLI 工具讓你能更靈活地管理前端主題,為未來的架構轉型做好準備。

五分鐘完成安裝與設定

Shopify 官方建議使用 Node.js 套件管理工具來安裝 CLI。根據你的作業系統,可以選擇不同的安裝方式:

macOS 使用者: 最簡單的方式是透過 Homebrew 安裝。先加入 Shopify 官方的 tap,然後執行安裝指令。

brew tap shopify/shopify
brew install shopify-cli

Windows 或 Linux 使用者: 建議使用 npm 進行全域安裝,確保你的 Node.js 版本在 14.0 以上。

npm install -g @shopify/cli@latest

安裝完成後,第一步是登入你的 Shopify 商店。在專案資料夾中執行登入指令,系統會自動開啟瀏覽器進行授權:

shopify login --store your-store.myshopify.com

授權完成後,CLI 就綁定到指定的商店,接下來所有主題操作都不需要再透過網頁後台。這個設定過程大約只需要五分鐘,但能為你省下無數個小時的重複操作時間。

本機開發工作流程

登入後,就可以開始真正的開發工作。首先要把現有的主題拉到本機:

shopify theme pull --store your-store.myshopify.com

這個指令會將選定主題的所有檔案同步到本機,包含 Liquid 範本、Section 區塊、Snippet 片段、Assets 資源等等。整個主題結構會完整呈現在你的專案資料夾中。

對於習慣使用 VS Code 或其他現代編輯器的開發者來說,這種方式帶來的生產力提升是巨大的。你可以使用程式碼自動完成、語法高亮、快速搜尋替換等功能,這些都是線上編輯器無法提供的。

即時預覽與開發環境

當你準備開始修改主題時,在專案資料夾執行開發指令:

shopify theme dev

這個指令會做幾件事情:

  1. 建立一個獨立的開發用主題
  2. 啟動本機開發伺服器
  3. 產生一個可分享的預覽網址
  4. 監聽檔案變更並即時同步

最棒的是,所有變更都會即時反映在預覽網址上,不需要手動重新整理頁面。這個預覽網址可以分享給設計師或客戶,讓他們即時查看開發進度,不會影響到正式網站。

這種工作方式對於網站開發團隊來說特別有價值。前端工程師可以專注在切版和功能實作,不需要擔心會影響到正在運行的電商網站。而且因為是獨立的開發環境,可以放心測試各種修改,不用擔心出錯。

部署與發布流程

開發完成並確認沒問題後,就可以進行部署。Shopify CLI 提供兩個部署相關的指令:

推送到遠端主題: 將本機修改上傳到指定的主題(不會立即啟用)

shopify theme push

發布為正式主題: 將指定主題設定為商店的正式啟用主題

shopify theme publish

這種分離的設計很實用。你可以先把開發完成的主題推送上去,讓團隊成員或客戶在後台預覽確認,確定沒問題後再執行發布指令,將新版本設為正式主題。

整個流程完全在終端機完成,可以很容易地整合進自動化工作流程中。舉例來說,你可以設定 GitHub Actions,當特定分支合併到主分支時,自動執行測試並部署到開發環境,等待人工確認後再發布到正式環境。

Shopify CLI 主題開發指令速查表

指令 功能說明 使用時機
shopify theme init 建立全新的主題專案骨架,自動產生基本檔案結構 從零開始打造自訂主題,不想基於現有主題修改時使用
shopify theme pull 從商店下載指定主題的完整檔案到本機 需要在本機修改現有主題、建立版本控管時使用
shopify theme dev 啟動本機開發伺服器,建立開發環境並提供即時預覽 進行切版、調整 Liquid/CSS/JS,需要即時查看變更效果時使用
shopify theme push 將本機修改上傳到商店的指定主題 開發完成,要將變更同步到遠端主題時使用
shopify theme publish 將指定主題設定為商店正式啟用的主題 新版本已測試完成,準備正式上線時使用
shopify app generate extension 在現有 App 專案中產生 Theme App Extension 需要開發可在主題編輯器中拖拉的應用程式區塊時使用

進階開發技巧與最佳實踐

在實際專案中,我發現以下幾個做法能讓開發流程更順暢:

建立清晰的 Git 工作流程: 為不同功能建立獨立分支,使用描述性的分支名稱如 feature/new-product-page 或 fix/cart-button-styling。這樣團隊成員能清楚知道每個分支的目的。

設定 .gitignore 檔案: 某些自動產生的檔案不需要納入版本控管。在專案根目錄建立 .gitignore 檔案,排除像是 config/settings_data.json 這類經常變動的設定檔。

使用 Theme Kit Config: 雖然新版 CLI 已經很強大,但在某些情況下搭配 Theme Kit 的設定檔可以更靈活地控制同步行為。

定期備份: 即使有版本控管,定期備份整個主題到其他地方仍是好習慣。你可以用 shopify theme pull 定期將最新版本下載到備份資料夾。

對於計畫採用 Headless Commerce 架構的團隊,Shopify CLI 提供的本機開發能力更顯重要。你可以將 Shopify 作為無頭的後端系統,使用 Storefront API 獲取資料,而前端則完全客製化開發。CLI 工具讓你能在這種架構下仍保持高效的開發流程。

Theme App Extensions 擴充功能

除了基本的主題開發,Shopify CLI 還支援開發 Theme App Extensions。這是一種進階功能,讓你能建立可在主題編輯器中拖拉配置的應用程式區塊。

對於 SaaS 開發者或代理商來說,這個功能特別有價值。你可以開發功能模組,讓商家在不修改程式碼的情況下,直接在主題編輯器中啟用和配置功能。這大幅降低了功能整合的技術門檻。

要建立 Theme App Extension,在現有的 App 專案中執行:

shopify app generate extension

系統會引導你選擇擴充功能類型,並自動產生所需的檔案結構。開發完成後,商家只需要在主題編輯器中拖入你的 App Block,就能使用功能,不需要修改任何程式碼。

效能優化與除錯

在開發過程中,效能優化是不能忽視的重點。Shopify CLI 的開發伺服器會自動編譯和優化資源,但還是有一些手動優化空間:

圖片最佳化: 使用適當的圖片格式和尺寸。電商網站的圖片通常佔據最多載入時間,確保產品圖片已經過壓縮和優化。

Liquid 程式碼效能: 避免在迴圈中執行複雜的邏輯運算。善用 Liquid 的 Filter 和內建函式,而不是自己寫複雜的條件判斷。

CSS 和 JavaScript 精簡: 開發時可以使用未壓縮的版本方便除錯,但部署前要確保所有資源都已經過最小化處理。

使用瀏覽器開發工具: 搭配 Chrome DevTools 或 Firefox Developer Tools,可以即時檢查頁面效能、網路請求、JavaScript 錯誤等資訊。

當遇到問題時,CLI 的終端機輸出會顯示詳細的錯誤訊息。善用這些訊息能快速定位問題。如果是 Liquid 語法錯誤,訊息會明確指出錯誤位置;如果是檔案同步問題,訊息也會說明原因。

團隊協作最佳實踐

對於有多人協作需求的團隊,AI 輔助開發工具能進一步提升效率。現在許多開發者會搭配 GitHub Copilot 或 Claude 這類工具來輔助撰寫 Liquid 程式碼,大幅減少重複性的程式碼撰寫工作。

明確的開發規範: 建立團隊統一的程式碼風格指南,包含命名規則、註解規範、檔案組織方式等。這能減少程式碼審查時的爭議。

定期同步與溝通: 在使用 CLI 進行本機開發時,團隊成員要定期同步進度,避免修改衝突。可以使用像 Slack 或 Discord 這類協作工具保持溝通。

Code Review 流程: 所有變更都應該經過至少一位其他團隊成員審查後才合併。GitHub 或 GitLab 的 Pull Request 功能很適合這個流程。

測試環境管理: 為不同階段設定不同的主題環境——開發、測試、預發布、正式。這樣可以確保變更經過充分驗證才上線。

常見問題解決

在使用 Shopify CLI 的過程中,可能會遇到一些常見問題。以下是我整理的解決方案:

同步速度慢: 如果檔案同步很慢,檢查網路連線狀態,或者試著只同步修改過的檔案而不是整個主題。

登入授權失效: 定期需要重新執行 shopify login 更新授權。這是正常的安全機制。

檔案衝突: 當多人同時修改同一個檔案時可能產生衝突。使用 Git 的合併工具解決衝突,或者透過團隊溝通避免同時修改相同檔案。

預覽網址無法存取: 檢查防火牆設定,確保沒有阻擋 CLI 建立的本機伺服器。某些企業網路環境可能需要額外設定。

未來發展趨勢

Shopify 持續投入資源改善 CLI 工具。根據 Shopify 官方部落格的更新,未來會有更多功能加入,包含:

更好的 TypeScript 支援: 讓使用 TypeScript 開發主題更容易,提供完整的型別定義。

改進的除錯體驗: 更直觀的錯誤訊息和除錯工具,縮短問題排查時間。

AI 輔助開發: 整合 AI 工具提供程式碼建議和自動完成,進一步提升開發效率。

更靈活的部署選項: 支援更複雜的部署策略,如藍綠部署、金絲雀發布等。

從傳統開發到現代化工作流程

回顧過去幾年的發展,Shopify 生態系統的開發方式已經有了巨大轉變。從最早期只能在後台線上編輯器修改,到現在可以使用 CLI 工具在本機開發,整個開發體驗已經接近主流的前端開發工作流程。

這個轉變對於電商產業來說意義重大。品牌不再需要受限於平台的侷限,可以更靈活地客製化線上商店,提供獨特的購物體驗。而對開發者來說,能使用熟悉的工具和流程進行開發,大幅降低了學習成本和開發門檻。

Shopify CLI 只是整個開發工具鏈的一部分。當你將它與版本控管系統、自動化測試、持續整合部署等現代開發實踐結合時,就能建立一個真正專業的電商開發流程。這不僅提升開發效率,也確保了程式碼品質和網站穩定性。

加速你的電商開發旅程

如果你正在考慮優化 Shopify 商店的開發流程,或是計畫建立更複雜的電商解決方案,不妨考慮尋求專業協助。

在 Tenten,我們專注於協助品牌實現數位轉型,從 Shopify 客製化開發到 Headless Commerce 架構規劃,我們都有豐富的實戰經驗。我們的團隊不只懂技術,更了解電商產業的商業邏輯,能為你的品牌量身打造最適合的解決方案。

無論你是正在起步的新創品牌,還是尋求數位升級的成熟企業,我們都能提供專業的諮詢服務。從技術選型、架構設計、開發實施到長期維護,全方位協助你的電商業務成長。

立即預約諮詢,讓我們一起討論如何運用現代化的開發工具和方法,為你的電商事業創造更大價值。

參考資源與延伸閱讀

關於作者

Ewan 是 Tenten 的資深數位策略顧問,專注於電商技術與數位轉型領域超過十年。他協助過多個品牌從傳統零售轉型為 D2C 電商模式,對 Shopify 生態系統和 Headless Commerce 架構有深入研究。

在實務工作中深刻體會到開發效率對電商成功的重要性。許多品牌在發展初期因為技術債務和低效的開發流程,錯失了快速回應市場的機會。因此他特別重視現代化開發工具的導入和團隊能力的培養。如果你對電商開發或數位轉型有任何問題,歡迎透過 Tenten 與他聯繫。