Shopifyのセクションやブロックをカスタマイズする際に使用するschemaのtypeの中でもよく使用するものをまとめました。

schemaのtypeについて

schemaのtypeは、以下のようなコード内で使用します。

{
   "type": "text",
   "id": "custom-section_text",
   "label": "テキストを入力する"
}

こちらは、テキストの入力を出来るようにするセクションを追加するschema内のコードです。
このtype部分を変更することで、様々なセクションを作成することが出来るようになります。

text

１行のテキストを入力することができます。

{
   "type": "text",
   "id": "custom_text",
   "label": "テキストを入力する",
   "default": "デフォルトのテキスト"
}

textarea

長文のテキストを入力することができます。

{
   "type": "textarea",
   "id": "custom_textarea",
   "label": "テキストを入力する",
   "default": "デフォルトのテキスト"
}

html

HTMLを追加することができます。

{
  "type": "html",
  "id": "add_html",
  "label": "HTMLを追加する"
}

liquid

Liquidを追加することができます。

{
  "type": "liquid",
  "id": "add_liquid",
  "label": "リキッドを追加する"
}

color

色を指定することができます。

{
　　"type": "color",
　　"id": "custom_color",
　　"label": "色を指定する",
　　"default": "#fff"
}

font_picker

Shopifyのフォントライブラリからフォントを選択することができます。
default属性の設定が無いとエラーになってしまうので必須で入力しましょう。

{
  "type": "font_picker",
  "id": "custom_font",
  "label": "フォントを選択する",
  "default": "helvetica_n4"
}

image_picker

画像の選択（挿し替え）ができます。

{
　　"type": "image_picker",
　　"id": "custom_img",
　　"label": "画像を選択する"
}

url

URLを指定することができます。

{
　　"type": "url",
　　"id": "custom_url",
　　"label": "URLを指定する"
}

video_url

YoutubeやVimeo等の動画URLを追加することができます。

{
  "type": "video_url",
  "id": "add_video",
  "label": "動画URLを追加する",
  "accept": [
    "youtube",
    "vimeo"
  ]
}

link_list

リンクリスト（メニュー）を追加することができます。

{
  "type": "link_list",
  "id": "custom_menu",
  "label": "メニューを追加する"
}

メニューをリストで表示する場合はLiquidファイルに以下のように記述します。
スタイリングはulやliタグにクラスをつけてCSSを指定してください。

<ul>
    {% for link in linklists[ section.settings.custom_menu ].links %}
      <li>
        <a href="{{ link.url }}">{{ link.title | escape }}</a>
      </li>
    {% endfor %}
</ul>

range

レンジスライダーを設置できます。
フォントサイズを変更したりブロックの数を指定する際に使用します。
設定する項目が少し多いので、1つずつコメントアウトで解説していきます。

{
　　"type": "range",
　　"id": "custom_range",
　　"min": 1,　　//最小値
　　"max": 5,　  //最大値
　　"step": 1,　 //1メモリ値
　　"label": "フォントサイズ",　//カスタマイズ画面に表示されるテキスト
　　"default": 4　//デフォルト指定値
}

collection

特集コレクションを選択することができます。

{
　　"type": "collection",
　　"id": "custom_collection",
　　"label": "特集コレクションを選択する"
}

collection_list

コレクションリストを作成することができます。
選択したコレクションは配列で返されます。

{
  "type": "collection_list",
  "id": "custom_collection_list",
  "label": "コレクションリスト",
  "limit": 4
}

checkbox

チェックボックスを追加することができます。

{
　　"type": "checkbox",
　　"id": "custom_checkbox",
　　"default": true,
　　"label": "チェックボックス"
}

radio

ラジオボタンを追加することができます。

{
  "type": "radio",
  "id": "custom_radio",
  "label": "ラジオボタン",
  "options": [
    {
      "value": "left",
      "label": "Left"
    },
    {
      "value": "right",
      "label": "Right"
    }
  ],
  "default": "left"
}

select

セレクトボックスを追加することができます。

{
  "type": "select",
  "id": "custom_select",
  "label": "セレクトボックス",
  "options": [
    {
      "value": "top",
      "label": "Top"
    },
    {
      "value": "middle",
      "label": "Middle"
    },
    {
      "value": "bottom",
      "label": "Bottom"
    }
  ],
  "default": "middle"
}

article

ブログ記事を選択することができます。

{
  "type": "article",
  "id": "custom_article",
  "label": "記事を選択する"
}

product

ショップに登録されている商品の中から商品を選択することができます。

{
　　"type": "product",
　　"id": "custom_product",
　　"label": "商品を選択する"
}

product_list

商品リストを作成することができます。
選択した商品は配列で返されます。

{
  "type": "product_list",
  "id": "custom_product_list",
  "label": "商品リスト",
  "limit": 8
}

blog

ブログのカテゴリを選択することができます。

{
　　"type": "blog",
　　"id": "custom_blog",
　　"label": "ブログを選択する"
}

page

ページ（固定ページ）を選択することができます。

{
　　"type": "page",
　　"id": "custom_page",
　　"label": "ページを選択する"
}

richtext

リッチテキストを追加することができます。

{
　　"type": "richtext",
　　"id": "custom_richtext",
　　"label": "リッチテキストを入力する",
　　"default": "<p>デフォルトのテキスト</p>"
}

まとめ

schemaのtypeをご紹介しました。
Shopifyのschemaタグを使うことで、幅広いカスタマイズが可能になるのでぜひ色々試してみてください！


■パートナー募集について
運営元であるkraftでは一緒に活動するパートナーを募集しています。
個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。
ご興味のある方は、こちらよりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます)

具体的な内容については以下URLをご確認ください。
パートナー募集の詳細について