tl;dr
- 今からShopifyやるならTheme Kit一択だよ。 Scssを使いたいならgulpなどと組み合わせるのが吉
- Slateは辞めたほうがよいよ。癖が強すぎて後々メンテしづらい
- セクションは上手く使えば相当便利だよ。
Shopifyとは？
Shopifyはカナダ発のECサイトプラットフォームです。越境ECで各国の支払いプラットフォームとの連携を行っており多くの開発者が開発するアプリがあることが大きな特徴です。
本投稿ではShopifyにおいてテーマを開発/カスタマイズする際に知っておくべき知識と実務上のハマりどころについてまとめさせていただきます。
Shopifyテーマの構成
Shopifyのテーマは以下のディレクトリ構成となってます。
- assets ... jsやcssや画像ファイルを配置
- config ... テーマ全体の設定内容＋テーマのカスタマイズで行った設定が格納されるフォルダ
- layout ... テーマ全体のヘッダ、フッタなどのレイアウトファイルを配置するフォルダ
- locales ... 各言語の翻訳データを格納するフォルダ
- sections ... 「セクション」を格納するフォルダ（詳しくは後述）
- snippets ... 「スニペット」を格納するフォルダ（詳しくは後述）
- templates ... 各ページのテンプレートを格納するフォルダ
基本ウェブアクセスがあった場合、表示するページに応じてtemplatesフォルダのテンプレートが選ばれ描画されます。templatesの中にあるテンプレートは必要に応じてスニペットやセクションを読み込んで描画します。
最終的に状況に応じて指定されたlayout内のレイアウトファイルと組み合わされ、表示されるという流れです。
assetsファイルにある画像などのファイルはHTML上で指定されると専用のURLが発行されて表示されます。
configやlocalesフォルダは描画の際に設定や言語情報として使われるというざっくりとした構成になります。
セクション(section)とスニペット(snippet)の使い方
Shopifyのテーマファイルで困惑することはセクションとスニペットの扱いだと思います。
端的に言うと、設定可能なものがセクション、設定不可能なものがスニペットです。
| セクション | スニペット | |
|---|---|---|
| 読み込める場所 | templates/layoutsフォルダ内からのみ | どこからでもOK |
| 設定(schema)可能? | 可能 | 不可能 |
| script/style利用可能? | 可能 | 不可能 |
セクションはtemplates/layoutsディレクトリにあるファイルからしか読み込むことはできません。ページ全体に置くヘッダ、フッタやコレクションを選んで表示する商品一覧、スライダーなどで使うことになりますが、テーマ全体で1セクション1設定とセクションに設定がリンクしています。
そのため、例えば、同じセクションをサイト内の別の場所で読み込んでもまったく同じ設定が反映されてしまうため注意が必要です。
一方、スニペットは設定ができないどこからでも読み込めるテンプレです。セクションの場合は、セクションの中からセクションを読み出したり、スニペットの中からセクションを読み出すことはできませんが、スニペットはスニペットやセクションからも読み出すことができます。
そのため、ページで使われるページ内の構成要素はセクションで、全体的にいろいろな場所で使い回す共通部品はスニペットで作るのが一般的です。
Shopifyサイト内からのテーマ編集
簡単なテーマの編集だけであればShopifyのサイト内からやることができます。
Shopifyの管理画面から オンラインストア を選択し、編集したいテーマの「アクション」から「コードを編集する」をクリックします。
後は編集したいファイルを選んで編集をするだけです。
Shopifyはテーマの履歴をある一定期間残してくれるので、仮にウェブでいじってなにかおかしな事があった場合、該当ファイルの編集画面で「旧バージョン」というリンクをクリックすると過去のファイルに戻すことができます。
なお、編集する際には、既存のテーマを普通に編集するだけではなく「アクション」から「複製」を選んで修正案件ごとにテーマを複製していくことをおすすめします。
Theme Kitを使ったテーマ開発
Shopifyのテーマ開発ではTheme Kitというソフトウェアを使うのが昨今一般的です。
Theme Kitは単純にShopifyのテーマファイルを同期するためのソフトウェアですが、テーマキットを使うことでファイルの更新管理＋差分アップロードができるため、非常にスピーディーにテーマの開発をすることができます。
Theme Kitについて詳しくはこちらの記事を参照ください: Shopify Theme Kit を使ったテーマ開発
※ Slateというソフトウェアを使ってSCSS/JSをコンパイルするやり方もありますが、非常に癖が強いこと、開発がほぼストップ状態となっていることから、オススメできません。
BootstrapなどSCSSやJS(ES6)をフル活用したい場合はgulpなどの併用がオススメ
Theme Kitで基本テーマのカスタマイズは多くのことができますが、SCSSでimportを使えなかったりjsでもrequire/importを使えないなどモダン開発の利便性を享受している開発者に取ってはストレスも多い状態になっています。
もしSCSSやJSなどのモダン技術をフルに活用したい場合は、gulpやwebpackなどと併用することがオススメです。assetsフォルダ内に .css.liquid / .js.liquid というファイル名で出力し、touchすることでTheme Kitとも同期することができます。