【GO RIDEエンジニアが解説！】Liquidを利用したShopify自作セクションの作り方

Shopifyセクションとは、テーマに機能を追加したり、拡張したりするliquidファイルです。

例えば、画像を追加したり、テキストを追加したり、Youtubeの埋め込みなど、あらゆるセクションを追加することができます。

デフォルトでは、ほとんどのテーマには画像やテキスト、商品ブロックなどを表示できるセクションがあります。

テーマがすでに持っているセクションを確認するためには、Shopify管理者のオンラインストアセクションに移動し、テーマ上で「カスタマイズ」をクリックします。

そこから、「セクションを追加」をクリックすると、利用できるセクションのリストが表示されます。

テーマによっては、自分が表示したいことにマッチしたセクションが見つからないかもしれません。

その場合、セクションを自分で作成することが可能です。

オリジナルのセクションを作成することで、様々なセクションを作成することができます。まずは、タイトルと共に画像を表示するシンプルなセクションを作成してみましょう。

そして、今回は画像を円形にするオプションを設けてみます。

まず、オンラインストアに戻り、「カスタマイズ」の隣にある三つの点をクリックして「コードを編集」を選択します。

次に、左側のセクションフォルダまでスクロールし、「新しいセクションを追加」をクリックします。ファイルには好きな名前を付けることができますが、今回はファイル名をimage-test.liquidとしました。

これで、{%schema %} タグ、{% stylesheet %} タグ、{% javascript %} タグを持つファイルが作成されるはずです。

これらのタグはそれぞれ異なる目的を持っています。

• {%schema %} タグはセクションの設定とカスタマイズ可能なフィールドを定義
• {% stylesheet %} タグはCSSスタイリングを設定
• {% javascript %} タグはJavaScriptを設定

 <div class="image-test">
{{ section.settings.text }}
<img src="{{ section.settings.image_box | img_url: 'master' }}" width="380px" height="380px">
</div>

{% schema %}
{
 "name": "画像テスト",
 "settings": [
  {
    "type": "text",
    "id": "text",
    "label": "テキスト",
    "default": "テキスト"
  },
  {
   "type": "image_picker",
   "id": "image",
   "label": "画像を選ぶ"
  }
 ],

"presets": [
  {
   "name": "画像テスト",
   "category": "画像"
  }
 ]
}
{% endschema %}

{% stylesheet %}
  .image-test {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }`
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

次に、 {%schema %} タグと {%stylesheet %} タグに以下を追加してください。

上のコード入れたらカスタマイザーでチェックボックスを表示されると思います。