ShopifyでTheme Kitを使い既存テーマをカスタマイズする:メモ

Cat WEBサイト構築Tag by cubismer
窓辺

まだ見ているところなのでメモ的に。調べながら書いているので正確性は保証できず、のちほど書き換える可能性もあります。

[追記:2021.9.14]
2021.6のオンラインストア2.0以降に対応した内容に変更。追記もいくつか。

実現したいこと

  • Shopifyの既存テーマをカスタマイズする
  • ローカルで作業を行う

Shopifyは、見たところ管理画面内からのテーマ編集機能が揃っている印象ではあります。

ただ、やはり複数のファイルを同時に見ながらとなると難しいようですし、監理画面内での作業に多少恐怖感があり(WPでダッシュボード経由のテーマ編集が思い出されるので…)、可能ならローカルでどうにかしたいところです。

Theme Kitの概要メモ

Theme Kitによる編集作業はローカルで完結せず、プライベートアプリを作成し、それを通してオンライン上のテーマファイルに反映させて確認するしかないようです。

実際にはtheme watchしてから保存することでオンライン上のテーマファイルも編集されるため、theme watchさえしなければオンライン上のテーマは安全ですが。

なお、「現在のテーマ」に設定していないテーマを指定して編集することが可能なので、公開中のサイトに影響を与えずにテーマ開発することが可能です(確認している範囲はですが)。

Slateに関して

以前、発表された当時は最新の環境ということでSlateという開発環境が用意されていたのですが、以下のように2020年1月にサポートが停止されました。

Slate – End of Support (January 2020)

Theme Kitのインストールから変更後のアップロードまでの手順

  1. Theme Kitのインストール(※１)
  2. 開発用ディレクトリに移動(任意で用意する)
  3. Theme Kitでストアのアクセスするためのパスワードを生成する(※２)
  4. 開発用ディレクトリにテーマをダウンロード(※3)
  5. テーマをローカルで修正
  6. テーマをShopifyのサーバーにアップロードして反映(※4)
  7. control+cで終了

(※１)Theme Kitのインストール
  • homebrewを使用(Macの場合)

brew tap shopify/shopify
brew install themekit

グローバルにインストールされるので、開発用ディレクトリにいなくてもいい。


//>アップデートを勧められる場合がある
An update for Themekit is available. To update please run `theme update`
//以下のようにアップデートする
brew update themekit
(※２)Theme Kitでストアのアクセスするためのパスワードを生成する
  1. アプリの「Theme Kit Access」を使ってパスワードを生成する
  2. プライベートアプリを作ってパスワードを生成する

オンラインストア2.0以降(2021.6〜)以下の2種類の方法があるが、アプリと使う方法が推奨される。実際ストア側が管理しやすく、業者側もプライベートアプリを作る手間がないのでお勧めできる。

ただし、Theme Kitがおそらくv1.3.0以上でないと利用できないと思われるので、とりあえず最新のバージョンにしておく方が安全。

(※3)開発用ディレクトリにテーマをダウンロード

//対象となる既存テーマのIDが必要なので、わからない場合は以下で調べられる。
//もしもテーマ名がわからないなら管理画面で調べておくこと
//以下のパスワードやドメインの左右にある[]は不要だが、ストアのアドレスにはダウブクォートが必要が場合がある
//
theme get --list -p=[your-password] -s="[you-store.myshopify.com]"

//テーマのIDがわかっているなら上記はいらないのでいきなり以下を実行してOK
theme get -p=[your-password] -s="[you-store.myshopify.com]" -t=[your-theme-id]

your-passwordは前述のとおり「Theme Kit Access」かプライベートアプリで生成したものを入力。

「Theme Kit Access」はパスワードを確認可能なアドレスをメールで送付するが、一度確認すると再度は開けないため、パートナー側では再確認ができない(メモ必須)。ただしダッシュボードの「Theme Kit Access」のアプリ管理画面から再送信は可能なので、万が一の場合にはマーチャントに再送信を依頼すること。

プライベートアプリのパスワードの確認方法は以下の通り。

  1. 管理画面の「アプリ管理」に移動
  2. 「アプリ管理」の下部の「プライベートアプリを管理する」をクリック
  3. 該当のアプリ名をクリック
  4. 「Admin API」の「パスワード」の「表示する」をクリック
(※4)テーマをShopifyのサーバーにアップロードして反映

