Testimonials

Description

Used On

• Bundle
• Course Landing
• Site Landing

Template Markup

<section class="testimonials {% if section.settings.background_color_preset != 'none' %}{{ section.settings.background_color_preset | append: '-section-color-preset' }}{% endif %}" data-ptestimonial-item="testimonials">
  <div class="container">

    <div class="section__content">

      {% if section.settings.heading != blank %}
        <h3 class="section__heading">{{ section.settings.heading }}</h3>
        {% if section.settings.subheading != blank %}
          <h4 class="section__subheading">{{ section.settings.subheading }}</h4>
        {% endif %}
      {% endif %}

      <div class="testimonials__list">
      {% for block in section.blocks %}
        <div class="testimonials__list-item">
          <p>{{ block.settings.testimonial_body }}</p>
          <img src="{{ block.settings.testimonial_avatar }}" alt="{{ block.settings.testimonial_author }}" title="{{ block.settings.testimonial_author }}" /><span>{{ block.settings.testimonial_author }}</span>
        </div>
      {% endfor %}
      </div>

    </div>

  </div>
</section>

{% style %}
...
{% endstyle %}

{% schema %}
...
{% schema %}

Style

Alignment, Layout & Style modifiers will be encapsulated with {% style %} & {% endstyle %} tags.

section.testimonials {

  .section__heading,
  .section__subheading {
    text-align: {{ section.settings.heading_alignment }};
  }
}

Schema

Schema will be encapsulated with {% schema %} & {% endschema %} tags.

{
  "label": "Testimonials",
  "settings": [
    {
      "label": "Headings",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "What customers are saying"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": ""
        },
        {
          "type": "radio",
          "id": "heading_alignment",
          "label": "Alignment",
          "description": "Headings will inherit the same alignment",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ]
        }
      ]
    },
    {
      "label": "Background",
      "settings": [
        {
          "type": "select",
          "id": "background_color_preset",
          "label": "Color Preset",
          "description": "Presets can be configured in the Colors configuration menu",
          "default": "primary",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "primary", "label": "Primary" },
            { "value": "secondary", "label": "Secondary" },
            { "value": "tertiary", "label": "Tertiary" }
          ]
        }
      ]
    }
  ],
  "blocks": {
    "label": "Add Testimonial",
    "limit": 10,
    "types": [
      {
        "type": "testimonial",
        "label": "",
        "settings": [
          {
            "type": "text",
            "id": "testimonial_author",
            "label": "Author"
          },
          {
            "type": "image",
            "id": "testimonial_avatar",
            "label": "Avatar"
          },
          {
            "type": "richtext",
            "id": "testimonial_body",
            "label": "Text"
          }
        ]
      }
    ],
    "defaults": [
      {
        "type": "testimonial",
        "values": {
          "testimonial_author": "Customer Name",
          "testimonial_avatar": "",
          "testimonial_body": "Nam commodo ornare lectus, vel ultricies urna pulvinar vitae. Donec diam risus, facilisis id facilisis ac, porta nec enim. Proin non porta augue. Integer neque nibh, tempor at fermentum ut, fermentum porttitor sapien. Mauris massa turpis, dictum id mauris sed, imperdiet porttitor ex."
        }
      },
      {
        "type": "testimonial",
        "values": {
          "testimonial_author": "Customer Name",
          "testimonial_avatar": "",
          "testimonial_body": "Nam commodo ornare lectus, vel ultricies urna pulvinar vitae. Donec diam risus, facilisis id facilisis ac, porta nec enim. Proin non porta augue. Integer neque nibh, tempor at fermentum ut, fermentum porttitor sapien. Mauris massa turpis, dictum id mauris sed, imperdiet porttitor ex."
        }
      },
      {
        "type": "testimonial",
        "values": {
          "testimonial_author": "Customer Name",
          "testimonial_avatar": "",
          "testimonial_body": "Nam commodo ornare lectus, vel ultricies urna pulvinar vitae. Donec diam risus, facilisis id facilisis ac, porta nec enim. Proin non porta augue. Integer neque nibh, tempor at fermentum ut, fermentum porttitor sapien. Mauris massa turpis, dictum id mauris sed, imperdiet porttitor ex."
        }
      },
      {
        "type": "testimonial",
        "values": {
          "testimonial_author": "Customer Name",
          "testimonial_avatar": "",
          "testimonial_body": "Nam commodo ornare lectus, vel ultricies urna pulvinar vitae. Donec diam risus, facilisis id facilisis ac, porta nec enim. Proin non porta augue. Integer neque nibh, tempor at fermentum ut, fermentum porttitor sapien. Mauris massa turpis, dictum id mauris sed, imperdiet porttitor ex."
        }
      },
      {
        "type": "testimonial",
        "values": {
          "testimonial_author": "Customer Name",
          "testimonial_avatar": "",
          "testimonial_body": "Nam commodo ornare lectus, vel ultricies urna pulvinar vitae. Donec diam risus, facilisis id facilisis ac, porta nec enim. Proin non porta augue. Integer neque nibh, tempor at fermentum ut, fermentum porttitor sapien. Mauris massa turpis, dictum id mauris sed, imperdiet porttitor ex."
        }
      }
    ]
  }
}