Testimonials Section

//Create section 
{%- style -%}
  .testimonials-{{ section.id }} {
    background-color: {{ section.settings.color_background }};
    color: {{ section.settings.color_text }};
  }
}
{%- endstyle -%}

<div
  class="testimonials-section testimonials-{{ section.id }}{% if section.settings.color_background == settings.color_body_bg %} testimonials-section--with-divider{% endif %} text-{{ section.settings.align_text }}"
  data-section-id="{{ section.id }}"
  data-section-type="testimonials"
  data-aos>
  <div class="page-width">
      <div class="section-header">
      {%- if section.settings.title != blank -%}
          <h2>{{ section.settings.title | escape }}</h2>
      {%- endif -%}
      {%- if section.settings.subtitle != blank -%}
          <p class="p-lead">{{ section.settings.subtitle | escape }}</p>
      {%- endif -%}
      {%- if section.settings.icon != blank -%}
          <p class="p-icon-w-text fs-13">
            <img src="{{ section.settings.icon | img_url: 'master' }}" alt="" width="" height="">
            {{ section.settings.star_label | escape }}
          </p>
      {%- endif -%}
    </div>
  
  {%- if section.blocks.size > 0 -%}
    <div class="slideshow-wrapper">
      <div
        class="testimonials-slider"
        id="Testimonials-{{ section.id }}"
        data-dots="true"
        data-count="{{ section.blocks.size }}">
        {%- for block in section.blocks -%}
          <div
            class="testimonials-slide testimonials-slide--{{ block.id }}"
            data-index="{{ forloop.index0 }}"
            data-aos="row-of-{{ section.blocks.size }}"
            {{ block.shopify_attributes }}>
            <blockquote class="testimonials-slider__text">
              {%- if block.settings.icon == 'quote' -%}
                <span class="quote-icon"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-quote" viewBox="0 0 41 35"><path d="M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766Zm24.498 0h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40.83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766Z" fill-rule="evenodd"/></svg></span>
              {%- elsif block.settings.icon == '5-stars' -%}
                <span class="testimonial-stars">★★★★★</span>
              {%- elsif block.settings.icon == '4-stars' -%}
                <span class="testimonial-stars">★★★★</span>
              {%- elsif block.settings.icon == '3-stars' -%}
                <span class="testimonial-stars">★★★</span>
              {%- elsif block.settings.icon == '2-stars' -%}
                <span class="testimonial-stars">★★</span>
              {%- elsif block.settings.icon == '1-star' -%}
                <span class="testimonial-stars">★</span>
              {%- endif -%}

              {%- if block.settings.testimonial != blank -%}
                <div class="rte-setting text-spacing">{{ block.settings.testimonial }}</div>
              {%- endif -%}
              <div class="infor-author">
                {%- if block.settings.image != blank -%}
                  <div class="testimonial-image{% if section.settings.round_images %} testimonial-image--round{% endif %}">
                    <div class="image-wrap text-spacing">
                        <img src="{{ block.settings.image  | img_url: 'master' }}" alt="" width="" height="">
                    </div>
                  </div>
                {%- endif -%}
  
                {%- if block.settings.author != blank -%}
                  <cite class="fs-10">{{ block.settings.author | escape }}</cite>
                {%- endif -%}
                {%- if block.settings.author_info != blank -%}
                  <div class="testimonials__info fs-10">{{ block.settings.author_info | escape }}</div>
                {%- endif -%}
              </div>
            </blockquote>
          </div>
        {%- endfor -%}
        </div>
    </div>
    </div>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.testimonials.name",
  "class": "testimonial-section",
  "max_blocks": 9,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.testimonials.settings.title.label",
      "default": "Testimonials"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "t:sections.testimonials.settings.subtitle.label",
    },
    {
      "type": "image_picker",
      "id": "icon",
      "label": "t:sections.testimonials.settings.icon.label",
    },
    {
      "type": "text",
      "id": "star_label",
      "label": "t:sections.testimonials.settings.star_label.label",
    },
    {
      "type": "select",
      "id": "align_text",
      "label": "t:sections.testimonials.settings.align_text.label",
      "default": "center",
      "options": [
        {
          "value": "left",
          "label": "t:sections.testimonials.settings.align_text.options.left.label"
        },
        {
          "value": "center",
          "label": "t:sections.testimonials.settings.align_text.options.center.label"
        },
        {
          "value": "right",
          "label": "t:sections.testimonials.settings.align_text.options.right.label"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "round_images",
      "label": "t:sections.testimonials.settings.round_images.label",
      "info": "t:sections.testimonials.settings.round_images.info",
      "default": true
    },
    {
      "type": "color",
      "id": "color_background",
      "label": "t:sections.testimonials.settings.color_background.label",
      "default": "#f9f9f9"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": "t:sections.testimonials.settings.color_text.label",
      "default": "#1c1d1d"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "t:sections.testimonials.blocks.testimonial.name",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "t:sections.testimonials.blocks.testimonial.settings.icon.label",
          "default": "5-stars",
          "options": [
            {
              "value": "none",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.none.label"
            },
            {
              "value": "quote",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.quote.label"
            },
            {
              "value": "5-stars",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.5-stars.label"
            },
            {
              "value": "4-stars",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.4-stars.label"
            },
            {
              "value": "3-stars",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.3-stars.label"
            },
            {
              "value": "2-stars",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.2-stars.label"
            },
            {
              "value": "1-star",
              "label": "t:sections.testimonials.blocks.testimonial.settings.icon.options.1-star.label"
            }
          ]
        },
        {
          "type": "richtext",
          "id": "testimonial",
          "label": "t:sections.testimonials.blocks.testimonial.settings.testimonial.label",
          "default": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.testimonials.blocks.testimonial.settings.image.label"
        },
        {
          "type": "text",
          "id": "author",
          "label": "t:sections.testimonials.blocks.testimonial.settings.author.label",
          "default": "Author's name"
        },
        {
          "type": "text",
          "id": "author_info",
          "label": "t:sections.testimonials.blocks.testimonial.settings.author_info.label",
          "default": "Los Angeles, CA"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.testimonials.presets.testimonials.name",
      "blocks": [
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["footer", "header", "custom.popups"]
  }
}
{% endschema %}

/css
.testimonials-slider blockquote {
    padding: 2rem 1.563rem;
    font-style: normal;
    background: #efefef;
    border: .5px solid #7C7364;
    margin: 0 .938rem;
}
.testimonials-slider .flickity-prev-next-button{
    display: none;
}
.testimonials-slider.flickity-enabled{
    padding-bottom: 2rem;
}
.testimonials-slider .flickity-viewport {
    overflow: visible;
}

.testimonials-slider:not(.flickity-enabled){
    opacity: 0;
}
.flickity-enabled.is-draggable {
    box-shadow: none !important;
    outline: none !important;
}
.testimonials-section {
    padding: 6.25rem 0 8rem;
    overflow: hidden;
    position: relative;
}
.testimonials-section .p-lead,
.testimonials-section h2{
    margin: 0;
}
.testimonials-section  p.p-icon-w-text{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    color: #7C7364;
    right: 0;
    display: none;
}
.testimonial-section .trustpilot-widget,
.testimonial-section .trustpilot_customize_container {
    position: absolute!important;
    width: auto!important;
    height: auto!important;
    right: 5.3rem;
    top: 6.7rem!important;
}
.slideshow-wrapper {
    margin-top: 3rem;
}
.infor-author * {
    font-style: normal;
}
span.testimonial-stars {
    color: #7C7364;
    letter-spacing: .2rem;
}
.infor-author {
    display: flex;
    align-items: center;
    color: #7C7364;
}
.testimonial-image {
    width: 2.188rem;
    height: 2.188rem;
    margin-right: .5rem;
}
.testimonial-image.testimonial-image--round {
    border-radius: 50%;
}
.testimonials__info {
    margin-left: .5rem;
}
.testimonial-image * {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.testimonials-slide {
    max-width: 22.188rem;
    flex-basis: 22.188rem;
    min-width: 22.188rem;
}
@media screen and (max-width: 849px){
  .testimonial-section .trustpilot-widget, .testimonial-section .trustpilot_customize_container {
    right: auto;
    top: 9.7rem!important;
    left: -13px !important;
  }
  .slideshow-wrapper {
    margin-top: 5rem;
  }
}

//translate
"testimonials": {
      "name": "Testimonials",
      "settings": {
        "title": {
          "label": "Heading"
        },
        "subtitle": {
          "label": "Sub Heading"
        },
         "icon": {
          "label": "Icon"
        },
         "star_label": {
          "label": "Star Text"
        },
        "align_text": {
          "label": "Text alignment",
          "options": {
            "left": {
              "label": "Left"
            },
            "center": {
              "label": "Centered"
            },
            "right": {
              "label": "Right"
            }
          }
        },
        "round_images": {
          "label": "Circular images",
          "info": "Requires square images"
        },
        "color_background": {
          "label": "Background"
        },
        "color_text": {
          "label": "Text"
        }
      },
      "blocks": {
        "testimonial": {
          "name": "Testimonial",
          "settings": {
            "icon": {
              "label": "Icon",
              "options": {
                "none": {
                  "label": "None"
                },
                "quote": {
                  "label": "Quote"
                },
                "5-stars": {
                  "label": "5 stars"
                },
                "4-stars": {
                  "label": "4 stars"
                },
                "3-stars": {
                  "label": "3 stars"
                },
                "2-stars": {
                  "label": "2 stars"
                },
                "1-star": {
                  "label": "1 star"
                }
              }
            },
            "testimonial": {
              "label": "Text"
            },
            "image": {
              "label": "Author's image"
            },
            "author": {
              "label": "Author"
            },
            "author_info": {
              "label": "Author info"
            }
          }
        }
      },
      "presets": {
        "testimonials": {
          "name": "Testimonials"
        }
      }
    },