//開発用ディレクトリで以下を記述して実行後、ファイルに修正を加えて保存すると自動的にアップロードされる
theme watch

// theme kit v1.0.3からか、liveテーマの場合は --allow-live フラッグをつける必要がある(前からだったかも)
theme watch --allow-live

//仮にheader.liquidを編集して保存した場合は以下のようなログが出る
14:26:11 [development] processing sections/header.liquid
14:26:12 [development] Updated sections/header.liquid
  • theme watchを実行しない限りアップロードされない
  • theme watch実行前に作業を行ったファイルを自動でアップロードする機能はないため、新たに何かを変更して保存する必要がある
  • theme watch実行タイミング次第では、ローカルで編集した最新ファイルがアップロードされていないという問題が起こりうる

その他

Theme Kit のopenで任意のブラウザを指定する

//Macの場合
//Chromeで開く
$ theme open -b Google\ Chrome
//Firefoxで開く
$ theme open -b Firefox
//Safariで開く
$ theme open -b Safari
ローカルでディレクトリを追加してもassetsに統合される

上記フォーラムで解説されているが、ローカルのテーマファイル内にディレクトリを新たに作成するしてストアにアップロードすると、追加したディレクトリが消えて中身がassetsに入れられる模様。

参考サイト

メモ

パーツごとのCSS

<div class="slideshow" id="slideshow-{{ section.id }}"></div>

<style>
  #slideshow-{{ section.id }} { … }
</style>

{% javascript %}
  $('.slideshow').slideshow();
{% endjavascript %}

{% stylesheet %}
  .slideshow {
    /* default styles */
  }
{% endstylesheet %}

{% stylesheet %}などを使えば、Reactのstyled-componentsのように作成したパーツごとにCSSを記述できます。システム側はこの記述を一つのファイルに適宜まとめてくれます。

ただしこれはインスタンスごとではなくセクションごとのようで、インスタンスごとにしたい場合には<style>を使ったインラインで記述する必要がある模様です(サンプル確認中)。

留意点

既存テーマをカスタマイズした際のアップデート対応

あなたまたはインストールしたアプリが、テーマにコードの変更を加えておらず、テーマの更新によって新しい設定が導入されない場合、テーマは自動的に更新されます。
これは、自動更新によってカスタムコードの変更が削除されるためです。
テーマを更新してコードを編集したり、コードを変更したアプリをインストールしたりする場合は、オンラインストアにテーマの更新版を手動で追加する必要があります。

上記のように書かれており、手を入れたテーマは自動更新されない模様です。

まだ調べている最中ですが、WPの子テーマのような機能がないためベースにするテーマ自体に手をいれている状態でしょうから、更新版を手に入れてから手作業でカスタマイズ箇所を移植する必要があるように思います。

既存のテーマではなく0からつくる場合

上記のページに以下の記述があり、Theme Kitで対応可能。


//テーマIDはなくてもよい
theme new -p=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
config.yml

取得されたテーマファイルの中には、config.ymlという設定ファイルが含まれています。
開発テーマ・本番テーマ双方に編集を反映したい……という場合には、config.ymlに複数テーマ分の環境設定を記述しましょう。後述する、テーマ自動反映の対象外ファイルもconfig.ymlで設定できます。

config.ymlの記述サンプルは、公式ドキュメントを参照してください。

https://shopify.github.io/themekit/configuration/#config-file

「Theme Kit Access」をつかってアクセスしようとするとエラーが出て接続できない

[API] Invalid API key or access token (unrecognized login or wrong password)

上記のようなエラーがでる。パスワードを確認して問題がない場合、以下を見ると時間経過で回復する可能性がある模様。

実際に遭遇した際に、ダメ元でテーマを入れるディレクトリ内(まだ空の状態)に以下のようなconfig.ymlを作成してからtheme getだけを書いて実行したら接続できたが、たまたま時間経過のタイミングと合致しただけの可能性が高い。


development:
  password: 生成したパスワード
  theme_id: ${DEV_THEMEID}
  store: ストアのアドレス

${DEV_THEMEID}に関しては以下参照のこと。


development:
  password: ${DEV_PASSWD}
  theme_id: ${DEV_THEMEID}
  store: ${DEV_SHOP}

そのほかでは、バグであると書いている投稿もあったが真偽不明。

結び

色々調査中。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