How can I create a new section in the Dawn Theme?

[Kushagra0602]

Hi all, I want to create a new section in the Dawn Theme as shown in the screenshot below

I've tried to create it in the theme with the custom liquid code but getting an error. Can someone guide me on what am I doing wrong and how can I fix that?

<div class="iconContainer">
  <div class="iconBox">
    <div class="icon">
      <img
        src="
          {{ block.settings.icon | image_url: width: 3840
          | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}
        "
        height="100"
        width="100"
      >
      {{ block.settings.icon | image_url }}
    </div>
    <div class="iconTextBox">
      {%- if block.settings.iconName != blank -%}
        <h5 class="iconName iconText">{{ block.settings.iconName }}</h5>
      {%- endif -%}
      {%- if block.settings.iconTagline != blank -%}
        <h5 class="iconTagline iconText">{{ block.settings.iconTagline }}</h5>
      {% endif %}
    </div>
  </div>
</div>

{%- style -%}
  .iconContainer{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .iconBox{
    width: 150px;
    height: 150px;
  }
{%- endstyle -%}

{% schema %}
{
  "name": "Footer Icons",
  "class": "section",
  "tag": "section",
  "blocks": [
    {
      "type": "column",
      "name": "Icon Box",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon",
          "info": "Icon image to be uploaded here"
        },
        {
          "type": "richtext",
          "id": "iconName",
          "label": "Icon Name"
        },
        {
          "type": "richtext",
          "id": "iconTagline",
          "label": "Icon Tagline"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Footer Icons"
  }]}
{% endschema %}

Error:

1. It's showing unknow object block used in line 6,
2. On the Frontend showing invalid url

[ThePixelEdge · Accepted solution]

Hi @Kushagra0602 ,

It seems you are missing a crucial step of calling the block loop before outputting the content , Please refer to the code below 

{% for block in section.blocks %}
  <div class="iconContainer">
    <div class="iconBox">
      <div class="icon">
        <img
          src="{{ block.settings.icon | image_url: width: 3840 | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}"
          height="100"
          width="100"
        >
        {{ block.settings.icon | image_url }}
      </div>
      <div class="iconTextBox">
        {%- if block.settings.iconName != blank -%}
          <h5 class="iconName iconText">{{ block.settings.iconName }}</h5>
        {%- endif -%}
        {%- if block.settings.iconTagline != blank -%}
          <h5 class="iconTagline iconText">{{ block.settings.iconTagline }}</h5>
        {%- endif -%}
      </div>
    </div>
  </div>
{% endfor %}

[Kushagra0602]

Thanks for the help. 🙂

[Kushagra0602]

Thanks for the help buddy. 🙂