デザイナーでも導入できる、Shopify Theme Kitの使い方

Shopifyのテーマ開発について、昨年後半に勉強したことをまとめます。

普段開発メインの方以外にも、基本的なHTMLとCSSの知識があって、Shopifyのデザイン〜開発まで丸ごと相談されたデザイナーさんにもぜひ取り入れてみて欲しいです。

どこから始める？

自由にショップのデザインを作成する、といってもゼロからコーディングするわけではなく、筋が良いテーマを見つけてきてベースにするのが近道ではないかと思います。

少し調べるといくつか気になるキーワードが見つかります。
「Slate」と 「Theme Kit」です。

「Slate」はShopify謹製のテーマ開発用のフレームワークで「Starter Kit」というテーマが中に入っています。

しかし少し触るとわかりますが、開発環境自体がとても作り込まれていて敷居が高い印象がするのと、まっさらな白紙状態からコーディングを始めるのも、なんだか遠回りに思えます。

一方、ストアをセットアップした時に最初から有効になっている Debut テーマは、カートにアイテムを追加した時の挙動 (右上にモーダルが出る) などに「Shopifyらしさ」が感じられ、ベースにするにはちょうど良さそうです。

開発環境が整っていそうだけれど白紙テーマから始めらければいけないSlateか、Debutテーマをベースにこつこつカスタマイズするか... プログラミングに自信がある人ほどSlateのような環境に興味が湧くかもしれません。

しかし、このことに悩んでいた2019年後半時点で、実はもっと素晴らしいツールがありました。同じくShopifyが提供している「Theme Kit」です！

少し検索して見れば、両者の勝負の結果は明らかです。
"Use Theme Kit, and do not waste your time with Slate." とのことです。

・Slate or Themekit? : shopify

"Use Theme Kit, and do not waste your time with Slate."
I'm confused: Slate of ThemeKit? - Shopify Community

Theme Kit のインストール

さっそく公式ドキュメントを見ながらインストールします。Macの場合、Homebrewを使ってこちらのコマンドを実行します。

brew tap shopify/shopify
brew install themekit

APIキーを取得する

管理画面のサイドバーの Apps からプライベートアプリを作成して、名前をつけて (例: ThemeKit) 、テーマのRead, Write権限を与えます。

アプリを作成するとAPIキーのパスワードが手に入るので、以後の [your-password] の部分で使ってください。

詳しい手順は、公式ドキュメントのgif が非常に参考になります。

テーマを作成／ダウンロードする

テーマを作成する

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

既存のテーマ一覧を取得する

theme get --list -p=[your-password] -s=[you-store.myshopify.com]

既存のテーマをダウンロードする

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

あらかじめDebutテーマを複製しておき、テーマ一覧を取得してテーマのIDを調べて、ダウンロードするのがオススメです。

開発・プレビュー

ここまで来たらあとは開発です。代表的なコマンドを紹介します。

・テーマをプレビューできるURLをブラウザで開く

theme open

・テーマを自動的にビルドして、サーバーにデプロイする

theme watch

・手動でテーマをデプロイする

theme deploy

・手動でテーマをサーバーからダウンロードする

theme download

快適ですね！
詳しくは、こちらのコマンド一覧をご覧ください。

本日のまとめ

👉 ThemeKitを使えばShopifyのテーマをMac上で開発できる
👉 お気に入りのエディタが使える
👉 ローカルなのでgitでバージョン管理もできる
👉 ターミナルでwatchすると編集するたびに自動的にデプロイされる
👉 確認するにはブラウザをリロードするだけ
👉 ローカルなので「Cmd+Z」ですぐ戻せる

次の記事では、もっと開発効率を上げたい方向けに、ローカルでのliquidの開発や、scssを使う方法、デフォルトのCSS/JSと仲良くやっていく方法などを紹介しようと思います。