使用 Git 進行 Shopify 主題開發

早期做 Shopify 主題開發(Theme Development)時,用的是 Shopify Admin 提供的 online code editor 來做簡單的業務需求,不過這樣不太適合做整個主題的更動。

然而令人興奮的是,Shopify 在 2021 年六月推出了最新的 Github 整合,讓主題開發與 APP 開發可以更有效率!並且結合技術公司本身的軟體測試與發布流程。

更好開發工作流程

安裝 shopify cli 的命令行工具,它可以快速生成 Node.js 開發環境,在本地進行更改並將這些更改與 shopify 網站同步

brew tap shopify/shopify
brew install shopify-cli# 初始化專案一個新主題
shopify theme init# 或者可以初始化已經存在的 git repository
shopify theme init [NAME] --clone-url=https://github.com/shopify/dawn.git# 使用 Shopify CLI 進行身份驗證
shopify login --store shoptestex.myshopify.com

在本地環境預覽開發的主題

開啟連結 http://127.0.0.1:9292 就可以觀看本地環境開發的程式,另外也支援 hot reloading

shopify theme serve

安裝 Shopify GitHub 集成

  1. 在 github 建立新的 repository,將開發的主題提交上去
  2. 從 shopify 後台,轉到 網路商店 → 佈景主題
  3. 在 佈景主題庫 新增佈景主題從 github 連接
  4. 登錄 github 選擇要連接的 repository
  5. 找到連接的主題,然後點擊 動作 → 發佈

Shopify 版本控制最佳實踐

通過 shopify 後台編輯主題時,任何更改都會由 shopify 自動提交到 github,這樣當開發人員在提交到 github 有可能就會遇到衝突和錯誤。

所以應該建立一個 staging branch ,在多個開發人員在同一個商店上開發功能時,都只處理 staging branch,當主題準備上線時,再將 staging branch 合併到 master branch。

安裝 Visual Studio Code plugin

theme check 可以檢查主題中的 liquid 和 json,可以讓我們在開發時快速檢測錯誤

https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode

 
 以上為技術開發上可以更穩定交付產品的方法,如果有任何問題,也歡迎與我們交流。

推薦閱讀

Shopify 讓商家可以接受比特幣支付,這能為品牌商帶來什麼好處?
Shopify 讓商家可以接受比特幣支付,這能為品牌商帶來什麼好處?
比特幣是什麼? 比特幣(Bitcoin)是最早推出的虛擬貨幣(也稱加密貨幣),也是目前市值排名第一的虛擬貨幣。 這種虛擬貨幣不由中央銀行、政府機構所發行,只能使用電子(網路)方式進行交易、轉移、儲存,它只是一串代碼,並沒有實體,比特幣...
繼續閱讀
2022 年用 Shopify 建立一間網路商店/官網要多少錢?隱藏成本?開店費用總整理(上篇)
2022 年用 Shopify 建立一間網路商店/官網要多少錢?隱藏成本?開店費用總整理(上篇)
今年很多台灣電商品牌想以 Shopify 建站,Shopify 眾所周知的特色就是在設計及開發上有高度的自由、擴展性強,有成千上萬應用程式和佈景主題可以一鍵安裝到商店。但就像堆積木一樣,安裝越多功能就需要越高的費用,那 Shopify...
繼續閱讀
重點分享包:2021 台灣企業跨境關鍵報告發表會 - 貿易數據
重點分享包:2021 台灣企業跨境關鍵報告發表會 - 貿易數據
洞察海外潛力市場 如果您有經營跨境的數位電商、 平台或商務,那麼學習全球貿易數據的洞查將會是成功的關鍵之一。尤其以現況來說,在變種病毒的籠罩下,國際情勢每年每季每月都在變動中,也就是說各國的進口數據的變動會影響出口廠商的拓銷及行銷決策...
繼續閱讀