Shopifyのテーマ開発環境を構築する

Shopifyのテーマ開発環境を構築する

公開日:2021年11月07日

更新日:2022年07月02日

Shopify CLIを使ったテーマ開発環境の構築からGitHubとの連携までをご紹介します。

 1. Shopify CLI のインストール

私はmacOSを使用していますので、Homebrewを使用してインストールします。

その他のOSをご使用の場合は、公式ドキュメントにしたがってインストールしてください。

$ brew tap shopify/shopify
$ brew install shopify-cli

VerifyしてShopify CLIのバージョンが表示されたらインストール完了です。

$ shopify version
2.3.0

 2. Shopify Partner アカウントへログイン

ご自身のShopify Partner アカウントおよびストアへログインします。

$ shopify login --store=https://[your-host-name].myshopify.com

※今回は、ストアのテーマを開発しますので "--store" フラグをつける必要があります。

 3. テーマの作成

Shopify公式テーマである Dawn を複製します。

$ shopify theme init [Folder Name]

※[Folder Name] にはフォルダにつけたい名前を指定してください。

 4. テーマをGitHubへアップロード

GitHubへ今回作成したテーマをアップロードします。

$ cd [Folder Name]
$ git init
$ git add .
$ git commit -m "my first commit"
$ git branch -M main
$ git remote add origin git@github.com:[your github name]/[your github repository name].git
$ git push -u origin main

※[your github name] にはご自身のGitHubアカウント名を指定してください。※[your github repository name] にはご自身のリポジトリ名を指定してください。

 5. GitHubとShopifyと連携する

Shopifyの管理画面よりテーマを連携します。

1. GitHubから接続するをクリック

2. GitHubアカウントを選択

3. 先ほど作ったリポジトリを選択

4. 接続をクリック

5. 完了

以上の手順でテーマ開発環境の構築は完了です。お疲れ様でした!!!

※この記事は2022年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。

株式会社5-bit

2020年1月に、カナダのShopify本社より「Shopifyエキスパート」として認定をいただきました。現在までに累計で50以上のShopifyストアの構築、1000以上の機能開発経験。他社で難しい要件の実装や構築も承ります。

お問い合わせはこちら

Our Contents私たちの情報発信

ShopifyにAmazon Payを導入するメリットや設定方法を解説

Shopifyのテーマ開発環境を構築する

Shopifyのストアフロントフィルタにメタフィールドが追加されたので使ってみた

Shopifyの新着商品一覧に期間限定(公開から〇〇日以内)で商品を掲載する方法

Shopifyの注文情報をGASでCSV出力する方法

Shopifyの全商品一覧(collections/all)に表示される商品を制御する方法

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyのクーポンを特定のユーザーにのみ適用させる方法

ブログ一覧