> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Testimonials

> Display customer reviews and testimonials to build trust and credibility

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

```liquid theme={null}
<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

```css theme={null}
.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;
}
```

<Button href="/sections/newsletter-signup" size="lg">
  Next: Newsletter Signup
</Button>