Please announce here

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

shopify schema タグ Type 一覧

 

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

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

 

schemaのTypeとは

 

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

 Shopify schema タグ Type カスタマイズ

 

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

 

{% schema %}
{
     "name": "Text Box",
     "settings": [
          {
               "id": "text-box",
               "type": "text",
               "label": "Heading",
               "default": "Title"          },
          {
               "id": "text",
               "type": "richtext",
                "label": "Add custom text below",
                "default": "<p>Add your text here</p>"        
          }
     ]
}
{% endschema %}

 

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

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

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

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

 

schemaタグの"type" 一覧 

TYPE一覧 TYPE説明
text  1行のテキスト
textarea 複数行のテキスト
radio ラジオボタン
select ドロップダウンリスト
checkbox チェックボックス 
range レンジスライダー
number 数字カウンター
color カラー選択
font_picker フォント選択
collection コレクション選択
product 商品選択
blog ブログ選択
page ページ選択
link_list メニュー選択
url URL選択
video_url ビデオURL選択
richtext 装飾可能なテキスト
html HTML要素
article 記事選択
image_picker 画像選択
header ヘッダー見出し
paragraph 説明用段落

 

以上が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 

 

EC Penguin おすすめ本

Leave a comment

Please note, comments must be approved before they are published