Follow below steps to add testimonial section.
- Go to theme -> Edit code -> Section
- Create a section and name it testimonials
- Paste the code
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
{% style %}
.multicolumn {
padding: 35px 0px;
background: {{ section.settings.testimonial_section_background }};
}
.reviews {
color: {{ section.settings.star_color }};
}
.multicolumn-card {
background: {{ section.settings.testimonial_background }};
padding: 20px;
box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}
@media only screen and (max-width: 800px) {
.multicolumn-list__item.slider__slide {
width: 90%;
}
}
{% endstyle %}
<div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
<div class="page-width">
<div class="title-wrapper--self-padded-mobile {% if section.settings.heading_alignment == 'center' %} center{% endif %}">
<h2 class="title">
{{ section.settings.title | escape }}
</h2>
</div>
<div class="{% if section.settings.heading_alignment == 'center' %} center{% endif %}">
{%- if section.settings.subtitle != blank -%}
<h3>{{ section.settings.subtitle | escape }}</h3>
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter">
<ul class="multicolumn-list grid grid--1-col{% if section.blocks.size > 3 and section.settings.image_width != 'full' %} grid--2-col-tablet grid--4-col-desktop{% elsif section.blocks.size > 3 and section.settings.image_width == 'full' %} grid--2-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} slider slider--mobile grid--peek{% endif %}"
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign highest_ratio = 0
for block in section.blocks
if block.settings.image.aspect_ratio > highest_ratio
assign highest_ratio = block.settings.image.aspect_ratio
endif
endfor
-%}
{%- for block in section.blocks -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}" {{ block.shopify_attributes }}>
<div class="multicolumn-card">
{%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
{% assign spaced_image = true %}
{% endif %}
{% if block.settings.toggle_image == true %}
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
<div class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
{% endif %}>
<img
srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
{%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}"
src="{{ block.settings.image | img_url: '550x' }}"
sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
(min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
calc(100vw - 30px)"
alt="{{ block.settings.image.alt }}"
height="{{ block.settings.image.height }}"
width="{{ block.settings.image.width }}"
loading="lazy"
>
</div>
</div>
{%- endif -%}
{%- endif -%}
<div class="multicolumn-card__info">
{%- if block.settings.text != blank -%}
<div class="rte">{{ block.settings.text }}</div>
{%- endif -%}
{%- if block.settings.title != blank -%}
<h3>{{ block.settings.title | escape }}</h3>
{%- endif -%}
{% if block.settings.toggle_review_stars == true %}
<div class="Testimonial__Content">
<div class="reviews">
{% if block.settings.stars_count == "5" %}
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
{%- elsif block.settings.stars_count == "4.5" -%}
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
{%- elsif block.settings.stars_count == "4" -%}
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa fa-star-o"></i>
{%- elsif block.settings.stars_count == "3" -%}
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
{%- elsif block.settings.stars_count == "2" -%}
<i class="fa fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
{%- endif -%}
</div>
</div>
{%- endif -%}
</div>
</div>
</li>
{%- endfor -%}
</ul>
{%- if section.settings.swipe_on_mobile -%}
<div class="slider-buttons no-js-hidden medium-hide">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<script src="https://kit.fontawesome.com/c8e4d183c2.js"></script>
{% schema %}
{
"name": "Testimonials",
"class": "spaced-section spaced-section--full-width",
"tag": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Testimonials",
"label": "t:sections.multicolumn.settings.title.label"
},
{
"type": "text",
"id": "subtitle",
"label": "Sub heading",
"default": "Get inspired by other customers"
},
{
"type": "select",
"id": "heading_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "Heading alignment"
},
{
"type": "select",
"id": "image_width",
"options": [
{
"value": "third",
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
},
{
"value": "half",
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
},
{
"value": "full",
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
}
],
"default": "full",
"label": "t:sections.multicolumn.settings.image_width.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
},
{
"value": "circle",
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
}
],
"default": "adapt",
"label": "t:sections.multicolumn.settings.image_ratio.label"
},
{
"type": "select",
"id": "column_alignment",
"options": [
{
"value": "left",
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
}
],
"default": "left",
"label": "t:sections.multicolumn.settings.column_alignment.label"
},
{
"type": "select",
"id": "background_style",
"options": [
{
"value": "none",
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
},
{
"value": "primary",
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
},
{
"value": "secondary",
"label": "t:sections.multicolumn.settings.background_style.options__3.label"
}
],
"default": "primary",
"label": "t:sections.multicolumn.settings.background_style.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
},
{
"type": "color",
"id": "star_color",
"label": "Star color",
"default": "#ffcc33"
},
{
"type": "color",
"id": "testimonial_background",
"label": "Testimonial background",
"default": "#ffffff"
},
{
"type": "color",
"id": "testimonial_section_background",
"label": "Section background",
"default": "#eaeaea"
}
],
"blocks": [
{
"type": "column",
"name": "Customer",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
},
{
"type": "checkbox",
"id": "toggle_image",
"default": true,
"label": "Show/Hide"
},
{
"type": "text",
"id": "title",
"default": "Full Name",
"label": "Customer"
},
{
"type": "richtext",
"id": "text",
"default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "Feedback"
},
{
"type": "select",
"id": "stars_count",
"options": [
{
"value": "5",
"label": "5"
},
{
"value": "4.5",
"label": "4.5"
},
{
"value": "4",
"label": "4"
},
{
"value": "3",
"label": "3"
},
{
"value": "2",
"label": "2"
}
],
"default": "5",
"label": "Stars count"
},
{
"type": "checkbox",
"id": "toggle_review_stars",
"default": true,
"label": "Show stars"
}
]
}
],
"presets": [
{
"name": "Testimonials",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
https://youtu.be/FM48V-gTTPc
Hire Me