【2024年最新版】Shopifyテーマ自作を始める手順

この記事の所要時間：10分

Shopifyでテーマ開発を始めるに当たっては、状況に応じて以下の判断をする必要があります。

• Online Store2.0を採用するか、しないか
• Shopify Theme Kitを使うか、Shopify CLIを使うか
• 既存のテーマからカスタマイズするか、ゼロから開発するか

本記事では、これらの判断を下す際に参考にできる基準を紹介したあとに、テーマの自作を始める手順を紹介します。

Online Store2.0を採用するべきか

Shopifyは2021年6月のカンファレンスで、テーマ開発における大きなアップデートを発表しました。

アップデート後のテーマはOnline Store2.0と呼ばれ、テーマ開発の前提や、テーマのアーキテクチャが変わりました。

Online Store2.0以前のテーマも引き続きサポートされるので、テーマ開発者はOnline Store2.0に対応するかどうかを判断する必要があります。

Online Store2.0とは

Online Store2.0では、オンラインストアのWebページがSectionsというコンポーネントによって構成され、Sectionsの開発がテーマ開発の中心となりました。

マーチャントからみたSectionsは、究極的にカスタマイズ可能なデザインの部品です。

マーチャントはShopifyの管理画面で、Webページに新しいSectionsを差し込んだり、差し込む位置をドラッグ&ドロップで変更したり、Sections内の文字や色さえも変更することができます。

一方、テーマ開発者からみたSectionsは、Webページのあらゆる場所に差し込まれる可能性があるUIコンポーネントです。

開発者は、Sectionsをうまく設計することで、同じコードを繰り返し書かなくてよくなったり、コーディングができない方にもデザインの変更を任せられるようになります。

しかし、どこからどこまでを1つのSectionsとするのかや、Sections内の何を設定値とするのかといった判断には、相応の設計力が求められますし、テーマ開発者はSectionsがページ内のどこに挿入されてもおかしな動きをしないように注意深く実装する必要があります。

判断基準

ご自身の状況と、以下の判断基準を元に、Online Store2.0対応を検討してみてください。

• マーチャントにとっては、Online Store2.0の方がカスタマイズ性が高いため、好ましいでしょう。
• デザインの変更が多く行われる場合は、コーディングができない方でもデザイン変更を行えるOnline Store2.0の方が好ましいでしょう。
• Online Store2.0に対応するにはある程度時間がかかるので、テーマの開発を少しでも早く終わらせたい場合は対応しない方が好ましいかもしれません。
• これから多くのテーマを開発する予定のShopifyパートナーにとっては、テーマ間でSectionsを使い回しやすいOnline Store2.0の方が好ましいかもしれません。
• テーマ開発者が設計力に自信がある場合は、コードの重複を最小化できるため、Online Store2.0の方が好ましいかもしれません。

Shopify Theme KitとShopify CLIのどちらを使うべきか

Shopifyのテーマ開発は管理画面からでも行えますが、本格的な開発にはローカルの開発環境が必要不可欠です。

Shopifyは、ローカル環境でのテーマ開発を支援するためにCLIを提供しています。

現在、Shopifyによって推奨されているのは、Shopify Theme KitとShopify CLIの2つです。

Shopify CLIは、Shopify Theme Kitより後に発表されており、Shopify Theme Kitの機能をほぼ引き継いでいます。

Shopify CLIは、Shopify Theme Kitの機能に、Online Store2.0対応を加えたものです。

Shopifyは、Online Store2.0に対応したテーマを開発する場合はShopify CLIの使用を推奨し、Online Store2.0に対応しないテーマを開発する場合はShopify Theme Kitの使用を推奨しています。

既存のテーマからカスタマイズするか、ゼロから開発するか

Shopifyテーマストアには、多くのテーマが公開されています。これらの中にはShopifyが提供する無料のテーマもあります。

これから開発しようとしているテーマにデザインが近いものを見つけられれば、それをベースとすることで開発にかかる時間を短くできるかもしれません。

一方、これから開発しようとしているテーマが特殊なものであればゼロから開発する方が早いかもしれません。

既存のテーマからカスタマイズするか、ゼロから開発するかは、状況に応じてご自身で判断するしかありません。

少なくとも、あなたがテーマ開発にあまり詳しくなければ、無料のテーマをローカル環境にダウンロードして、ディレクトリ構造やコードを眺めることをオススメします。

そうすることで、短時間で多くのことを学ぶことができるでしょう。

テーマ開発を始める手順

上記の判断を下したあとは、実際にテーマ開発を始めてみましょう。

ストアのセットアップ

まず最初に、Shopifyでストアを作成する必要があります。

ストア作成が済んでいない方は、コチラを参考にストアを作成してください。

あなたがShopifyパートナーで、パートナーアカウントに既に公開されているストアしかない場合は、別で開発ストアを作成することをおすすめします。

CLIのインストール

次にローカル開発環境にCLIをインストールします。

下記のコマンドで、Shopify Theme KitかShopify CLIのどちらかをインストールしてください。

Shopify Theme Kitのインストール

Linux, macOS, WindowsのそれぞれでShopify Theme Kitをインストールするコマンドは以下になります。

ターミナルまたはコマンドプロンプトでコマンドを実行してください。

$ curl -s https://shopify.dev/themekit.py | sudo python

$ brew tap shopify/shopify
$ brew install themekit

$ choco install themekit

Shopify CLIのインストール

Shopify CLIは、Ruby(バージョン2.7以上)に依存しているため、まずはRuby(バージョン2.7以上)がインストールされているか確認し、必要に応じてインストールしてください。

