Shopify Theme Development with Git

In the early days of Shopify theme development, the online code editor provided by Shopify Admin was used for simple business needs, but this is not suitable for changing the entire theme.

What's exciting, however, is that in June 2021, Shopify launched the latest Github integration, making theme development and app development more efficient! And combined with the software testing and release process of the technology company itself.

Better development workflow

Install shopify cli's command line tool, which can quickly generate a Node.js development environment, make changes locally and sync those changes with the shopify website

brew tap shopify/shopify
brew install shopify-cli# init project a new theme
shopify theme init# or can init Existing git repository
shopify theme init [NAME] --clone-url=https://github.com/shopify/dawn.git# Authenticating with Shopify CLI
shopify login --store shoptestex.myshopify.com

Preview the developed theme in the local environment

Open the link http://127.0.0.1:9292 to watch the programs developed in the local environment, and also supports hot reloading

shopify theme serve

Install the Shopify GitHub integration

  1. Create a new repository on github and submit the developed theme to it
  2. From the shopify admin, go to Webshop → Themes
  3. In Set theme libraryAdd set theme from github link
  4. Log in to github and select the repository to connect to
  5. Find the connected topic and click Action → Post

Shopify Version Control Best Practices

When editing a theme through the shopify backend, any changes will be automatically submitted to github by shopify, so developers may encounter conflicts and errors when submitting to github.

So you should build a staging branch. When multiple developers develop features on the same store, they only deal with the staging branch. When the theme is ready to go live, then merge the staging branch into the master branch.

Install the Visual Studio Code plugin

theme check can check the liquid and json in the theme, which allows us to quickly detect errors during development

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

The above is a method that can deliver products more stably in terms of technical development. If you have any questions, please feel free to communicate with us.

推薦閱讀

【重點分享包】我多久得到我的第一個 Youtube 一萬訂閱
【重點分享包】我多久得到我的第一個 Youtube 一萬訂閱
本文重點整理 SEO 神器: Ubersuggest 的創辦人分享的 Youtube 三個戰術,希望對經營 Youtube 的品牌有幫助。 我到底花了多久呢?八個月,因為我試了無數的方法,這裏分享三個沒人討論過的初期策略,讓你能夠比...
繼續閱讀
怎麼避免品牌的郵件、Marketing Email 進入垃圾郵件夾?
怎麼避免品牌的郵件、Marketing Email 進入垃圾郵件夾?
掌握技巧,才有機會做出成果   一直以來,電子郵件營銷是很多企業或者個人推廣業務的重要手段,而隨著各電子郵箱服務商和服務器提供商對垃圾郵件的過濾機制越來越嚴格,營銷人員的工作也越來越具有挑戰性。 為了避免我們的郵件進入垃圾箱,...
繼續閱讀
Shopify allows merchants to accept bitcoin payments, how does this benefit brands?
Shopify allows merchants to accept bitcoin payments, how does this benefit brands?
What is Bitcoin? Bitcoin is the first virtual currency (also known as cryptocurrency) to be launched, and it is curr...
繼續閱讀