Zenn
🎟

【Shopify.dev和訳】Themes/Getting Started/Create a theme

2021/09/11に公開
Shopify
#
themes
tech

この記事について

この記事は、Themes/Getting Started/Create a themeの記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

テーマの作成

新しいテーマを作成する準備が整いました。あなたは自分自身に問いかけているかもしれません。どうすれば素早く開発環境を整え、コーディングを始めることができるのでしょうか？

このチュートリアルでは、Shopify CLI、Dawn、Shopify GitHub インテグレーションを使って新しいテーマを作成し、Shopify にアップロードします。

学ぶこと

このチュートリアルを終えると、以下のことができるようになります。

  • ローカルの開発環境を整える
  • Shopify のリファレンステーマである Dawn のクローンを作成する。
  • ローカルコードに加えられた変更をプレビューする
  • バージョン管理をテーマ開発プロセスに組み込む
  • テーマのコードを Shopify ストアに送り、テーマを公開する。

始める前に

テーマの開発を始める前に、以下のことを行ってください。

  • 開発ストアを使ってテーマを作りたい場合は、Shopify パートナーアカウントを作成するかログインしてから、開発ストアを作成してください。このチュートリアルでは、開発ストアの使用をお勧めします。
  • johns-apparel.myshopify.com のような、作業したいストアの URL をメモしてください。
  • ストアに接続するための GitHub 組織またはアカウントを入力します。
  • 作業するストアのコラボレーターアカウントまたはスタッフアカウントに、Manage themes 権限または Themes 権限が与えられていることを確認します。

ステップ 1：Shopify CLI のインストール

Shopify CLI は Shopify のテーマを構築するのに役立つコマンドラインツールです。ローカルで開発しながら、テーマのプレビュー、テスト、変更の共有ができます。以下の指示に従って、Shopify CLI を macOS または Windows にインストールしてください。他のプラットフォームについては、Shopify CLI のインストールを参照してください。

macOS (Homebrew)

brew tap shopify/shopify
brew install shopify-cli

Windows (RubyGems.org)

gem install shopify-cli

ステップ 2：Dawn を使った新しいテーマの初期化

shopify theme init を使って、Dawn の Git リポジトリをローカルマシンにクローンします。

Dawn は Shopify のリファレンステーマで、パフォーマンス、柔軟性、使いやすさを重視して作られています。Dawn はテーマ構築の出発点として使うことができます。

  1. ターミナルで、Dawn のクローンを作成する作業ディレクトリに移動します。
  2. 次のコマンドを入力します。
shopify theme init
  1. my-new-theme-project など、テーマの名前を入力するように促されます。テーマは同じ名前のフォルダにクローンされます。
  2. テーマがクローンされたら、そのフォルダに移動します。
cd my-new-theme-project

ステップ 3：Shopify CLI での認証

shopify login を使って、Shopify CLI と作業したいストアを接続します。

  1. ターミナルで shopify login --store <DOMAIN> と入力します。<DOMAIN> はログインしたいストアです。
shopify login --store johns-apparel.myshopify.com
  1. ブラウザウィンドウで、開発に使用したいストアに付随するアカウントにログインします。

ステップ 4: テーマのプレビュー

テーマを初期化した後、ブラウザでテーマと対話するために shopify theme serve を実行できます。Shopify CLI は、接続されているストア上で開発用テーマとしてテーマをアップロードします。

このコマンドは、CSS やセクションのローカルな変更をホットリロードする URL を返すので、ストアのデータを使ってリアルタイムに変更をプレビューすることができます。このプレビューは、Google Chrome でのみ利用できます。

テーマを提供するには、次のコマンドを実行します。

shopify theme serve

Google Chrome で、http://127.0.0.1:9292 に移動して、テーマのプレビューを開きます。

ステップ 5：テーマを新しい GitHub リポジトリにプッシュする

空の GitHub リポジトリを作成して、そこにテーマのコードを追加することができます。

ステップ 6：Shopify GitHub インテグレーションをインストールして、ブランチをストアに接続する

