28
  2017年05月18日       shopify.github.io

Shopifyテーマのデプロイツール「Theme Kit」の設定

Shopify Theme Kitの設定が、Shopify/shopify_themeを以前利用していたユーザーにとっては、競合により一筋縄ではいかない可能性がありますので、設定方法を解説します。

Flagship LLC

Shopify Theme Kitとは

Shopify Theme Kitは、Shopify Theme開発に使う、ローカル環境のソースコードの変更を検知して自動でShopifyサイトに反映したり、Shopifyサイト上のソースコードをローカル環境に引っ張ってきたりするためのミドルウェアです。

初期設定

Shopify Theme Kitの設定で手間取りましたので、メモとして設定方法を残します。
環境はMacで、既存gitレポジトリにShopify Theme Kitを追加する場合の工程を説明します。

まずはShopify Theme Kitをダウンロード&インストールします。
本記事はRuby 2.4.1を用いた結果を記載しています。

$ curl -s https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo python

APIトークンを取得

まずは下記のGIFアニの工程に従いPrivate Appを作成します。

その後、作成したPrivate AppのAPI KeyやPasswordが見れるようになります。これらを設定に使います。

ローカルとShopifyとの連携

まずはTheme IDを取得

ドキュメントには

theme configure --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]

と書いてありますが、その結果で生成されるconfig.ymlがおかしい場合は、古い方のthemeコマンド(Shopify/shopify_theme)が有効になっている状況と思われます。

$ theme watch

設定がうまくいっていれば、下記コマンドを実行中にすることで、ローカルの変更を拾い、接続しているShopifyサイトのThemeにライブ反映される状態が整いました。

$ theme watch

うまくいかない例(こちらはほとんどの場合には関係ないと思います)

sections問題

sections/ を whitelist化したのに、アップロードできない

エラーメッセージ

'sections/static-header.liquid' is not in a valid file for theme uploadsFiles need to be in one of the following subdirectories: layout/ assets/ config/ snippets/ templates/ locales/
Flagship LLC Flagship LLC
Shopify 専門で、クライアントの国内&グローバルEC開発を支援するバイリンガルチーム。特にテクノロジーに強み...
カテゴリ: 開発


関連するタグ
キュレーター紹介
Flagship LLC
Flagship LLC
Shopify 専門で、クライアントの国内&グローバルEC開発を支援するバイリンガルチーム。特にテクノロジーに強みを持ち、基幹システムや倉庫との Shopify 連携、独自 ...

no comments

SNSでthreedotfiveをフォローしよう!