【Shopify】カスタマイズの動的セクションの作成方法

この記事では、shopifyのカスタマイズ機能にオリジナルの動的セクションを追加する方法を紹介します。

動的セクションのファイル作成

管理画面>オンラインストア>コードの編集を開く
sectionフォルダに任意の名前でファイルを作成。
〇〇.liquidで作成。特にルールはなし。

以下、一番オーソドックスなテンプレ。
これをコピペしてもらってカスタムしてもらえると🙆‍♀️

<section>
    <h2>{{section.settings.title}}</h2>
    {% if section.blocks != blank %}
    <ul>
        {% for block in section.blocks %}
            <li>
                <img src="{{ block.settings.image | img_url: 'master'}}" alt="">
                <span>{{block.settings.caption}}</span>
            </li>
        {% endfor %}
    </ul>
  {% endif %}
</section>

{% schema %}
{
  "name": "オリジナルセクション",
  "settings": [
  {
    "type": "text",
    "id": "title",
    "label": "タイトル",
    "default":"テキストテキストテキストテキスト"
  }],
  "blocks":[
  {
    "type": "grid_item",
    "name": "item",
    "settings": [
    {
      "type": "textarea",
      "id": "caption",
      "label": "内容を記入してください",
      "default": "本文が入ります。本文が入ります。本文が入ります。"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "画像を追加してください"
    }
    ]
  }
  ],
  "presets":[
    {
      "name": "オリジナルセクション"
    }
  ]
}
{% endschema %}

{% schema %}{% endschema %}の中に動的セクションの設定を記載。

　以下schemaタグで使用可能なタイプ一覧

タイプ	内容
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	説明用段落

参考サイト
https://www.shopify.com/jp/blog/partner-theme-blocks
https://ec-penguin.com/blogs/shopify/schema-type-summary