Shopifyのテーマセクションを自作する方法【Liquid・JSON未経験でもできる】
Shopifyテーマ開発の学習をしたい! コード編集をできるようになりたい! …と思って、Dawnなど既存テーマのファイルを開いてみて、コードが複雑で自身がなくなった方もいらっしゃるのではないでしょうか。私はしました。
何から学習すべきか迷っている方にお勧めなのが、簡単な自作テーマセクションの作成。最小限の機能のみのセクションなら、プログラミング知識がなくても、すぐ・簡単に作ることが出来ます。Shopifyテーマ制作に必要な、LiquidやJSONの基礎も同時に学習できますよ。
Shopifyテーマに自作セクションを追加する
Shopifyテーマの目玉とも言えるのが、カスタマイズ画面からユーザーが自由に設定できるセクションとブロック。ブロックは“セクションブロック”とも呼ばれるように、セクションの中にあるパーツですので、練習用のセクションファイルを作ってから追加していくと良いでしょう。
そもそもShopifyのセクションが何かわからない、という方は、先に下記の記事内“セクション（Sections）ディレクトリ”についてご確認ください。
Skillhubブログ
セクションファイルの作成
新しいセクションの追加は、ファイルを新しく作る必要があります。今回はShopifyのストア管理画面上から、ファイル作成とコード編集を行っていきましょう。
オンラインストア > テーマ を開きます。
テーマのメニュー から「コードを編集」を選択。
コード編集画面が開きます。
セクション のすぐ下にある「新しいセクションを追加する」をクリック。
新規作成するセクションファイルの名前を聞かれます。
お好きなファイル名を入力してください。
今回は「lesson1.liquid」としておきます。
完了ボタンをクリック。
新しいファイル（lesson1.liquid）が作成されました。
テーマセクションの基本構成を知る
liquid（リキッド）の基本
Shopifyストア管理画面から新しいセクションファイルを作成すると、最初から以下のコードが書かれています。これは、セクションファイルのテンプレート（雛形）のようなものです。
{% schema %} や {% endjavascript %}など{%と%}で囲まれた記述がありますね。
これらは、Liquid（リキッド）というテンプレート言語を使った書き方です。
Liquidの構文は、囲み方によって大きく2つに分かれます。
| 囲む文字 | 概要 | 例 |
|---|---|---|
| {% %} | ロジック | ループ処理、条件などを設定する際に使います。 |
| {{ }} | データ出力 | 変数の値を表示するときに使います。 |
今、lesson1.liquidに書かれているのは全て{% %}に囲まれているロジックですね。
それぞれの役割を見てみましょう。
① schema
Schemaとは、Shopifyのカスタマイズ画面から、ユーザーがカスタマイズできる部分を実装するために用いられるオブジェクトです。
Shopifyは、ノーコードでもある程度ストアの見た目（テーマ）を変更できることが特徴。下図のようにテーマのカスタマイズ画面から、ユーザーが直接テキストや画像を差し替えることが出来るようになっています。
こうした、カスタマイズ画面から編集ができるようにするための記述を{% schema %} ~ {% endschema %}の間に書いていきます。
② stylesheet
ダイレクトに記述したいcssがある場合は、{% stylesheet %} ~ {% endstylesheet %}の間に記述します。
CSSの記述が必要ない場合は、削除しても構いません。
③ javascript
ダイレクトに記述したいjavascriptがある場合は、{% javascript %} ~ {% endjavascript %}の間に記述します。
JSの記述が必要ない場合は、削除しても構いません。
セクションのschemaタグとは
セクションファイルのschemaタグ内では、JSON形式という書き方が使われています。
JSON形式では、以下のようなルールがあります。
- それぞれのデータはキー（key）と値（value）のペアである
- keyとvalueは:（コロン）で区切る
- それぞれのデータは,（カンマ）で区切る
- 文字列は必ず"（ダブルクオーテーション）で囲む
- keyはすべて"で囲まれた文字列である
- JSONオブジェクトは {}（波括弧/中括弧）で囲む
また、Shopifyテーマでは、キーとして利用できるものが決められています。
これらはattributes（属性）と呼ばれています。
デフォルトで入っていたコードを見てみましょう。
上記のJSON形式ルールと見合わせてみると、なんとなくイメージが掴めるかと思います。
使用可能な属性一覧は、Shopify公式ドキュメント「Content」をご確認ください。
https://shopify.dev/themes/architecture/sections/section-schema
動的セクションとは
テーマのカスタマイズ画面で、ユーザーが自由に追加・削除可能なセクションのことを“動的セクション”と言います。反対に、テーマカスタマイズ画面で触れないセクション、例えばヘッダーなどの部分は静的セクションと呼ばれます。
動的セクションとして利用するには、schemaで最初から書かれているnameとsettingsに加えて、プリセット（presets）が定義されている必要があります。
下図の赤い線で囲った部分を書き足してみましょう。
"settings": []の後に区切りのカンマ（ , ）を入れる、presetsの[ ]の中に{ }を入れる、この２点に注意してください。
コピペ可能なコード
{% schema %}
{
"name": "Section name",
"settings": [] ,
"presets": [
{
"name": "lesson1"
}
]
}
{% endschema %}
右上にある保存ボタンをクリックして、変更を保存してください。
「アセットが保存されました」と表示されたら成功です。
セクションとして表示したいものはどこに書く？
セクションファイルに最初から記述されている部分は、1～3までどれも、直接ページ上に表示されるものではありません。カスタマイズ画面用の設定、CSSやJSの読み込みと、セッティング的な内容ですね。
セクションとして表示させたいコンテンツは、{% schema %} ~ {% endschema %}などのタグの外側に書きます。多くの場合、{% schema %}よりも上に記述していきます。
試しに、1行目にh2タグで「HELLO!」と書いておきます。
保存ボタンをクリックして、変更を保存してください。
テーマのカスタマイズ画面で確認
テーマのカスタマイズ画面から、自作したセクションが使えるか確認してみましょう。
左上にあるをクリックして開き、「テーマをカスタマイズ」を選択してください。
テーマのカスタマイズ画面が開きます。
サイドバーの、セクションを追加をクリック。
先程"presets"のnameで設定した「lesson1」があります。
クリックしてセクションを追加してください。
※lesson1が見当たらない方は、検索バーにlesson1と入力するか、「さらに表示する」をクリックしてセクション一覧から探してみてください。
セクションが追加され、ページプレビュー部分にHELLO!と表示されたら成功です。
見出しを自由に設定できるようにする
STEP3までのところで、カスタマイズ画面から自由に表示・非表示と配置場所を決定できるセクションが出来ました。表示させたいコンテンツに、ユーザーがカスタマイズする必要がない場合は、このまま{% schema %}の上にHTMLを書いていけばOK。
ユーザーが簡単にカスタマイズ出来るようにするには、更に設定が必要です。
カスタマイズ画面で、ユーザーがセクション見出しの文言を変更できるようにしてみましょう。
セクションのsettingsを知る
コード編集画面に戻り、赤線で囲った"settings": []を見つけてください。
角括弧の中で、セクション内で使用する変数を設定していきます。この一手間で、ユーザーが入力した内容が反映されるようになりますよ。
"settings": []で設定するキー（属性）は、以下5種類が基本となっています。
- ★id：Liquid変数として使う際の名前
- ★type：表示される入力設定のタイプ
- ★label：テーマのカスタマイズ画面で表示されるラベル
- default：typeのデフォルトの値
- info：入力設定設定に関する説明等
★がついている"id"、"type"、"label"の３つは必須。
5種類だけですので、どう表示されるか確認も兼ねて全部書いてみましょう。
コピペ可能なコード
{% schema %}
{
"name": "Section name",
"settings": [
{
"type": "" ,
"id": "" ,
"label": "" ,
"default": "" ,
"info" : ""
}
] ,
"presets": [
{
"name": "lesson1"
}
]
}
{% endschema %}
セクションsettingsの値
カスタマイズ画面から変更できる内容・その説明文などを設定してきましょう。
まず、メインであるカスタマイズ可能な項目は"type"を使って用意します。
設定できる"type"の種類（値）については、あらかじめShopifyが用意しています。
settingsで指定できるtypeの値一覧はShopify公式ドキュメントから確認できます。
https://shopify.dev/themes/architecture/settings/input-settings
今作りたいのは、セクションの見出し。
ですので、1 行のテキストフィールドを表示する「text」を指定してみましょう。
{
"type": "text" ,
"id": "" ,
"label": "" ,
"default": "" ,
"info" : ""
}
"id"以下の項目は、値を自由に設定できます。
以下のように設定してみました。
{
"type": "text" ,
"id": "s-heading" ,
"label": "セクション見出し" ,
"default": "HELLO!" ,
"info" : "見出しを入力してください"
}
セクションsettingsを見てみよう
セクションのsettingsで、カスタマイズ画面の表示がどう変わったか見てみましょう。
再び「テーマをカスタマイズ」から、テーマのカスタマイズ画面を開きます。
セクションを追加からlesson1を選択して追加します。
（※既に追加されているセクションには、変更が反映されません。）
サイドバーで、セクション見出しが設定できるようになっているはずです。
公式ドキュメントの説明だけだとピンと来ない各属性も、こうして見比べると、どこにどう表示されるのか一目瞭然ですね。
カスタマイズ画面で設定された内容を反映する
テーマのカスタマイズ画面で、文字を入力出来るようにはなりました。
ですが、今のままでは、テキストフィールドを打ち替えても反映されません。
最後に、カスタマイズ画面で設定された内容が反映されるようにしていきましょう。
settingsの情報を取得・出力する
コード編集画面で、最初に{% schema %}よりも上にh2タグを書きました。
h2タグの中身を「settingsで用意したテキストフィールドに打ち込まれた文言」が出力されるように変更します。
liquidでデータ（変数）の出力に使う囲みは{{ }}。
設定の値を取得する変数は section.settings.[id] と書きます。
schemaで呼び出したい情報のidを確認して、[id]のところに入れてみましょう。
今回の場合は {{ section.settings.s-heading }} となりますね。
h2タグ内の記述を、こちらに変更してみましょう。
書き換えたら、保存ボタンで保存してください。
カスタマイズ画面で確認
では、再びテーマのカスタマイズ画面の方を見てください。
セクション見出しを打ち替えてみましょう。
プレビューに、入力した通りの見出しが表示されれば成功です。
おまけ：自作セクションの調整
ここまでで、基本のShopifyテーマセクションは作れました。
ですが、他のセクションと幅があっていないのが嫌ですよね。
検証ツールでページを見てみると、他のセクションはdiv.page-widthで囲うことで統一したコンテンツ幅になっていることがわかります。
自作セクションも同様にh2タグをdiv.page-widthで囲えば、統一できそうです。
lesson1.liquidを調整してみましょう。
<div class="page-width">
<h2>{{ section.settings.s-heading }}</h2>
</div>
また、"name": "Section name" の「Section name」を変更すると、カスタマイズ画面での表示名が変わります。お好きなものに設定してみてください。
これで、Shopifyテーマに自作動的セクションの追加が出来ました。
liquidやJSON、プログラミング言語の未経験の状態で、はじめて既存の（Dawnの）ファイルを見ると「うわぁ…。。」となりますが、基本はこのようにシンプル。ほぼ、定型文です。
基本をおさえると、liquidなどの理解もしやすくなりますし、テーマのちょっとしたカスタマイズはすぐ出来るようになりますよ。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
2月2日まで