← Back to Sections
3 Testimonials
A versatile testimonials section designed to showcase customer feedback with profile photos, star ratings, and rich text reviews. Perfect for building trust and social proof by highlighting authentic customer experiences and satisfaction.
Key Features:
- Display up to 3 testimonials in a clean, card-based layout
- Profile images with customizable sizing, borders, and opacity controls
- 5-star rating system with adjustable colors and visibility toggle
- Rich text support for testimonial titles, content, and customer names
- Responsive typography using clamp() for perfect scaling across devices
- Flexible color options: use your theme's color scheme or apply custom branding
- Mobile layout options: stack vertically or enable horizontal scrolling
- Comprehensive spacing controls for padding, margins, and gaps
- Optional box shadows and rounded corners for modern card styling
Perfect for: Customer reviews, client testimonials, user feedback, case study highlights, or any social proof content that combines photos, ratings, and personal stories.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
{% if section.settings.top_border_thickness > 0 %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
{% if section.settings.bottom_border_thickness > 0 %}
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-testimonial-slider-section {
grid-row-gap: {{ section.settings.section_gap }}px;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left: {{ section.settings.desktop_horizontal_padding }}px;
padding-right: {{ section.settings.desktop_horizontal_padding }}px;
display: flex;
}
.section-{{ section.id }} .bc-heading * {
font-size: clamp({{ section.settings.heading_size | times: section.settings.heading_mobile_scale_ratio }}rem, 4vw, {{ section.settings.heading_size }}rem) !important;
line-height: {{ section.settings.heading_line_height }};
max-width: {{ section.settings.heading_max_width }}ch;
text-align: center;
margin-top: 0;
margin-bottom: {{ section.settings.heading_margin }}px;
}
.section-{{ section.id }} .bc-testimonial-slider-div {
grid-column-gap: {{ section.settings.column_gap }}px;
display: flex;
}
.section-{{ section.id }} .bc-testimonial-slider-column {
grid-row-gap: {{ section.settings.box_inner_gap }}px;
background-color: {{ section.settings.box_background_color }};
border-radius: {{ section.settings.box_border_radius }}px;
flex-direction: column;
align-items: center;
padding: {{ section.settings.box_padding_top }}px {{ section.settings.box_padding_side }}px {{ section.settings.box_padding_bottom }}px;
display: flex;
position: relative;
color: {{ section.settings.box_text_color }};
{% if section.settings.box_shadow %}
box-shadow: 0 {{ section.settings.box_shadow_y }}px {{ section.settings.box_shadow_blur }}px rgba(0, 0, 0, {{ section.settings.box_shadow_opacity | divided_by: 100.0 }});
{% endif %}
}
.section-{{ section.id }} .bc-testimonial-slider-column * {
color: {{ section.settings.box_text_color }};
}
.section-{{ section.id }} .bc-testimonial-slider-column-star {
width: {{ section.settings.star_size }}px;
height: {{ section.settings.star_size }}px;
}
.section-{{ section.id }} .bc-name * {
font-size: clamp({{ section.settings.author_size | times: section.settings.author_mobile_scale_ratio }}rem, 4vw, {{ section.settings.author_size }}rem) !important;
line-height: {{ section.settings.author_line_height }};
max-width: {{ section.settings.author_max_width }}ch;
}
.section-{{ section.id }} .bc-title * {
text-align: center;
font-size: clamp({{ section.settings.title_size | times: section.settings.title_mobile_scale_ratio }}rem, 4vw, {{ section.settings.title_size }}rem) !important;
line-height: {{ section.settings.title_line_height }};
max-width: {{ section.settings.title_max_width }}ch;
margin: 0 0 {{ section.settings.title_margin }}px 0;
}
.section-{{ section.id }} .bc-text * {
text-align: center;
font-size: clamp({{ section.settings.text_size | times: section.settings.text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.text_size }}rem) !important;
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
}
.section-{{ section.id }} .bc-testimonial-slider-column-stars-div {
justify-content: center;
align-items: center;
display: flex;
grid-column-gap: 5px;
margin-bottom: {{ section.settings.stars_margin }}px;
}
.section-{{ section.id }} .bc-testimonial-slider-image {
width: {{ section.settings.image_size }}px;
height: {{ section.settings.image_size }}px;
border-radius: 50%;
position: absolute;
top: -{{ section.settings.image_size | divided_by: 2 }}px;
object-fit: cover;
opacity: {{ section.settings.image_opacity }}%;
{% if section.settings.image_border %}
border: {{ section.settings.image_border_width }}px solid {{ section.settings.image_border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-testimonial-slider-inner-div {
height: 100%;
grid-column-gap: 20px;
grid-row-gap: {{ section.settings.box_inner_gap }}px;
flex-direction: column;
justify-content: space-between;
align-items: center;
display: flex;
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} .bc-testimonial-slider-section {
padding-left: {{ section.settings.tablet_horizontal_padding }}px;
padding-right: {{ section.settings.tablet_horizontal_padding }}px;
}
.section-{{ section.id }} .bc-testimonial-slider-div {
grid-column-gap: {{ section.settings.column_gap_tablet }}px;
}
.section-{{ section.id }} .bc-testimonial-slider-column {
padding-left: {{ section.settings.box_padding_side_tablet }}px;
padding-right: {{ section.settings.box_padding_side_tablet }}px;
}
.section-{{ section.id }} .bc-testimonial-slider-image {
width: {{ section.settings.image_size_tablet }}px;
height: {{ section.settings.image_size_tablet }}px;
top: -{{ section.settings.image_size_tablet | divided_by: 2 }}px;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} .bc-testimonial-slider-section {
padding-left: {{ section.settings.mobile_horizontal_padding }}px;
padding-right: {{ section.settings.mobile_horizontal_padding }}px;
}
.section-{{ section.id }} .bc-testimonial-slider-div {
grid-row-gap: {{ section.settings.row_gap_mobile }}px;
flex-direction: {% if section.settings.layout_mobile == 'column' %}column{% else %}row{% endif %};
{% if section.settings.layout_mobile == 'column' %}
align-items: center;
{% else %}
overflow-x: auto;
padding-bottom: 20px;
{% endif %}
}
.section-{{ section.id }} .bc-testimonial-slider-column {
{% if section.settings.layout_mobile == 'row' %}
min-width: {{ section.settings.column_width_mobile }}px;
{% endif %}
padding-left: {{ section.settings.box_padding_side_mobile }}px;
padding-right: {{ section.settings.box_padding_side_mobile }}px;
}
}
{%- endstyle -%}
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-testimonial-slider-section">
<div class="bc-heading">{{ section.settings.heading | default: '<h2>Your Heading Goes Here</h2>' }}</div>
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<div class="bc-testimonial-slider-div">
{% for block in section.blocks %}
<div class="bc-testimonial-slider-column" {{ block.shopify_attributes }}>
{% if block.settings.image != blank %}
<img
src="{{ block.settings.image | img_url: 'master' }}"
loading="{{ section.settings.image_loading }}"
alt="{{ block.settings.image_alt | default: block.settings.image.alt }}"
class="bc-testimonial-slider-image"
>
{% endif %}
{% if section.settings.show_stars %}
<div class="bc-testimonial-slider-column-stars-div">
{% assign star_count = block.settings.star_rating | default: 5 %}
{% for i in (1..5) %}
<svg
class="bc-testimonial-slider-column-star"
viewBox="0 0 24 24"
fill="{% if i <= star_count %}{{ section.settings.star_color }}{% else %}transparent{% endif %}"
stroke="{% if i <= star_count %}none{% else %}{{ section.settings.star_color }}{% endif %}"
stroke-width="1.5"
>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
{% endfor %}
</div>
{% endif %}
<div class="bc-testimonial-slider-inner-div">
<div class="bc-title">
{{ block.settings.title | default: '<h3>This is some text inside a block.</h3>' }}
</div>
<div class="bc-text">
{{
block.settings.text
| default: '<p>I am baby yOLO palo santo 3 wolf moon dolore cloud bread est godard.</p>'
}}
</div>
<div class="bc-name">{{ block.settings.name | default: '<p>- Julia D.</p>' }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% schema %}
{
"name": "BC 3 Testimonials",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "box_background_color",
"label": "Box Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "box_text_color",
"label": "Box Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "star_color",
"label": "Star Color",
"default": "#FFC107"
},
{
"type": "color",
"id": "image_border_color",
"label": "Image Border Color",
"default": "#ffffff"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding Top",
"default": 60
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding Bottom",
"default": 60
},
{
"type": "range",
"id": "desktop_horizontal_padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Horizontal Padding (Desktop)",
"default": 50
},
{
"type": "range",
"id": "tablet_horizontal_padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Horizontal Padding (Tablet)",
"default": 40
},
{
"type": "range",
"id": "mobile_horizontal_padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Horizontal Padding (Mobile)",
"default": 10
},
{
"type": "range",
"id": "top_border_thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"label": "Top Border Thickness",
"default": 0
},
{
"type": "range",
"id": "bottom_border_thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"label": "Bottom Border Thickness",
"default": 0
},
{
"type": "range",
"id": "section_gap",
"min": 0,
"max": 120,
"step": 5,
"unit": "px",
"label": "Gap Between Section Elements",
"default": 50
},
{
"type": "range",
"id": "column_gap",
"min": 10,
"max": 100,
"step": 5,
"unit": "px",
"label": "Gap Between Columns",
"default": 40
},
{
"type": "range",
"id": "column_gap_tablet",
"min": 10,
"max": 60,
"step": 5,
"unit": "px",
"label": "Gap Between Columns (Tablet)",
"default": 15
},
{
"type": "range",
"id": "box_border_radius",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Box Border Radius",
"default": 22
},
{
"type": "range",
"id": "box_padding_top",
"min": 40,
"max": 120,
"step": 5,
"unit": "px",
"label": "Box Padding Top",
"default": 70
},
{
"type": "range",
"id": "box_padding_bottom",
"min": 20,
"max": 80,
"step": 5,
"unit": "px",
"label": "Box Padding Bottom",
"default": 40
},
{
"type": "range",
"id": "box_padding_side",
"min": 10,
"max": 60,
"step": 5,
"unit": "px",
"label": "Box Padding Sides",
"default": 20
},
{
"type": "range",
"id": "box_padding_side_tablet",
"min": 5,
"max": 40,
"step": 5,
"unit": "px",
"label": "Box Padding Sides (Tablet)",
"default": 10
},
{
"type": "range",
"id": "box_padding_side_mobile",
"min": 5,
"max": 30,
"step": 5,
"unit": "px",
"label": "Box Padding Sides (Mobile)",
"default": 20
},
{
"type": "range",
"id": "box_inner_gap",
"min": 0,
"max": 40,
"step": 5,
"unit": "px",
"label": "Gap Between Items Inside Box",
"default": 5
},
{
"type": "checkbox",
"id": "box_shadow",
"label": "Enable Box Shadow",
"default": false
},
{
"type": "range",
"id": "box_shadow_y",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"label": "Box Shadow Y Offset",
"default": 5,
"info": "Only applies if box shadow is enabled"
},
{
"type": "range",
"id": "box_shadow_blur",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Box Shadow Blur",
"default": 15,
"info": "Only applies if box shadow is enabled"
},
{
"type": "range",
"id": "box_shadow_opacity",
"min": 0,
"max": 50,
"step": 5,
"unit": "%",
"label": "Box Shadow Opacity",
"default": 15,
"info": "Only applies if box shadow is enabled"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h2>From our fans</h2>"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 5,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "heading_line_height",
"label": "Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "heading_mobile_scale_ratio",
"label": "Heading Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.7,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "range",
"id": "heading_margin",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Heading Bottom Margin",
"default": 20
},
{
"type": "range",
"id": "title_size",
"label": "Title Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.5,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "title_line_height",
"label": "Title Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "title_max_width",
"label": "Title Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "title_mobile_scale_ratio",
"label": "Title Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.9,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "range",
"id": "title_margin",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Title Bottom Margin",
"default": 10
},
{
"type": "range",
"id": "text_size",
"label": "Text Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "text_line_height",
"label": "Text Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "text_max_width",
"label": "Text Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 36,
"unit": "ch"
},
{
"type": "range",
"id": "text_mobile_scale_ratio",
"label": "Text Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "range",
"id": "author_size",
"label": "Author Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "author_line_height",
"label": "Author Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "author_max_width",
"label": "Author Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "author_mobile_scale_ratio",
"label": "Author Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "range",
"id": "image_size",
"min": 60,
"max": 150,
"step": 5,
"unit": "px",
"label": "Image Size",
"default": 90
},
{
"type": "range",
"id": "image_size_tablet",
"min": 60,
"max": 120,
"step": 5,
"unit": "px",
"label": "Image Size (Tablet)",
"default": 80
},
{
"type": "range",
"id": "image_opacity",
"label": "Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "checkbox",
"id": "image_border",
"label": "Add Image Border",
"default": false
},
{
"type": "range",
"id": "image_border_width",
"min": 1,
"max": 10,
"step": 1,
"unit": "px",
"label": "Image Border Width",
"default": 3,
"info": "Only applies if image border is enabled"
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy"
},
{
"value": "eager",
"label": "Eager"
}
],
"default": "lazy"
},
{
"type": "checkbox",
"id": "show_stars",
"label": "Show Star Ratings",
"default": true
},
{
"type": "range",
"id": "star_size",
"min": 10,
"max": 30,
"step": 1,
"unit": "px",
"label": "Star Size",
"default": 15
},
{
"type": "range",
"id": "stars_margin",
"min": 0,
"max": 30,
"step": 1,
"unit": "px",
"label": "Stars Bottom Margin",
"default": 10
},
{
"type": "header",
"content": "Advanced Options"
},
{
"type": "select",
"id": "layout_mobile",
"label": "Mobile Layout",
"options": [
{
"value": "column",
"label": "Stack Vertically"
},
{
"value": "row",
"label": "Horizontal Scroll"
}
],
"default": "column"
},
{
"type": "range",
"id": "row_gap_mobile",
"min": 40,
"max": 100,
"step": 5,
"unit": "px",
"label": "Gap Between Items (Mobile)",
"default": 70
},
{
"type": "range",
"id": "column_width_mobile",
"min": 200,
"max": 400,
"step": 10,
"unit": "px",
"label": "Column Width (Horizontal Scroll)",
"default": 280,
"info": "Only applies when mobile layout is set to horizontal scroll"
}
],
"blocks": [
{
"type": "testimonial",
"name": "Testimonial",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Profile Image"
},
{
"type": "text",
"id": "image_alt",
"label": "Profile Image Alt Text",
"placeholder": "e.g. Customer profile photo"
},
{
"type": "range",
"id": "star_rating",
"min": 1,
"max": 5,
"step": 1,
"label": "Star Rating",
"default": 5
},
{
"type": "richtext",
"id": "title",
"label": "Title",
"default": "<h3>This is some text inside a block.</h3>"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>I'm baby yOLO palo santo 3 wolf moon dolore cloud bread est godard.</p>"
},
{
"type": "richtext",
"id": "name",
"label": "Name",
"default": "<p>- Julia D.</p>"
}
]
}
],
"presets": [
{
"name": "BC 3 Testimonials",
"blocks": [
{
"type": "testimonial"
},
{
"type": "testimonial"
},
{
"type": "testimonial"
}
]
}
]
}
{% endschema %}
