Skip to main content
The Testimonials section allows you to showcase customer reviews and testimonials to build trust and credibility. Perfect for social proof and increasing conversions.

​
Overview

The Testimonials section provides:
  • Customer Reviews Display with ratings and comments
  • Multiple Layout Options including grid, carousel, and featured layouts
  • Custom Testimonial Content for manual testimonials
  • Rating System with star displays
  • Responsive Design optimized for all devices
  • Social Proof to increase customer confidence

​
Section Settings

​
Testimonial Content

<section class="testimonials">
  <div class="container">
    {% if section.settings.title != blank %}
      <h2 class="testimonials__title">{{ section.settings.title }}</h2>
    {% endif %}
    
    <div class="testimonials__grid">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'testimonial' %}
            <div class="testimonial" {{ block.shopify_attributes }}>
              <div class="testimonial__content">
                <div class="testimonial__rating">
                  {% for i in (1..5) %}
                    {% if i <= block.settings.rating %}
                      ★
                    {% else %}
                      ☆
                    {% endif %}
                  {% endfor %}
                </div>
                
                <blockquote class="testimonial__quote">
                  {{ block.settings.testimonial }}
                </blockquote>
                
                <div class="testimonial__author">
                  <div class="testimonial__author-name">{{ block.settings.author_name }}</div>
                  {% if block.settings.author_title != blank %}
                    <div class="testimonial__author-title">{{ block.settings.author_title }}</div>
                  {% endif %}
                </div>
              </div>
            </div>
        {% endcase %}
      {% endfor %}
    </div>
  </div>
</section>

​
CSS Styling

.testimonials {
  padding: 4rem 0;
  background: var(--color-surface);
}

.testimonials__title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--color-text-primary);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.testimonial {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.testimonial:hover {
  transform: translateY(-4px);
}

.testimonial__rating {
  color: #FFD700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.testimonial__quote {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial__author-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.testimonial__author-title {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}