Shopifyテーマカスタマイズのメモです。
開発までのフロー
1. Shopify Theme Kitをインストールする （初回のみ）
Mac版
homebrewにてインストール（homebrewが入ってない場合は入れる）
ターミナル
brew tap shopify/shopify
brew install themekit
Windows版
以下を参考に...
【Shopify】Theme kit設定をしてローカル開発環境を整えよう！
2. プライベートアプリを作成し、APIキーを生成する
手順
1. 管理画面の左メニューから [アプリ管理] をクリック
2. アプリ管理画面でページ下部にある [プライベートアプリを管理] からアプリを作成
3. [アプリの詳細] で、任意のプライベートアプリ名と緊急連絡用開発者メールを記入
4. [Admin API] の [Theme templates and theme assets] を [Read and Write] に変更して保存
3. ストアとローカル環境のTheme Kitを接続させる
1. テーマIDを取得
ターミナル
theme get --list -p=[password] -s=[store.myshopify.com]
（例） theme get --list -p=abcdefgh -s=xxxxxx.myshopify.com
2. ローカル環境とストアを接続。config.ymlが作成される（作業ディレクトリ上で行う）
ターミナル
theme get -p=[password] -s=[store.myshopify.com] -t=[theme-id]
（例） theme get -p=abcdefgh -s=xxxxxx.myshopify.com -t=123456789
★その他やっておくべきこと
クライアントのストアへのアクセスをリクエスト
必要があれば、パートナーアカウントでクライアントのストアにアクセスできるように申請します。
1. パートナーアカウント を作成
※すでに持っている場合はOK
2. クライアントのストアへのアクセスをリクエスト
手順
1. パートナー管理画面の左メニューから [ストア管理] をクリック
2. [ストアを追加する] をクリック
3. [ストアタイプ] で [ストア管理] を選択
4. [ストアのアドレス] に本番ストアのURLを入力
5. [権限] でアクセスしたい機能を選択
6. [保存] をクリック
config.yml の値を変数化
ストア情報を安全に扱うために変数化します。
1. 環境変数設定ファイル (variables) を下記に作成
${HOME}/Library/Application Support/Shopify/Themekit/variables
2. 下記のように環境変数を定義
variables
DEV_PASSWD=abcdefghabcdefghabcdefgh
DEV_THEMEID="123456789"
DEV_SHOP=xxxxxx.myshopify.com
3. config.yml を下記のように書き換える
config.yml
development:
password: ${DEV_PASS}
theme_id: ${DEV_THEMEID}
store: ${DEV_SHOP}
開発用のストアを作成
パートナーアカウントでは複数のテスト用ストアを無料で作成することができます。
1. パートナーアカウント を作成
※すでに持っている場合はOK
2. 開発用のストアを作成
手順
1. パートナー管理画面から [ストア管理] をクリック
2. [ストアを追加する] をクリック
3. [ストアタイプ] で [ストア構築] を選択
4. [ログイン情報] で、開発用のストア情報を設定
5. [ストアのアドレス]で住所を設定
6. [ストアの目的] でいずれかを選択 （この場合 [アプリまたはテーマをテストする] になるかと）
3. 開発用のストアにパスワードを設定
手順
1. 管理画面から、 [オンラインストア] > [各種設定] に移動
2. パスワード保護エリアに移動
3. [パスワードページを有効にする] にチェックを入れる
4. パスワードを設定
5. [ストア訪問者へのメッセージ] にパスワードページに表示するメッセージを入力
6. [保存] をクリック
4. config.yml を下記のように書き換える
config.yml
# 本番環境
production:
password: ${PRO_PASS}
theme_id: ${PRO_THEMEID}
store: ${PRO_SHOP}
# テスト環境 （必要あれば）
staging:
password: ${STG_PASS}
theme_id: ${STG_THEMEID}
store: ${STG_SHOP}
# 開発環境
development:
password: ${DEV_PASS}
theme_id: ${DEV_THEMEID}
store: ${DEV_SHOP}
開発中のフロー
1. 本番環境から最新データをダウンロード
ターミナル
theme download --env=production
2. watch（開発環境に自動アップロード）
ターミナル
theme watch (= theme watch --env=development)
3. テスト環境にアップロード
ターミナル
theme deploy --env=staging
4. 本番環境にアップロード
ターミナル
theme deploy --env=production
Theme Kit コマンド集
バージョン確認
ターミナル
theme version
ストアからthemeのファイルをローカル環境にダウンロード
ターミナル
theme download
theme download templates/404.liquid templates/article.liquid
ファイルをローカルからストアにアップロード
ターミナル
theme deploy
ストアのプレビューを開く
ターミナル
theme open
テーマのリアルタイム反映
ターミナル
theme watch