Shopify GitHub インテグレーションを使うと、1 つ以上の GitHub アカウントや組織を Shopify 管理者に接続し、Git ブランチをストアのテーマに接続することができます。この接続により、テーマコードへの変更を行い、追跡することができます。また、他の開発者との共同作業や、進捗状況をリアルタイムに共有することもできます。

初期化されたテーマをコミットした後、リポジトリのブランチをストアに接続することができます。ブランチの内容は、新しい未公開テーマとして、テーマライブラリに追加されます。

このチュートリアルで新規開発ストアを使っている場合は、ストア作成後の最初のログインでは GitHub との連携を設定することができません。GitHub への接続を成功させるには、一度ストアからログアウトして、パートナーダッシュボードから再度ログインする必要があります。

  1. Shopify の管理画面から、Online Store > Themesに進みます。
  2. テーマライブラリセクションで、Add theme > Connect from GitHubをクリックします。
  3. GitHub にログインします。 4. Shopify Online Store の GitHub アプリを認証してインストールするように促されます。アプリを個人のアカウントにインストールするか、組織のためにインストールするかを選択します。

  1. 組織に属するリポジトリを接続する場合は、リポジトリが属する組織を選択します。

  2. 接続するリポジトリを選択して、接続するブランチを選択します。

テーマがテーマライブラリに表示されます。GitHub に接続されたテーマは、テーマカードにリポジトリ、ブランチ名、最後のコミットの時間が表示されます。

最初の接続が完了すると、選択したブランチへのすべてのコミットがテーマに取り込まれ、Shopify 管理画面で行ったすべての変更がブランチにプッシュされます。

ステップ 7: 接続のテスト

テーマのコードにちょっとした変更を加えることで、テーマが GitHub ブランチに接続されているかどうかをテストできます。この例では、テーマの名前を更新してから、テーマエディタで検証します。

  1. エディタでリポジトリを開きます。Shopify の管理画面で、あなたのテーマに接続されているブランチにいることを確認してください。
  2. config フォルダに移動して、settings_schema.json を開きます。
  3. theme_infoノードで、Shopify CLI を使ってテーマにつけた名前に合わせてテーマ名を更新します。
  4. 変更を保存してコミットし、GitHub にプッシュします。
  5. Shopify の管理画面から、テーマページを開きます。
  6. テーマライブラリの中で、あなたのブランチに接続されているテーマを見つけます。最終保存日は、ブランチにコミットをプッシュした時間と一致している必要があります。
  7. カスタマイズをクリックして、テーマエディタを開きます。リポジトリ名とブランチ名の横にある，メニューボタン ⋯ をクリックしてください．メニューのテーマ名は，settings_schema.jsonで入力した値と一致していなければなりません．

ステップ 8: テーマの公開

作成したテーマをストアで公開したい場合は、テーマを公開します。この例のテーマは GitHub のブランチに接続されているため、Shopify admin またはShopify CLIを通して公開する必要があります。これは、GitHub ブランチは未公開のテーマとしてしか接続できないためです。

GitHub ブランチに接続されているテーマを公開すると、ブランチとテーマの接続が維持されます。GitHub ブランチに変更を加えることで、公開したテーマを変更することができます。たとえば、mainブランチに接続されたテーマを公開し、そこに変更をマージしてテーマの新機能を展開することができます。Shopify の GitHub 統合におけるブランチ戦略についてはこちらをご覧ください。

  1. Shopify の管理画面から、Online Store > Themesに進みます。
  2. Theme libraryのセクションで、公開したいテーマを見つけ、Actions→Publishをクリックします。
  3. Publish...ウィンドウでPublishをクリックします。

次のステップ

当社のツールを使って最初のテーマを作成することは、テーマ構築の最初のステップに過ぎません。次のステップを考えてみましょう。

もし、あなたが顧客や自分の店のためにテーマを作っているのであれば、これらの機能の中から選ぶことができます。Shopify テーマストア用にテーマを作成する場合は、これらの機能のいくつかはテーマに含まれている必要があります。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます