[Shopify] Schemaタグのブロックtype一覧 まとめ

今回はShopifyのカスタマイズ編集に必須なSchemaタグで設定できるブロックのType一覧について解説していきます。

開発をしているとschemaタグを使用することが多々あり、なかなか一覧でまとまっていなくて不便だなぁと思っていたので、これを機にschemaで使用できるtype一覧をまとめます。

schemaのTypeとは

schemaタグ自体をコード上で記載していくと、下記のようにカスタマイズ画面の左側でテキストや画像を設定できるようになります。

ちなみに、schemaタグのコードは下記のようになっています。

今回紹介していくのは、この"type"の部分ですね。

まだschemaタグちゃんと理解できていない方は下記記事をご参考に。

https://ec-penguin.com/blogs/shopify/schema-tag-perfect-guide-steps

テキストやテキストエリア、リンク、画像などはよく使用するのですが、他にもドロップダウンやラジオボタン、カラー選択など知っていると便利な様々なタイプがありましたので紹介していきます。

schemaタグの"type" 一覧 

以上がShopifyで使用できるschemaタグの一覧です。なかなか使う頻度は低くても、いざという時に便利なtypeもあります。各typeの使い方までは覚える必要はありませんが、各typeが存在すること自体を知っておくことで「そういえば！」と思い出すことができるかも知れません。

各Typeの具体的な使用方法

次に各タイプの使用方法、具体例を記載していきます。

タイプの一覧が分かっても、実際使用する時はどんな感じで使用したら良いのー？って方はぜひ下記参考にしてみてください。

schema type "text"

{
     "type": "text",
     "id": "text_id_desu",
     "default": "デフォルトテキスト",
     "label": "ヘッダーテキスト"
}

schema type "textarea"

{
　　"type": "textarea",
　　"id": "textarea_id_desu",
　　"default": "デフォルトの文章です",
　　"label": "要素説明テキスト"
}

schema type "radio"

{
　　"type": "radio",
　　"id": "radio_id_desu",
　　"options": [
　　　{ "value": "right", "label": "右寄せ"},
　　　{ "value": "center", "label": "中央寄せ"}
　　],
　　"label": "ロゴ位置"
}

schema type "select"

{
　　"type": "select",
　　"id": "select_id_desu"
　　"options": [
　　　{ "value": "select1", "label": "選択肢1"},
　　　{ "value": "select2", "label": "選択肢2"},
　　　{ "value": "select3", "label": "選択肢3"}
　　],
　　"label": "ドロップダウン選択肢"
}

schema type "checkbox"

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

schema type "range"

{
　　"type": "range",
　　"id": "range_id_desu",
　　"min": 1,
　　"max": 5,
　　"step": 1,
　　"unit": "sec",
　　"label": "フェードイン時間",
　　"default": 4
}

schema type "number"

{
　　"type": "number",
　　"id": "number_id_desu",
　　"label": "顧客の最大数",
　　"default": 6
}

schema type "color"

{
　　"type": "color",
　　"id": "color_id_desu",
　　"label": "背景色",
　　"default": "#efefef"
}

schema type "font_picker"

{
　　"name": "Typography",
　　"settings": [
　　　　{
　　　　　　"type": "font_picker",
　　　　　　"label": "フォント選択",
　　　　　　"id": "font_id_desu",
　　　　　　"default": "helvetica_n4"
　　　　}
　　]
}

schema type "collection"

{
　　"type": "collection",
　　"id": "collection_d_desu",
　　"label": "特集コレクション"
}

schema type "product"

{
　　"type": "product",
　　"id": "product_id_desu",
　　"label": "特集商品"
}

schema type "blog"

{
　　"type": "blog",
　　"id": "blog_id_desu",
　　"label": "ブログ選択"
}

schema type "page"

{
　　"type": "page",
　　"id": "page_id_desu",
　　"label": "ページ選択"
}

schema type "link_list"

{
　　"type": "link_list",
　　"id": "nav_id_desu",
　　"label": "メニュー選択"
}

schema type "url"

{
　　"id": "url_id_desu",
　　"type": "url",
　　"label": "URL選択"
}

schema type "video_url"

{
　　"id": "video_id_desu",
　　"type": "video_url",
　　"label": "動画URL",
　　"accept": ["youtube", "vimeo"],
　　"default": "https://www.youtube.com/watch?v=drvH4XbZoPs"
　　"info": "text",
　　"placeholder": "url"
}

schema type "richtext"

{
　　"type": "richtext",
　　"id": "richtext_id_desu",
　　"label": "リッチテキスト",
　　"default": "<p>デフォルトの文字です</p>"
}

schema type "html"

{
　　"type": "html",
　　"id": "html_id_desu",
　　"label": "カスタムHTML",
　　"default": "<div><p>デフォルトのHTML要素</p></div>"
}

schema type "article"

{
　　"type": "article",
　　"id": "article_id_desu",
　　"label": "記事選択"
}

schema type "image_picker"

{
　　"name": "ロゴ",
　　"settings": [
　　　　{
　　　　　　"type": "image_picker",
　　　　　　"id": "image_id_desu",
　　　　　　"label": "画像選択"
　　　　}
　　]
}

ShopifyのschemaタグのType一覧　まとめ 

以上、ShopifyのschemaタグのType一覧でした！

schemaタグをマスターできるようになると、画像差し替えやURL差し替え、テキスト差し替えなどを開発者側で対応する必要がなく、クライアント側で対応できるようになります。

すると、

開発者 = 差し替えの手間がなくなる

クライアント = 何回でも気兼ねなく、気に入るまで差し替えできる

と言ったWIN-WINの関係が構築できるので非常におすすめです。

 最後までお読みいただき、ありがとうございました。それでは本日も良い1日を！

Shopify公式参考リンク

https://shopify.dev/docs/themes/settings#input-setting-types