Add the schema code in seeting_schema.json file

{% schema %}
{

“settings”: [
{
“type”: “checkbox”,
“id”: “enable_testimonial_section”,
“label”: “Enable Testimonial Section”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Custom content”
}
],
“blocks”: [
{
“type”: “text”,
“name”: “Testimonial Block”,
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_testimonial”,
“label”: “Enable This Testimonial”
},
{
“type”: “text”,
“id”: “titletext”,
“label”: “User Name”
},
{
“type”: “text”,
“id”: “place_text”,
“label”: “Location”
},
{
“type”: “textarea”,
“id”: “review_text”,
“label”: “Review”
},
{
“type”:”image_picker”,
“id”:”imagepic”,
“label”:”image”
}
]
}
],
“presets”: [
{
“name”: “Testimonial”,
“category”: “Testimonial Section”,
“blocks”: [

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

 

Add the html code where you want to show testimonial block

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

<div class=”testimonial-section” id=”testimonial-slide”>
{% for block in section.blocks %}
{% if block.settings.enable_testimonial %}
<div class=”custom-block”>
<div class=”custom__item-inner custom__item-inner–{{ block.type }}”>

<div class=”testimonial-block”>
<div class=”image-block”>
{% if block.settings.imagepic != blank %}
<img src=”{{ block.settings.imagepic | img_url }}” class=”testimonial-image”>
{% endif %}
</div>
<div class=”text-block”>
{% if block.settings.titletext != blank %}
<p class=”user-name”>{{ block.settings.titletext }}</p>
{% endif %}
{% if block.settings.place_text != blank %}
<p class=”place”>{{ block.settings.place_text }}</p>
{% endif %}
{% if block.settings.review_text != blank %}
<p class=”review”>{{ block.settings.review_text }}</p>
{% endif %}
</div>
</div>

</div>
</div>
{% endif %}
{% endfor %}
</div>

</div>
{% endif %}

 

Add the css in .css file

<style>
.custom-block{
float:left;
width:33%
}
.testimonial-title{
font-size:50px;
margin:10px 0 20px 0;
}
.testimonial-image{
border-radius:50%;
width:100%;
}
.image-block{
width:40%;
margin-left:30%;
height: 180px;
}
.text-block{
width: 80%;
margin-left: 10%;
}
.user-name{
text-align:left;
font-size:30px;
font-weight:bold;
margin-bottom: -10px;
}
.place{
text-align:left;
font-size:16px;
font-weight:normal;
margin-bottom: 10px;
}
.review{
text-align:left;
font-weight:normal;
}
@media (max-width:768px){
.testimonial-title{
font-size:30px;
}
}
@media (max-width:480px){
.testimonial-title{
font-size:25px;
}
}
</style>

 

Open chat