Add the schema in setting_schema.json file

{% schema %}
{

“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Custom content”
}
],
“blocks”: [
{
“type”: “text”,
“name”: “wright text”,
“settings”: [
{
“type”: “text”,
“id”: “titletext”,
“label”: “text highlight”
},
{
“type”:”image_picker”,
“id”:”imgepic”,
“label”:”image”
},
{
“type”: “select”,
“id”: “width”,
“label”: “Container width”,
“default”: “50%”,
“options”: [
{
“value”: “25%”,
“label”: “25%”
},
{
“value”: “33%”,
“label”: “33%”
},
{
“value”: “50%”,
“label”: “50%”
},
{
“value”: “66%”,
“label”: “66%”
},
{
“value”: “75%”,
“label”: “75%”
},
{
“value”: “100%”,
“label”: “100%”
}
]
}

]
},
{
“type”: “image”,
“name”: “img”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “image highlight”
}

]
}
],
“presets”: [
{
“name”: “Custom content layout”,
“category”: “Advanced layout form d”,
“blocks”: [

{
“type”: “text”
}
]
}
]
}
{% endschema %}

 

Add the html code where you want to show the section

<div class=”page-width”>
{% if section.settings.title != blank %}
<div class=”text-center”>
<h4 class=”h2″>{{ section.settings.title | escape }}</h4>
</div>
{% endif %}

<div class=””>
{% for block in section.blocks %}

<div class=”custom__item custom__item–{{block.id}}” {{ block.shopify_attributes }}>
<div class=”custom__item-inner custom__item-inner–{{ block.type }}”>

<div class=””>
{% if block.settings.titletext != blank %}
<h4 class=””>{{ block.settings.titletext }}</h4>
{% endif %}
{% if block.settings.imgepic != blank %}
<img src=” {{ block.settings.imgepic | img_url }}”>
{% endif %}
{% if block.settings.image != blank %}
<img src=” {{ block.settings.image | img_url }}”>
{% endif %}
</div>

</div>
</div>

{% endfor %}
</div>