logo

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

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

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. 完了

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

※この記事は2024年02月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【1ドル×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。