Rubyがインストールされている環境では、OSに関わらず、Shopify CLIをgemとしてインストールできます。

$ gem install shopify-cli

Homebrewやapt、yumを備えている環境では、それらのパッケージ管理システムを通じてインストールすることもできます。

$ apt install /path/to/download/shopify-cli-x.y.z.deb

$ yum install /path/to/download/shopify-cli-x.y.z.rpm

Shopify CLIをインストールしたら、以下のコマンドでストアと接続します。

$ shopify login --store [ストアのドメイン]

API情報の取得

テーマ開発では、プライベートアプリのAPI情報を使用するため、まずはプライベートアプリを作成します。

ストアの管理画面から「アプリを管理 > プライベートアプリを管理する」をクリックします。

プライベートアプリ開発が無効になっている場合は、「プライベートアプリの開発を有効にする」を選択してください。

次に「新しいプライベートアプリを作成する」をクリックします。

プライベートアプリ名に「アプリ名」を入力し、緊急連絡用開発者メールに「メールアドレス」を入力します。

次に「非アクティブなAdmin API権限を表示する」を選択します。

「テーマ」のアクセス権限を「読み取りおよび書き込み」にします。

「保存する」をクリックし、次に「アプリを作成する」をクリックします。

次の画面で下にスクロールするとAdmin APIのセクションにAPI情報があります。

パスワードとショップのホスト名(URLの@直後から.comまで)は後に使用するので、メモしておくか、またはこの画面のままにしておいてください。

ベースとなるテーマをインストールする(オプション)

テーマをゼロから開発するのではなく、既存のテーマをベースとして開発する場合、この手順が必要になります。

まず、管理画面で、ストアに現在適用されているテーマを確認しましょう。

左メニューの「オンラインストア > テーマ」から確認できます。

以下の場合は「Debut」というテーマが適用されています。2021年6月以降に新しく作成されたストアではデフォルトでOnline Store2.0対応の「Dawn」というテーマが適用されているはずです。

ストアにインストールされている他のテーマは、画面下部にあるテーマライブラリーで確認することができます。

もし、ベースとしたいテーマがストアにインストールされていない場合は、「無料のテーマを探す」か「テーマストアに行く」をクリックして、テーマをインストールしてください。

ベースとなるテーマがストアにインストールされている状態になったら、ベースとなるテーマを複製します。(何らかのアクシデントが起きた時にも、元のソースコードを復元できるようにするためです。)

テーマを複製するには、現在のテーマの「アクション > 複製する」を選択します。

開発するテーマをローカル環境にダウンロードする

まず、ご自身の環境でテーマ開発用のディレクトリを作成してください。

ここではfirst-themeという名前のディレクトリを作成します。

$ mkdir first-theme
$ cd first-theme

既存のテーマをベースとせずにゼロからテーマを開発する場合は、次の章で記されるディレクトリ構造を作成する必要がありますので、この章を飛ばして、次の章に進んでください。

既存のテーマをベースとして開発を始める場合は、CLIに応じたコマンドを実行して、ベースとなるテーマをローカル環境にダウンロードします。

CLIにShopify Theme Kitを使用している場合

Shopify Theme Kitを使用する場合は、ターミナル、またはコマンドプロンプトで、以下のコマンドを実行してください。

–passwordオプションには先ほどメモしたパスワードを、
–storeオプションには先ほどメモしたショップのホスト名を入れます。

$ theme get --list --password=shppa_045fw9f8cc4c008eb3498jv34vfffd --store=xn-88jdfj48wf40erfge4rgaergae.myshopify.com

Available theme versions:
  [122645086372][live] Debut
  [123399831716] Simple
  [123399995556] Boundless
  [123400224932] Debutのコピー

[live]とついているのが、現在適用中のテーマです。

開発するテーマのIDを次のコマンドで使います。

theme getコマンドに元となるテーマのIDを指定して、ローカル環境にダウンロードします。

–passwordオプションには先ほどメモしたパスワードを、
–storeオプションには先ほどメモしたショップのホスト名を、
–theme-idには開発するテーマのIDを、入れます。

$ theme get  \
--password=shppa_045fw9f8cc4c008eb3498jv34vfffd \
--store=xn-88jdfj48wf40erfge4rgaergae.myshopify.com \
--themeid=123400224932

完了すると、以下のようにディレクトリが見えます。

$ ls
assets		config		config.yml	layout		locales		sections	snippets	templates

Shopify CLIの場合

Shopify CLIを使用する場合は、以下のコマンドを実行してください。

ストアにインストールされたテーマのリストが表示されるので、ベースにしたいテーマを選んでください。

$ shopify theme pull

Gitでバージョン管理をしたい場合は、Shopify Theme KitかShoify CLIに関わらず、プロジェクトのルートディレクトリでgit initすればOKです！

Shopifyテーマのディレクトリ構造

Shopifyテーマは7つのディレクトリと1つのconfigファイルから構成されています。

既存のテーマをベースとせずにゼロからテーマを開発する場合は、下記のディレクトリとファイルを作成してください。

それぞれの役割を表にしました。

これらのディレクトリに格納されたファイルを編集していくことで、テーマを自作することができます。

【最後に】

本記事では、手っ取り早くテーマ自作を始める方法をご紹介しました。

ディレクトリ構造やコマンドなど基本的な知識も解説し、セクションやプライベートアプリなど、Shopifyテーマ特有の単語も出てきました。

もしかすると、テーマ開発に関する基礎知識を補強する必要性を感じたかもしれません。以下の記事ではテーマ開発に必要な最低限の知識を解説しています。

Shopifyのコード編集を始める前に抑えるべき6つのこと

こちらも合わせて参考にしてください。