テキスト追加、画像追加、ブログや商品のコレクション指定など、テーマエディタで柔軟なカスタマイズができるスキーマ設定によく使われる、カスタマイズ用入力タイプ17選
Shopifyのセクションやブロックの作成に用いられるJSON形式のスキーマ設定。セクションやブロックを定義する役割もありますが、テーマエディタで柔軟なカスタマイズ機能を追加する役割も持ちます。
テーマエディタでのカスタマイズの例としては、
・テキスト追加
・画像を追加
・ブログや商品のコレクションを指定
・ブログや商品の表示件数を指定
などがあります。
今回は、セクションやブロックのスキーマ設定によく使われる、カスタマイズ用入力タイプ17選を紹介します。
もちろんここに載っていないタイプもあるので、今後も本記事にて追加していきたいと思います。
※テーマエディタとは、Shopifyテーマで用意されているビジュアルエディタ、ビルダーのような画面。カスタマイズ画面ともいう。
セッティングと表示
セクションやブロックでのセッティングは以下のように行います。
//セクション設定
{% schema %}
{
"name": "セクション名",
"settings": [
{
"type":"text", //入力タイプ
"id": "text", //id
"label": "説明をどうぞ" //ラベル
}
]
}
{% endschema %}//ブロック設定
{% schema %}
{
"name": "ブロック",
"blocks": [
{
"name": "タグ", // ブロックの名前
"type": "TAG", // ブロックのIDみらいなもの ※入力タイプではない
"settings": [
{
"type": "text", // 入力タイプ
"id": "tag_name", // id
"label": "タグ名" // ラベル
},
{
"type": "text", // 入力タイプ
"id": "tag_link", //id
"label": "URL" //ラベル
}
]
}
]
}
{% endschema %}ブロックには、ブロック設定の「type」と、ブロックセッティングの「type」２つがあります。
前者は、ブロックのidのようなもので、後者は本記事で解説する入力タイプになります。
次は、表示方法です。
//セクション
{{ section.settings.text }}
//ブロック
{% for block in section.blocks %} <!-- エディターで追加されたブロックをループ処理 -->
{% case block.type %}
{% when 'TAG' %}
<p>人気タグ</p>
<ul>
<li>{{block.settings.tag_name}}</li>
</ul>
{% endcase %}
{% endfor %}基本的にLiquid変数の{{ }}で取得・表示させます。
セクションは「section.settings.セッティングID」とシンプルですが、ブロックはwhenとcase制御構文を使って表示させます。
では、使用頻度が高いスキーマ入力タイプ17選と、入力例を紹介します。
スキーマの入力タイプ17選
①text: 一行のテキスト入力
//text例
{
"type": "text",
"id": "info_text",
"label": "情報",
"default": "冷凍庫に保管してください"
}②textarea: 複数行のテキスト入力
{
"type": "textarea",
"id": "welcome_message",
"label": "ウェルカムメッセージ",
"default": "ご訪問頂きありがとうございます!"
}③richtext: リッチテキスト入力
{
"type": "richtext",
"id": "product_paragraph",
"label": "配送について"
}④html:htmlエディタ
{
"type": "html",
"id": "video_embed",
"label": "Youtube iframeを入力"
}⑤image_picker: 画像をアップロード
{
"type": "image_picker",
"id": "product_image",
"label": "画像"
}⑥url: URLを入力
{
"type": "url",
"id": "button_link",
"label": "ボタンのリンク"
}⑦range: 数値の範囲を選択
{
"type": "range",
"id": "number_of_article",
"min": 6,
"max": 12,
"step": 1,
"label": "記事表示件数",
"default": 8
}⑧color: 色設定
{
"type": "color",
"id": "text_color",
"label": "テキスト色",
"default": "#000000"
}⑨checkbox: 真偽値（true/false）
{
"type": "checkbox",
"id": "true_or_false",
"label": "真偽",
"default": true
}⑩radio: ラジオボタン
{
"type": "radio",
"id": "bg_color",
"label": "背景色",
"options": [
{
"value": "yellow",
"label": "黄色"
},
{
"value": "red",
"label": "赤"
}
],
"default": "black"
}⑪select: ドロップダウンメニュー
{
"type": "select",
"id": "bg_color",
"label": "背景色",
"options": [
{
"value": "yellow",
"label": "黄色"
},
{
"value": "red",
"label": "赤色"
},
{
"value": "white",
"label": "白色"
}
],
"default": "blue"
}⑫article: ブログ記事を指定
{
"type": "article",
"id": "article",
"label": "ブログ記事指定"
}⑬blog: ブログを指定
{
"type": "blog",
"id": "blog",
"label": "ブログ指定"
}⑭collection: コレクションを指定
{
"type": "collection",
"id": "collection",
"label": "コレクション指定"
}⑮product: 商品を指定
{
"type": "product",
"id": "product",
"label": "商品指定"
}⑯video: 動画をアップロード
{
"type": "video",
"id": "video",
"label": "ライブラリーから動画を選ぶ"
}⑰font_picker: フォントを指定
{
"type": "font_picker",
"id": "text_font",
"label": "フォント",
"default": "meiryo"
}
