2023/08/16 (更新日: 2023/09/18)

【Shopify/liquid】セクションのschema（スキーマ）一覧【コピペまとめ】

Shopify Web制作

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは、かんです。

セクションパーツを作る際に、schemaを書くための備忘録としてまとめておきます。

Shopify参考記事一覧

liquidで使われるセクションやschemaについて解説

Liquidの基本的な文法


オブジェクト →{{ }}: これは変数の内容を出力するためのものです。
例えば、ある商品の名前を表示したい場合、{{ product.title }}のように使用できます。

タグ→{% %}: これはループを実行するためのもの。

セクション「Sections」

セクションは、再利用可能なモジュール的なテンプレートの一部分です。特定のページ上で複数回、または異なるページで同じコンテンツを表示することができます。

liquidで記述することで、簡単にカスタマイズができるようになり、Shopifyの管理画面で、パソコンに不慣れな方や管理者が直感的にセクションの内容を編集できます。これにより、コードの知識が少ないユーザーでもサイトのデザインやコンテンツの変更を簡単に行う仕組みですね。

schema「スキーマ」

スキーマは、特定のセクション内で使用される設定の定義を行います。スキーマを使用することで、テキストボックス、色の選択、画像のアップロードなどのカスタマイズオプションを定義できます。

サンプルコード


{% schema %}
  {
    "name": "ヘッダーセクション",
    "settings": [
      {
        "type": "text",
        "id": "header_title",
        "label": "ヘッダータイトル",
        "default": "デフォルトのタイトル"
      }
    ]
  }
{% endschema %}

こんな感じですね。
上記の例では、ヘッダーセクションのタイトルをカスタマイズできるテキストボックスをShopifyの管理画面に追加するスキーマを定義しています。

セクションリキッド一覧【コピペまとめ】

こちらを参考にしました。

公式ドキュメント


{% schema %}
  {
    "name": "サンプルのセクション",
    "tag": "section",
    "class": "dev-wrapper",
    "settings": [
      {
        "type": "header",
        "content": "クライアント指示する時に便利"
      },
      {
        "type": "paragraph",
        "content": "ここに内容を記載することができます"
      },
      {
        "type": "checkbox",
        "id": "sample_checkbox",
        "label": "チェックボックスのサンプル",
        "default": true,
        "info": "チェックボックスの情報"
      },
      {
        "type": "number",
        "id": "sample_number",
        "label": "数値サンプル",
        "default": 10,
        "info": "数値のサンプル"
      }, {
        "type": "radio",
        "id": "sample_radio",
        "label": "ラジオボックス",
        "options": [
          {
            "value": "center",
            "label": "左"
          }, {
            "value": "right",
            "label": "右"
          }
        ],
        "default": "center",
        "info": "ラジオボックスのサンプル"
      }, 
      {
        "type": "range",
        "id": "sample_range",
        "min": 1,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "スペース",
        "default": 10,
        "info": "レンジのサンプル"
      }, {
        "type": "select",
        "id": "sample_select",
        "label": "大きさ",
        "options": [
          {
            "value": "small",
            "label": "小"
          }, {
            "value": "mid",
            "label": "中"
          }, {
            "value": "big",
            "label": "大"
          }
        ],
        "default": "mid",
        "info": "selectのサンプル"
      }, {
        "type": "text",
        "id": "sample_text",
        "label": "見出し",
        "default": "見出し",
        "info": "ここにテキストを記載する"
      }, {
        "type": "html",
        "id": "sample_html",
        "label": "HTMLを記載できます"
      }, {
        "type": "textarea",
        "id": "sample_textarea",
        "label": "テキストエリア",
        "default": "ここにテキストを記載する",
        "info": "ここにテキストを記載する"
      }, {
        "type": "richtext",
        "id": "sample_paragraph",
        "label": "リッチテキスト",
        "default": "ここにテキストを記載する"
//"リッチテキストの場合はdefaultをpタグで囲ってください"
      }, {
        "type": "color",
        "id": "sample_color",
        "label": "カラー",
        "default": "#000000"
      }, {
        "type": "color_background",
        "id": "sample_color_background",
        "label": "グラデーション",
        "default": "linear-gradient(#ffffff, #000000)"
      }, {
        "type": "font_picker",
        "id": "sample_heading_font",
        "label": "見出し",
        "default": "helvetica_n4"
      }, {
        "type": "image_picker",
        "id": "sample_logo_image",
        "label": "画像"
      }, {
        "type": "article",
        "id": "sample_article",
        "label": "ブログ・記事"
      }, {
        "type": "blog",
        "id": "sample_blog",
        "label": "ブログのカテゴリ"
      }, {
        "type": "collection",
        "id": "sample_collection",
        "label": "コレクションのカテゴリ"
      }, {
        "type": "link_list",
        "id": "sample_menu",
        "label": "任意のメニューリスト"
      }, {
        "type": "page",
        "id": "sample_page",
        "label": "任意のページを選択"
      }, {
        "type": "product",
        "id": "sample_product",
        "label": "商品を選択できます"
      }, {
        "type": "url",
        "id": "sample_button_link",
        "label": "ボタンのリンク先"
      }, {
        "type": "video_url",
        "id": "sample_product_description_video",
        "label": "ビデオリンク先",
        "accept": ["youtube", "vimeo"]
      }, {
        "type": "liquid",
        "id": "sample_liquid",
        "label": "liquidをここに記載します"
      }
    ],
    "blocks": [
        {
            "name": "ブロックの名前",
            "type": "box",
            "limit": 4,
            "settings": [
                {
                    "type": "image_picker",
                    "id": "sample_box",
                    "label": "ボックスのラベル"
                }
            ]
        }
    ],
    "presets": [
      {
        "name": "サンプルのセクション",
        "settings": {},
        "blocks": [
            {
                "type": "box"
            }
        ]
      }
    ]

  }
{% endschema %}

出力方法について

公式ドキュメント

»https://shopify.dev/docs/themes/architecture/sections/section-schema


<div>
<p>{{ section.settings.sample_text }}</p>
//セクションのセッティングスのidを記載する

{% if section.settings.sample_checkbox %}
    <p>{{ section.settings.sample_textarea }}</p>
{% endif %}
//チェックボックスで出し分けをする

{% for block in section.blocks %}
    {% case block.type %}
    {% when 'box' %}
        <div class="box" {{ block.shopify_attributes }}>
            {{ block.settings.sample_box | image_url: width: 400 | image_tag }}
        </div>
    {% endcase %}
{% endfor %}
</div>
//blockの出力方法
//

このように出力されればOKです！