Preview:
<div id="section-{{ section.id }}">
  {%- for block in section.blocks -%}
    <ul>
      <li class="cate"> {{ block.settings.cate }} </li>
      <li class="date"> {{ block.settings.date }} </li>
      <li class="text"> {{ block.settings.text }} </li>
    </dl>
  {%- endfor -%}
</div>

{% schema %}
  {
    "name": "Top-topics",//セクション名
    "class": "top-topics",//セクションに自動で追加されるclass名
    "blocks": [// 画像や商品など数が増える可能性がある設定を記述する
      {
        "type": "text",
        "name": "Topic",//入力画面でのタイトル
        "limit": 5,
        "settings": [
          {
            "type": "select",
            "id": "cate",
            "label": "Category",
            "options": [
              {
                "value": "topics",
                "label": "Topics"
              },
              {
                "value": "news",
                "label": "News"
              }
            ],
            "default": "topics"
          },
          {
            "id": "date",
            "type": "text",
            "label": "日付を入力",
            "default": "2021.03.27"
          },
          {
            "id": "text",
            "type": "text",
            "label": "テキストを入力",
            "default": "テキストを入力"
          }
        ]
      }
    ],
    "presets":[
      {
        "category": "Text",//管理画面のセクション一覧のグループに表示される名前
        "name": "Top topics"
      }
    ]
  }
{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}
{% endjavascript %}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter