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>