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

Shopify Discussion
, , , ,
1

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

Kushagra0602_0-1707725961084.png
Kushagra0602_0-1707725961084.png961×144 9.65 KB

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

Kushagra0602_1-1707726099249.png

2

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 %}
  
    

      

        
        {{ block.settings.icon | image_url }}
      

      
        {%- if block.settings.iconName != blank -%}
          ##### {{ block.settings.iconName }}
        {%- endif -%}
        {%- if block.settings.iconTagline != blank -%}
          ##### {{ block.settings.iconTagline }}
        {%- endif -%}
      

    

  

{% endfor %}
1 Like
3

Thanks for the help. :slightly_smiling_face:

4

Thanks for the help buddy. :slightly_smiling_face: