【Shopify】schema type分類とプロパティ

{
  "type": "header",
  "content": "設定内容の説明が入ります",
  "info": "補足説明が入ります"
}

{
  "type": "paragraph",
  "content": "設定の説明や補足事項などが入ります。"
}

{
 "type": "text",
 "id": "id_text",
 "label": "テキストの入力欄です",
 "default": "デフォルトのテキスト",
 "info": "説明文です",
 "placeholder": {
    "ja": "タイトル",
    "en": "Title",
    "de": "Titel",
    "es": "Título",
    "fr": "Titre"
  }
}

<!-- ◎出力例 -->
{{ block.settings.id_text }}

{
  "type": "inline_richtext",
  "id": "id_inline_richtext",
  "label": "テキストの入力欄です",
  "default": "デフォルトのテキスト",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{{ block.settings.id_inline_richtext }}

{
  "type": "richtext",
  "id": "id_richtext",
  "label": "リッチテキストの入力欄です",
  "default": "<p>デフォルトのテキスト</p>",
  "info": "説明文です",
  "placeholder": "t:sections.sample.blocks.richtext.settings.id_richtext.placeholder"
}

<!-- ◎出力例 -->
{{ block.settings.id_richtext }}

{
  "type": "checkbox",
  "id": "id_checkbox",
  "label": "チェックボックスです",
  "default": true, //指定しない場合のデフォルトは false
  "info": "説明文です"
}

<!-- ◎出力例 -->
{% if section.settings.id_checkbox == false %}class{% endif %}

{
  "type": "radio",
  "id": "id_radio",
  "label": "ラジオボタンです",
  "info": "説明文です",
  "options": [
    {
      "value": "left",
      "label": "左"
    },
    {
      "value": "center",
      "label": "中央"
    },
    {
      "value": "right",
      "label": "右"
    }
  ],
  "default": "left"
},

<!-- ◎出力例 -->
<div class="align-{{ section.settings.id_radio }}"></div>

{
  "type": "range",
  "id": "id_range",
  "min": 8,
  "max": 24,
  "step": 4,
  "default": 16, //必須
  "unit": "個",
  "label": "レンジスライダーです",
  "info": "説明文です"
}

<!-- ◎出力例 -->
<div class="grid--{{ section.settings.id_range }}-col-desktop"></div>

{
  "type": "select",
  "id": "id_select",
  "label": "セレクターです",
  "info": "説明文です",
  "options": [
    {
      "group": "グループA",
      "value": "top",
      "label": "上"
    },
    {
      "group": "グループA",
      "value": "middle",
      "label": "中央"
    },
    {
      "group": "グループB",
      "value": "bottom",
      "label": "下"
    }
  ],
  "default": "middle"
}

<!-- ◎出力例 -->
<div class="margin-{{ section.settings.id_select }}"></div>

{
  "type": "number",
  "id": "id_number",
  "label": "数値入力です",
  "default": 20,
  "info": "説明文です"
}

<!-- ◎出力例 -->
{{ section.settings.id_number }}px;

{
  "type": "article",
  "id": "id_article",
  "label": "記事を選択",
  "info": "説明文です"
}

<!-- ◎出力例 -->
<a href="{{ section.settings.id_article.url }}">{{ section.settings.id_article }}</a>

{
  "type": "blog",
  "id": "id_blog",
  "label": "ブログを選択",
  "info": "説明文です"
}

<!-- ◎出力例 -->
<a href="{{ section.settings.id_blog.url }}">{{ section.settings.id_blog }}</a>

{
  "type": "collection",
  "id": "id_collection",
  "label": "コレクションを選択",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{% render 'card-collection',
  card_collection: block.settings.id_collection
%}

{
  "type": "collection_list",
  "id": "id_collection_list",
  "label": "コレクションリストを選択",
  "limit": 8,
  "info": "説明文です"
}

<!-- ◎出力例 -->
{% for collection in block.settings.id_collection_list %}
    {{ collection.title }}
{% endfor %}

{
  "type": "product",
  "id": "id_product",
  "label": "商品を選択",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{% 
  render 'card-product',
  card_product: block.settings.id_product
%}

{
"type": "page",
"id": "id_page",
"label": "ページを選択",
"info": "説明文です"
}

<!-- ◎出力例 -->
<a href="{{ block.settings.id_page.url }}">{{ block.settings.id_page.title }}</a>

{
"type": "link_list",
"id": "id_link_list",
"default": "main-menu",
"label": "メニューを選択",
"info": "説明文です"
}

<!-- ◎出力例 -->
{%- if block.settings.id_link_list != blank -%}
  <ul>
    {%- for link in block.settings.id_link_list.links -%}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
    {%- endfor -%}
  </ul>
{%- endif -%}

{
  "type": "color",
  "id": "id_color",
  "label": "テキストカラー",
  "default": "#000000",
  "info": "説明文です"
}

<!-- ◎出力例 -->
color: {{ settings.id_color }};

{
  "type": "color_background",
  "id": "id_color_background",
  "label": "背景色",
  "default": "linear-gradient(#ffffff, #000000)",
  "info": "説明文です"
}

<!-- ◎出力例 -->
background: {{ settings.id_color_background }};

{
  "type": "font_picker",
  "id": "id_font_picker",
  "label": "フォントを選択",
  "default": "helvetica_n4",
  "info": "説明文です"
}

<!-- ◎出力例 -->
:root{
  --font-heading-family: {{ settings.id_font_picker.family }}, {{ settings.id_font_picker.fallback_families }};
}

{
  "type": "image_picker",
  "id": "id_image",
  "label": "画像を選択",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{{ 
  section.settings.id_image
  | image_url: width: 3840
  | image_tag:
    loading: 'lazy'
}}

{
  "type": "video",
  "id": "id_video",
  "label": "動画を選択",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{%- liquid
  assign video_id = section.settings.video.id | default: section.settings.video_url.id
-%}
<deferred-media data-media-id="{{ video_id }}">

{
  "type": "video_url",
  "id": "id_video_url",
  "label": "動画のURLを入力",
  "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",//デフォルト値の指定が可能です。
  "info": "説明文です",
  "accept": [
    "youtube",
    "vimeo"
  ]
}

<!-- ◎出力例 -->
ID: {{ settings.id_video_url.id }}
Type: {{ settings.id_video_url.type }}

{
  "type": "url",
  "id": "id_url",
  "label": "URLを入力",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{{ block.settings.id_url }}

{
  "type": "html",
  "id": "id_html",
  "label": "HTMLを入力",
  "info": "説明文です"
}

<!-- ◎出力例 -->
{{ section.settings.id_html }}

{
  "type": "liquid",
  "id": "id_liquid",
  "label": "カスタマイズされたLiquid",
  "default": "{% if product %}sample{% endif %}",
  "info": "アプリのスニペットやその他のLiquidコードを追加して、高度なカスタマイズを作成します。"      	
}

<!-- ◎出力例 -->
{{ section.settings.id_liquid }}