【2021年版】Shopifyテーマ自作を5分で始める手順

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
dev-theme-thumnail2

本記事の所要時間:5分

Shopifyでは、ショップのデザインがテーマとして公開されており、開発者はテーマを開発してShopifyテーマストアで公開することができます。

本記事では、テーマ開発を始める手順とテーマ開発に必要な基礎知識を簡潔にご紹介します。

Shopify Theme Kitについて

テーマ開発には、クロスプラットフォームで使用可能なコマンドラインツールである、Shopify Theme Kitを使います。

Shopify Theme Kitを使用すると、Gitでのバージョン管理や複数環境への反映が行えます。

Shopify Theme Kitの導入

Shopify Theme Kitを導入するには、まずストアを作成する必要があります。ストア作成が済んでいない方は、コチラを参考にまずはストア作成を行ってください。

また、本番稼働中のストアしかない場合は、別で開発ストアを作成することをオススメします。

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

API情報の取得

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

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

テーマ開発では、プライベートアプリのAPI情報を使用するため、まずはプライベートアプリを作成します。ストアの管理画面から「アプリを管理 > プライベートアプリを管理する」をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

テーマを複製する

ストアに複数のテーマがある場合は、どのテーマをもとに開発するか決めます。

ストアに現在適用されているテーマは、管理画面の「オンラインストア > テーマ」から確認することができます。

以下の場合は「Debut」というテーマが現在適用されています。

ストアに現在適用されているテーマは、管理画面の「オンラインストア > テーマ」から確認することができます。以下の場合は「Debut」というテーマが現在適用されています。

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

以下の場合は、「Boundless」と「Simple」というテーマがインストールされています。

以下の場合は、「Boundless」と「Simple」というテーマがインストールされています。

現在使用しているテーマをもとに開発する場合は、管理画面でテーマを複製してから複製された方をもとに開発することをオススメします。

現在使用されているテーマを複製するには「アクション > 複製する」を選択します。

現在使用しているテーマをもとに開発する場合は、管理画面でテーマを複製してから複製された方をもとに開発することをオススメします。現在使用されているテーマを複製するには「アクション > 複製する」を選択します。

開発するテーマをローカル環境に落とす

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

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

$ mkdir first-theme
$ cd first-theme

次に、開発するテーマをローカル環境に落とします。

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

–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でテーマを実際に落としてきます。

–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

Gitでバージョン管理したい場合は、このディレクトリでgit initすればOKです。

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

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

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

config.ymlテーマに関する基本的な情報が入っています。themeコマンドに利用されます。
assets画像ファイルや、CSSファイル、JSファイルなどの静的リソースが格納されます。
configテーマの設定値に関する2つのファイルが格納されます。
GUIのテーマエディタで編集される設定値を定義するsettings_shema.jsonと、テーマに設定された値を保存するsettings_data.jsonが含まれます。
layoutテーマのレイアウトに関するファイルが格納されます。
localesテーマを多言語化するためのファイルが格納されます。
sectionsデザインのコンポーネントである”セクション”に関するファイルが格納されます。
templatesサイトの1ページに対応する”テンプレート”のファイルが格納されます。
snippetsテンプレートで参照されるコンポーネントである”スニペット”のファイルが格納されます。

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

編集中のコードを自動で反映する

以下のコマンドを打つとコードの更新をリアルタイムでストアに反映してくれます。

$ theme watch
18:21:22 [development] アプリ開発のてすと: Watching for file changes to theme 123400224932
|

終了する場合は「ctrl + c」です。

一括でデプロイ

theme watchでリアルタイムのデプロイは可能ですが、まとめて編集して、まとめてデプロイしたい場合もあるでしょう。

その場合は、以下のコマンドで一括デプロイが可能です。

$ theme deploy

【最後に】

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。