Shopify Theme Kit でテーマを開発する

# テーマとは
Shopify のショップ画面のデザインのことです。
liquid 言語を用いて開発します。liquid に関しては別の機会に解説します。

# テーマの構造
`Debut テーマを例に、フォルダの構造ではなくて呼び出される順番です。`
layout / theme.liquid　：テーマレイアウトの大枠
└ templates / collection.liquid　：各ページのレイアウト雛形
　└ sections / collection-template.liquid　：テーマエディタから編集可能な共通パーツの定義
　　└ snipets / bgset.liquid　：ページに読み込むパーツの定義（アイコン等）
├ locales　：翻訳の定義と内容
├ config　：テーマエディタの設定
└ assets　：CSS・Javascript・画像・フォントなど　※ theme.scss を theme.scss.liquid とする（日本語NG）

# テンプレートファイルとページの対応
1. 404.liquid：404ページ
2. article.liquid：ブログ記事個別ページ
3. blog.liquid：ブログ記事一覧ページ
4. cart.liquid：カート内アイテム一覧ページ
5. collection.liquid：コレクション（＝商品一覧）ページ
6. gift_card.liquid：shopify ギフトカードのレンダリングページ
7. index.liquid：ホームページ（ShopifyストアのTOPページ）
8. list_collections.liquid：コレクション一覧（＝商品カテゴリ一覧）ページ
9. page.liquid：固定ページ
10. product.liquid：商品詳細ページ
11. search.liquid：検索結果ページ
12. customers/account.liquid：アカウントの詳細ページ
13. customers/activate.liquid：アカウントの有効化ページ
14. customers/addresses.liquid：アカウントの住所ページ
15. customers/login.liquid：アカウントのログインページ
16. customers/order.liquid：アカウントの注文詳細ページ
17. customers/register.liquid：アカウントの作成ページ
18. reset_password.liquid：アカウントのパスワード再発行ページ

# Themekit を使った開発環境構築
[Shopify Dev Template](https://github.com/t-kurasawa/shopify_dev_template) を公開しているのでご活用ください。

[Themekit](https://shopify.github.io/themekit/) はテーマの編集用のコマンドラインツールです。既存のテーマからカスタマイズする場合に利用します。
次回以降解説しますが、ゼロからテーマ自体を作る場合は [Slate](https://shopify.github.io/slate/docs/about) が向いています。

## テーマ開発の初期設定
[公式](https://shopify.github.io/themekit/#get-api-access)の手順を参考に進めます。

### 1. Themekit のためのプライベートアプリを作成します。
「Admin API」内の「Theme templates and theme assets」を「Read and Write」に設定して保存。

![shopify-local-theme-development-generate-api.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/81d66519-a0a4-f9e7-9b90-dd23595d66a9.gif)
[Shopify Theme Kit Getting started](https://shopify.github.io/themekit/) より引用

### 2. テーマダウンロード
開発に利用するテーマをダウンロードします。

![テーマのダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/e9558d6f-7aab-77b4-03a4-5d4b06a0ec9a.png)

### 3. テーマファイルは Git で管理します
themekit を利用する場合 Shopify 画面での変更とローカルPCの差分が生まれるため、Git で管理をおすすめします。詳しくは後述します。

### 4. Themekit をインストール
Windows の場合は、[こちら](https://shopify.github.io/themekit/#manual-installation)からインストールしてください。Mac は後日。

WSL を利用している際には、theme.exe に alias 設定すると便利です。
`alias theme="/mnt/c/dev/theme.exe"`

### 5. themekit用の設定ファイル（config.yml）を作成
`theme configure -p=パスワード -s=ストア名.myshopify.com -t=テーマID`

## 開発を進める

### 1. ローカル環境の変更を Shopify 開発店舗へ反映
`theme watch`

### 2. 編集内容の確認
`theme open`

### 3. 修正内容の保存
Git にプッシュしてください

### 注意点
以下２フォルダのファイルは、Shopify 管理画面上の設定内容が記載されています。
そのため、これらのファイルは Git を正とするより Shopify 上の設定を正とする方が良いでしょう。（運用ルール次第ですが）

config/*.json
locales/*.json

`theme get -t=テーマID` で最新のソースコードがダウンロードされます。

## 参考記事
https://shopify.dev/tutorials/develop-theme-templates
https://shopify.dev/tutorials/develop-theme-layouts-theme-liquid
https://shopify.github.io/themekit/

# まとめ
本記事では Shopify 公式の ThemeKit を用いたテーマの開発方法を解説しました。次回はアプリを AWS 上で動かす方法をご説明します。

<本記事に関するお問い合わせ>
NRIデジタル株式会社　担当　吉田・倉澤・萩村 and Developers　marketing-analytics-team@nri-digital.jp

> 本記事は NRI digital TECH BLOG からの転載、抜粋です。
> [Shopify でテーマとアプリを開発する – ThemeKit / Shopify App CLI –](https://www.nri-digital.jp/tech/20200525-2042/)