自作セクション作成①テーマセクションの基礎を学ぶ

file

Shopifyテーマ制作に使うLiquidやJSONの基礎学習と合わせて、オリジナルのテーマセクションを作成していきましょう。今回は最小限のセクションファイルを作成し、コードの意味と基本の書き方を学びます。

Shopifyテーマの「セクション」

Shopifyテーマは、テーマのカスタマイズ画面から必要なセクション配置することができます。セクションを挿入・削除・並び替えして、各ページ（ページテンプレート）ごとにデザインを作っていく事が可能です。クライアント/ECサイト運営者にとっては、自分で簡単に変更ができる便利な機能ですよね。

file

また、セクションによっては、セクション内で“ブロック”を並べられるものもあります。使用できるブロックは、セクションによって異なります。これは、それぞれのセクションファイル内で使えるブロックを定義しているためです。

ここからのレッスンでは、練習用のテーマセクションファイルをイチから作っていきます。カスタマイズ画面から使用できる、セクションとブロックを作ってみましょう。

最小限の機能のセクションなら、作成は難しくありません。 Shopifyテーマ制作に必要な、LiquidやJSONの基礎も同時に学習できますよ。

セクションファイルの作成

新しいセクションを作る場合は、セクションファイルを増やす必要があります。今回はShopifyのストア管理画面上から、ファイル作成とコード編集を行っていきましょう。

オンラインストア > テーマを開きます。テーマのメニューから「コードを編集」を選択。

file

コード編集画面が開きます。セクションのすぐ下にある「新しいセクションを追加する」をクリック。

file

新規作成するセクションファイルの名前を聞かれます。お好きなファイル名を入力してください。今回は「lesson1.liquid」としておきます。

file

完了ボタンをクリック。

新しいファイル（lesson1.liquid）が作成されました。

file

セクションファイルの基本構成

liquid（リキッド）の基本

Shopifyストア管理画面から新しいセクションファイルを作成すると、最初から以下のコードが書かれています。これは、セクションファイルのテンプレート（雛形）のようなものです。

file

{% schema %} や {% endjavascript %}など{%と%}で囲まれた記述がありますね。これらは、Liquid（リキッド）というテンプレート言語を使った書き方です。

Liquidの構文は、囲み方によって大きく2つに分かれます。

囲む文字	概要	例
{% %}	ロジック（設定）	ループ処理、条件などを設定する際に使います。
{{　}}	出力（書き出す）	変数の値を表示するときに使います。

今、lesson1.liquidに書かれているのは全て{% %}に囲まれたロジック（設定）。どれも、直接ページ上に表示されるものではありません。それぞれの役割を見てみましょう。

file

1.schema

Schemaとは、Shopifyのカスタマイズ画面から編集できる部分を実装するために用いられるオブジェクトです。

Shopifyは、ノーコードでもある程度ストアの見た目（テーマ）を変更できることが特徴。下図のようにテーマのカスタマイズ画面から、ユーザーが直接テキストや画像を差し替えられますよね。

file

こうした、カスタマイズ画面からの編集を可能にする設定を{% schema %} ~ {% endschema %}の間に書きます。

2.stylesheet

ダイレクトに記述したいcssがある場合は、{% stylesheet %} ~ {% endstylesheet %}の間に記述します。 HTMLとしては以下のように書き出されます。

<style>

</style>

個別でCSSの記述が必要ない場合は、削除しても構いません。

2.javascript

ダイレクトに記述したいjavascriptがある場合は、{% javascript %} ~ {% endjavascript %}の間に記述します。 HTMLとしては以下のように書き出されます。

<script>

</script>

個別でJSの記述が必要ない場合は、削除しても構いません。

schemaタグとJSON形式

セクションファイルのschemaタグ内では、JSON形式と呼ばれる書き方が使われています。 JSON形式には、以下のようなルールがあります。

それぞれのデータはキー（key）と値（value）のペアである
keyとvalueは:（コロン）で区切る
keyはすべて"で囲まれた文字列である
それぞれのデータは,（カンマ）で区切る
文字列は必ず"（ダブルクオーテーション）で囲む
JSONオブジェクトは {}（波括弧/中括弧）で囲む

また、Shopifyテーマの場合は、キーとして使えるワードが決められています。これらはattributes（属性）と呼ばれています。

デフォルトで入っていたコードを見てみましょう。上記のJSON形式ルールと見合わせてみると、なんとなくイメージが掴めるかと思います。

file

使用可能な属性一覧は、Shopify公式ドキュメント「Content」をご確認ください。
https://shopify.dev/themes/architecture/sections/section-schema

動的セクションとは

テーマのカスタマイズ画面で、ユーザーが自由に追加・削除可能なセクションのことを“動的セクション”と言います。反対に、カスタマイズ画面で触れられないセクション、例えばヘッダーなどの部分は静的セクションと呼ばれます。

動的セクションには、schemaでnameとsettingsに加えてプリセット（presets）が定義されている必要があります。

新しく作ったセクションファイルに、presetsを定義してみましょう。下図、赤い線で囲った部分を書き足します。

file

"settings": []の後に区切りのカンマ（ , ）を入れる、presetsの[ ]の中に{ }を入れる、この２点に注意してください。

コピペ可能なコード

{% schema %}
  {
    "name": "Section name",
    "settings": [] ,
    "presets": [
      {
        "name": "lesson1"
      }
    ]
  }
{% endschema %}

右上にある保存ボタンで、変更を保存してください。「アセットが保存されました」と表示されたら成功です。

file