How can I add a testimonial to the Sense theme?

[Florete154]

Hi. I'm really confused about this one, hope you guys can help me with this.

I cannot add a testimonial on SENSE theme. Can you please help me with a custom design like this? 

[NomtechSolution]

Certainly! Here's an example of a custom testimonial design that you can implement on your SENSE theme:

HTML Structure:

<div class="testimonial">
  <div class="testimonial-content">
    <p class="testimonial-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non feugiat sapien, sit amet iaculis turpis."</p>
    <p class="testimonial-author">- John Doe</p>
  </div>
</div>

.testimonial {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 8px;
}

.testimonial-content {
  text-align: center;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.testimonial-author {
  font-size: 14px;
  font-weight: bold;
}

To use this design, follow these steps:

1. Locate the appropriate section in your SENSE theme where you want to add the testimonial. This could be in a section template or within a page template.

2. Insert the HTML code provided above into the desired location within your theme's template. Customize the testimonial text and author name as needed.

3. Add the CSS code to your theme's CSS file or the Additional CSS section in the theme editor. Save the changes to apply the styles.

4. Preview the changes and ensure that the testimonial appears as expected. Adjust the CSS properties if needed to achieve your desired design.

[sammy23]

I was also after this, so thankyou!! 

I am quite a basic Shopify user, so would you mind explaining a little bit more about what to do regaarding the css code please? 

Thankyou,  Sam

[Florete154]

I want to put this code in the homepage, and I cannot identify the file where do I put the html that you just gave me 😞

[Amad_Riaz]

I have modified the default carousel section of the sense theme for testimonials you can find here in file. just create a new section and paste the whole code in it.

{% comment %} SECTION ADDED BY @OPTIEXPERTS FOR TESTIMONIALS {% endcomment %}

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}

  {%- style -%}

    @media screen and (max-width: 749px) {

      #Slider-{{ section.id }}::before,

      #Slider-{{ section.id }} .media::before,

      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {

        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;

        content: '';

        display: block;

      }

    }

    @media screen and (min-width: 750px) {

      #Slider-{{ section.id }}::before,

      #Slider-{{ section.id }} .media::before {

        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;

        content: '';

        display: block;

      }

    }

  {%- endstyle -%}

{%- endif -%}

<slideshow-component

  class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"

  role="region"

  aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"

  aria-label="{{ section.settings.accessibility_info | escape }}">

  {%- if section.settings.auto_rotate and section.blocks.size > 1 -%}

    <div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">

      <button

        type="button"

        class="slider-button slider-button--prev"

        name="previous"

        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}">

        {% render 'icon-caret' %}

      </button>

      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">

        {%- if section.settings.slider_visual == 'counter' -%}

          <span class="slider-counter--current">1</span>

          <span aria-hidden="true"> / </span>

          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>

          <span class="slider-counter--total">{{ section.blocks.size }}</span>

        {%- else -%}

          <div class="slideshow__control-wrapper">

            {%- for block in section.blocks -%}

              <button

                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"

                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

                aria-controls="Slider-{{ section.id }}"

              >

                {%- if section.settings.slider_visual == 'numbers' -%}

                  {{ forloop.index -}}

                {%- else -%}

                  <span class="dot"></span>

                {%- endif -%}

              </button>

            {%- endfor -%}

          </div>

        {%- endif -%}

      </div>

      <button

        type="button"

        class="slider-button slider-button--next"

        name="next"

        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}">

        {% render 'icon-caret' %}

      </button>

      {%- if section.settings.auto_rotate -%}

        <button

          type="button"

          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"

          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}">

          {%- render 'icon-pause' -%}

          {%- render 'icon-play' -%}

        </button>

      {%- endif -%}

    </div>

    <noscript>

      <div class="slider-buttons">

        <div class="slider-counter">

          {%- for block in section.blocks -%}

            <a

              href="#Slide-{{ section.id }}-{{ forloop.index }}"

              class="slider-counter__link link"

              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

            >

              {{ forloop.index }}

            </a>

          {%- endfor -%}

        </div>

      </div>

    </noscript>

  {%- endif -%}

  <div

    class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"

    id="Slider-{{ section.id }}"

    aria-live="polite"

    aria-atomic="true"

    data-autoplay="{{ section.settings.auto_rotate }}"

    data-speed="{{ section.settings.change_slides_speed }}">

    {%- for block in section.blocks -%}

      <style>

        #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {

          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};

        }

      </style>

      <div

        class="slideshow__slide grid__item grid--1-col slider__slide"

        id="Slide-{{ section.id }}-{{ forloop.index }}"

        {{ block.shopify_attributes }}

        role="group"

        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"

        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

        tabindex="-1">

        <div class="testimonial-main-section">

            <div class="testimonial-image-section">

                {%- if block.settings.image -%}

                    {%- liquid

                      assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round

                      if section.settings.image_behavior == 'ambient'

                        assign sizes = '120vw'

                        assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'

                      else

                        assign sizes = '100vw'

                        assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

                      endif

                      assign fetch_priority = 'auto'

                      if section.index == 1

                        assign fetch_priority = 'high'

                      endif

                    -%}

                    {%- if forloop.first %}

                      {{

                        block.settings.image

                        | image_url: width: 3840

                        | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority

                      }}

                    {%- else -%}

                      {{

                        block.settings.image

                        | image_url: width: 3840

                        | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths

                      }}

                    {%- endif -%}

                  {%- else -%}

                    {%- assign placeholder_slide = forloop.index | modulo: 2 -%}

                    {%- if placeholder_slide == 1 -%}

                      {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}

                    {%- else -%}

                      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}

                    {%- endif -%}

                  {%- endif -%}

            </div>

            <div class="full-width-banner">

                <div class="svg-top">

                    {% include 'icon-left-quote' %}

                </div>

                <div class="full-width-text">

                    {%- if block.settings.heading != blank -%}

                        <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">

                          {{ block.settings.heading }}

                        </h2>

                      {%- endif -%}

                      {%- if block.settings.subheading != blank -%}

                        <div class="banner__text rte" {{ block.shopify_attributes }}>

                          <p>{{ block.settings.subheading }}</p>

                        </div>

                      {%- endif -%}

                      {%- if block.settings.testi_content != blank -%}

                        <div class="banner__text rte" {{ block.shopify_attributes }}>

                          {{ block.settings.testi_content }}

                        </div>

                      {%- endif -%}

                      <div class="footer-section">

                        <div class="author-section">

                            {%- if block.settings.author_name != blank -%}

                              <div class="banner__text rte" {{ block.shopify_attributes }}>

                                <p>{{ block.settings.author_name }}</p>

                              </div>

                            {%- endif -%}

                            {%- if block.settings.designation != blank -%}

                              <div class="banner__text rte" {{ block.shopify_attributes }}>

                                <p>{{ block.settings.designation }}</p>

                              </div>

                            {%- endif -%}

                        </div>

                        <div class="review-section">

                            {% for star in (1..block.settings.opti_stars) %}

                                {% include 'icon-star' %}

                            {% endfor %}

                        </div>

                      </div>

                </div>

                <div class="svg-bottom">

                    {% include 'icon-right-quote' %}

                </div>

            </div>

        </div>

      </div>

    {%- endfor -%}

  </div>

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}

    <div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">

      <button

        type="button"

        class="slider-button slider-button--prev"

        name="previous"

        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}">

        {% render 'icon-caret' %}

      </button>

      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">

        {%- if section.settings.slider_visual == 'counter' -%}

          <span class="slider-counter--current">1</span>

          <span aria-hidden="true"> / </span>

          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>

          <span class="slider-counter--total">{{ section.blocks.size }}</span>

        {%- else -%}

          <div class="slideshow__control-wrapper">

            {%- for block in section.blocks -%}

              <button

                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"

                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

                aria-controls="Slider-{{ section.id }}"

              >

                {%- if section.settings.slider_visual == 'numbers' -%}

                  {{ forloop.index -}}

                {%- else -%}

                  <span class="dot"></span>

                {%- endif -%}

              </button>

            {%- endfor -%}

          </div>

        {%- endif -%}

      </div>

      <button

        type="button"

        class="slider-button slider-button--next"

        name="next"

        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}"

      >

        {% render 'icon-caret' %}

      </button>

      {%- if section.settings.auto_rotate -%}

        <button

          type="button"

          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"

          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"

        >

          {%- render 'icon-pause' -%}

          {%- render 'icon-play' -%}

        </button>

      {%- endif -%}

    </div>

    <noscript>

      <div class="slider-buttons">

        <div class="slider-counter">

          {%- for block in section.blocks -%}

            <a

              href="#Slide-{{ section.id }}-{{ forloop.index }}"

              class="slider-counter__link link"

              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

            >

              {{ forloop.index }}

            </a>

          {%- endfor -%}

        </div>

      </div>

    </noscript>

  {%- endif -%}

</slideshow-component>

{%- if request.design_mode -%}

  <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>

{%- endif -%}

<style>

    .testimonial-image-section {

        width: 180px;

        height: 180px;

        overflow: hidden;

        border-radius: 20px;

        border: 3px solid #C39733;

        padding: 2px;

        margin: auto;

        position: absolute;

        top: 120px;

        left: 50%;

        right: 50%;

        transform: translate(-50%, -50%);

    }

    .testimonial-image-section img,

    .testimonial-image-section svg {

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 15px;

    }

    .testimonial-main-section {

        position: relative;

        height: 100%;

    }

    .full-width-banner {

        background-color: #eee;

        border-radius: 20px;

        position: relative;

        z-index: -1;

        max-width: 991px;

        width: 95%;

        height: auto;

        text-align: center;

        padding-top: 75px;

        margin: 130px auto 0px auto;

    }

    .full-width-banner .full-width-text {

        width: 100%;

        padding: 0px !important;

    }

    .footer-section {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 20px 40px;

    }

    .author-section {

        text-align: left;

    }

    .review-section svg {

        width: 20px;

        height: 20px;

    }

    .svg-top {

        position: absolute;

        top: -25px;

        left: 45px;

    }

    .svg-bottom {

        position: absolute;

        bottom: -25px;

        right: 45px;

    }

    .svg-top, .svg-bottom {

        width: 50px;

        height: 50px;

        border-radius: 10px;

        background-color: #C39733;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .svg-bottom svg, .svg-top svg {

        width: 40px;

        height: 40px;

    }

</style>

{% schema %}

{

  "name": "Testimonials",

  "tag": "section",

  "class": "section",

  "disabled_on": {

    "groups": ["header", "footer"]

  },

  "settings": [

    {

      "type": "select",

      "id": "layout",

      "options": [

        {

          "value": "full_bleed",

          "label": "t:sections.slideshow.settings.layout.options__1.label"

        },

        {

          "value": "grid",

          "label": "t:sections.slideshow.settings.layout.options__2.label"

        }

      ],

      "default": "full_bleed",

      "label": "t:sections.slideshow.settings.layout.label"

    },

    {

      "type": "select",

      "id": "slide_height",

      "options": [

        {

          "value": "adapt_image",

          "label": "t:sections.slideshow.settings.slide_height.options__1.label"

        },

        {

          "value": "small",

          "label": "t:sections.slideshow.settings.slide_height.options__2.label"

        },

        {

          "value": "medium",

          "label": "t:sections.slideshow.settings.slide_height.options__3.label"

        },

        {

          "value": "large",

          "label": "t:sections.slideshow.settings.slide_height.options__4.label"

        }

      ],

      "default": "medium",

      "label": "t:sections.slideshow.settings.slide_height.label"

    },

    {

      "type": "select",

      "id": "slider_visual",

      "options": [

        {

          "value": "dots",

          "label": "t:sections.slideshow.settings.slider_visual.options__2.label"

        },

        {

          "value": "counter",

          "label": "t:sections.slideshow.settings.slider_visual.options__1.label"

        },

        {

          "value": "numbers",

          "label": "t:sections.slideshow.settings.slider_visual.options__3.label"

        }

      ],

      "default": "counter",

      "label": "t:sections.slideshow.settings.slider_visual.label"

    },

    {

      "type": "checkbox",

      "id": "auto_rotate",

      "label": "t:sections.slideshow.settings.auto_rotate.label",

      "default": false

    },

    {

      "type": "range",

      "id": "change_slides_speed",

      "min": 3,

      "max": 9,

      "step": 2,

      "unit": "s",

      "label": "t:sections.slideshow.settings.change_slides_speed.label",

      "default": 5

    },

    {

      "type": "header",

      "content": "t:sections.all.animation.content"

    },

    {

      "type": "select",

      "id": "image_behavior",

      "options": [

        {

          "value": "none",

          "label": "t:sections.all.animation.image_behavior.options__1.label"

        },

        {

          "value": "ambient",

          "label": "t:sections.all.animation.image_behavior.options__2.label"

        }

      ],

      "default": "none",

      "label": "t:sections.all.animation.image_behavior.label"

    },

    {

      "type": "header",

      "content": "t:sections.slideshow.settings.mobile.content"

    },

    {

      "type": "checkbox",

      "id": "show_text_below",

      "label": "t:sections.slideshow.settings.show_text_below.label",

      "default": true

    },

    {

      "type": "header",

      "content": "t:sections.slideshow.settings.accessibility.content"

    },

    {

      "type": "text",

      "id": "accessibility_info",

      "label": "t:sections.slideshow.settings.accessibility.label",

      "info": "t:sections.slideshow.settings.accessibility.info",

      "default": "Slideshow about our brand"

    }

  ],

  "blocks": [

    {

      "type": "slide",

      "name": "t:sections.slideshow.blocks.slide.name",

      "limit": 5,

      "settings": [

        {

          "type": "image_picker",

          "id": "image",

          "label": "t:sections.slideshow.blocks.slide.settings.image.label"

        },

        {

          "type": "inline_richtext",

          "id": "heading",

          "default": "Image slide",

          "label": "t:sections.slideshow.blocks.slide.settings.heading.label"

        },

        {

          "type": "select",

          "id": "heading_size",

          "options": [

            {

              "value": "h2",

              "label": "t:sections.all.heading_size.options__1.label"

            },

            {

              "value": "h1",

              "label": "t:sections.all.heading_size.options__2.label"

            },

            {

              "value": "h0",

              "label": "t:sections.all.heading_size.options__3.label"

            }

          ],

          "default": "h1",

          "label": "t:sections.all.heading_size.label"

        },

        {

          "type": "inline_richtext",

          "id": "subheading",

          "default": "Tell your brand's story through images",

          "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"

        },

        {

          "type": "richtext",

          "id": "testi_content",

          "label": "Testimonial Content."

        },

        {

          "type": "inline_richtext",

          "id": "author_name",

          "default": "John Doe",

          "label": "Name of Author."

        },

        {

          "type": "inline_richtext",

          "id": "designation",

          "default": "CEO, Company",

          "label": "Designation"

        },

        {

            "type": "range",

            "id": "opti_stars",

            "min": 1,

            "max": 5,

            "step": 1,

            "unit": "c",

            "label": "Testimonial Stars.",

            "default": 5

        },

        {

          "type": "select",

          "id": "box_align",

          "options": [

            {

              "value": "top-left",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"

            },

            {

              "value": "top-center",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"

            },

            {

              "value": "top-right",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"

            },

            {

              "value": "middle-left",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"

            },

            {

              "value": "middle-center",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"

            },

            {

              "value": "middle-right",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"

            },

            {

              "value": "bottom-left",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"

            },

            {

              "value": "bottom-center",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"

            },

            {

              "value": "bottom-right",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"

            }

          ],

          "default": "middle-center",

          "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",

          "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"

        },

        {

          "type": "checkbox",

          "id": "show_text_box",

          "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",

          "default": true

        },

        {

          "type": "select",

          "id": "text_alignment",

          "options": [

            {

              "value": "left",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"

            },

            {

              "value": "center",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"

            },

            {

              "value": "right",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"

            }

          ],

          "default": "center",

          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"

        },

        {

          "type": "range",

          "id": "image_overlay_opacity",

          "min": 0,

          "max": 100,

          "step": 10,

          "unit": "%",

          "label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",

          "default": 0

        },

        {

          "type": "color_scheme",

          "id": "color_scheme",

          "label": "t:sections.all.colors.label",

          "default": "scheme-1"

        },

        {

          "type": "header",

          "content": "t:sections.slideshow.settings.mobile.content"

        },

        {

          "type": "select",

          "id": "text_alignment_mobile",

          "options": [

            {

              "value": "left",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"

            },

            {

              "value": "center",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"

            },

            {

              "value": "right",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"

            }

          ],

          "default": "center",

          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"

        }

      ]

    }

  ],

  "presets": [

    {

      "name": "Testimonials",

      "blocks": [

        {

          "type": "slide"

        },

        {

          "type": "slide"

        }

      ]

    }

  ]

}

{% endschema %}

[Amad_Riaz]

I have modified the default carousel section for testimonials. Just create a new section and add the following code.

{% comment %} SECTION ADDED BY @OPTIEXPERTS FOR TESTIMONIALS {% endcomment %}

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}

  {%- style -%}

    @media screen and (max-width: 749px) {

      #Slider-{{ section.id }}::before,

      #Slider-{{ section.id }} .media::before,

      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {

        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;

        content: '';

        display: block;

      }

    }

    @media screen and (min-width: 750px) {

      #Slider-{{ section.id }}::before,

      #Slider-{{ section.id }} .media::before {

        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;

        content: '';

        display: block;

      }

    }

  {%- endstyle -%}

{%- endif -%}

<slideshow-component

  class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"

  role="region"

  aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"

  aria-label="{{ section.settings.accessibility_info | escape }}">

  {%- if section.settings.auto_rotate and section.blocks.size > 1 -%}

    <div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">

      <button

        type="button"

        class="slider-button slider-button--prev"

        name="previous"

        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}">

        {% render 'icon-caret' %}

      </button>

      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">

        {%- if section.settings.slider_visual == 'counter' -%}

          <span class="slider-counter--current">1</span>

          <span aria-hidden="true"> / </span>

          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>

          <span class="slider-counter--total">{{ section.blocks.size }}</span>

        {%- else -%}

          <div class="slideshow__control-wrapper">

            {%- for block in section.blocks -%}

              <button

                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"

                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

                aria-controls="Slider-{{ section.id }}"

              >

                {%- if section.settings.slider_visual == 'numbers' -%}

                  {{ forloop.index -}}

                {%- else -%}

                  <span class="dot"></span>

                {%- endif -%}

              </button>

            {%- endfor -%}

          </div>

        {%- endif -%}

      </div>

      <button

        type="button"

        class="slider-button slider-button--next"

        name="next"

        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}">

        {% render 'icon-caret' %}

      </button>

      {%- if section.settings.auto_rotate -%}

        <button

          type="button"

          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"

          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}">

          {%- render 'icon-pause' -%}

          {%- render 'icon-play' -%}

        </button>

      {%- endif -%}

    </div>

    <noscript>

      <div class="slider-buttons">

        <div class="slider-counter">

          {%- for block in section.blocks -%}

            <a

              href="#Slide-{{ section.id }}-{{ forloop.index }}"

              class="slider-counter__link link"

              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

            >

              {{ forloop.index }}

            </a>

          {%- endfor -%}

        </div>

      </div>

    </noscript>

  {%- endif -%}

  <div

    class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"

    id="Slider-{{ section.id }}"

    aria-live="polite"

    aria-atomic="true"

    data-autoplay="{{ section.settings.auto_rotate }}"

    data-speed="{{ section.settings.change_slides_speed }}">

    {%- for block in section.blocks -%}

      <style>

        #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {

          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};

        }

      </style>

      <div

        class="slideshow__slide grid__item grid--1-col slider__slide"

        id="Slide-{{ section.id }}-{{ forloop.index }}"

        {{ block.shopify_attributes }}

        role="group"

        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"

        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

        tabindex="-1">

        <div class="testimonial-main-section">

            <div class="testimonial-image-section">

                {%- if block.settings.image -%}

                    {%- liquid

                      assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round

                      if section.settings.image_behavior == 'ambient'

                        assign sizes = '120vw'

                        assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'

                      else

                        assign sizes = '100vw'

                        assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

                      endif

                      assign fetch_priority = 'auto'

                      if section.index == 1

                        assign fetch_priority = 'high'

                      endif

                    -%}

                    {%- if forloop.first %}

                      {{

                        block.settings.image

                        | image_url: width: 3840

                        | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority

                      }}

                    {%- else -%}

                      {{

                        block.settings.image

                        | image_url: width: 3840

                        | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths

                      }}

                    {%- endif -%}

                  {%- else -%}

                    {%- assign placeholder_slide = forloop.index | modulo: 2 -%}

                    {%- if placeholder_slide == 1 -%}

                      {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}

                    {%- else -%}

                      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}

                    {%- endif -%}

                  {%- endif -%}

            </div>

            <div class="full-width-banner">

                <div class="svg-top">

                    {% include 'icon-left-quote' %}

                </div>

                <div class="full-width-text">

                    {%- if block.settings.heading != blank -%}

                        <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">

                          {{ block.settings.heading }}

                        </h2>

                      {%- endif -%}

                      {%- if block.settings.subheading != blank -%}

                        <div class="banner__text rte" {{ block.shopify_attributes }}>

                          <p>{{ block.settings.subheading }}</p>

                        </div>

                      {%- endif -%}

                      {%- if block.settings.testi_content != blank -%}

                        <div class="banner__text rte" {{ block.shopify_attributes }}>

                          {{ block.settings.testi_content }}

                        </div>

                      {%- endif -%}

                      <div class="footer-section">

                        <div class="author-section">

                            {%- if block.settings.author_name != blank -%}

                              <div class="banner__text rte" {{ block.shopify_attributes }}>

                                <p>{{ block.settings.author_name }}</p>

                              </div>

                            {%- endif -%}

                            {%- if block.settings.designation != blank -%}

                              <div class="banner__text rte" {{ block.shopify_attributes }}>

                                <p>{{ block.settings.designation }}</p>

                              </div>

                            {%- endif -%}

                        </div>

                        <div class="review-section">

                            {% for star in (1..block.settings.opti_stars) %}

                                {% include 'icon-star' %}

                            {% endfor %}

                        </div>

                      </div>

                </div>

                <div class="svg-bottom">

                    {% include 'icon-right-quote' %}

                </div>

            </div>

        </div>

      </div>

    {%- endfor -%}

  </div>

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}

    <div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">

      <button

        type="button"

        class="slider-button slider-button--prev"

        name="previous"

        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}">

        {% render 'icon-caret' %}

      </button>

      <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">

        {%- if section.settings.slider_visual == 'counter' -%}

          <span class="slider-counter--current">1</span>

          <span aria-hidden="true"> / </span>

          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>

          <span class="slider-counter--total">{{ section.blocks.size }}</span>

        {%- else -%}

          <div class="slideshow__control-wrapper">

            {%- for block in section.blocks -%}

              <button

                class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"

                aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

                aria-controls="Slider-{{ section.id }}"

              >

                {%- if section.settings.slider_visual == 'numbers' -%}

                  {{ forloop.index -}}

                {%- else -%}

                  <span class="dot"></span>

                {%- endif -%}

              </button>

            {%- endfor -%}

          </div>

        {%- endif -%}

      </div>

      <button

        type="button"

        class="slider-button slider-button--next"

        name="next"

        aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"

        aria-controls="Slider-{{ section.id }}"

      >

        {% render 'icon-caret' %}

      </button>

      {%- if section.settings.auto_rotate -%}

        <button

          type="button"

          class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"

          aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"

        >

          {%- render 'icon-pause' -%}

          {%- render 'icon-play' -%}

        </button>

      {%- endif -%}

    </div>

    <noscript>

      <div class="slider-buttons">

        <div class="slider-counter">

          {%- for block in section.blocks -%}

            <a

              href="#Slide-{{ section.id }}-{{ forloop.index }}"

              class="slider-counter__link link"

              aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"

            >

              {{ forloop.index }}

            </a>

          {%- endfor -%}

        </div>

      </div>

    </noscript>

  {%- endif -%}

</slideshow-component>

{%- if request.design_mode -%}

  <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>

{%- endif -%}

<style>

    .testimonial-image-section {

        width: 180px;

        height: 180px;

        overflow: hidden;

        border-radius: 20px;

        border: 3px solid #C39733;

        padding: 2px;

        margin: auto;

        position: absolute;

        top: 120px;

        left: 50%;

        right: 50%;

        transform: translate(-50%, -50%);

    }

    .testimonial-image-section img,

    .testimonial-image-section svg {

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 15px;

    }

    .testimonial-main-section {

        position: relative;

        height: 100%;

    }

    .full-width-banner {

        background-color: #eee;

        border-radius: 20px;

        position: relative;

        z-index: -1;

        max-width: 991px;

        width: 95%;

        height: auto;

        text-align: center;

        padding-top: 75px;

        margin: 130px auto 0px auto;

    }

    .full-width-banner .full-width-text {

        width: 100%;

        padding: 0px !important;

    }

    .footer-section {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 20px 40px;

    }

    .author-section {

        text-align: left;

    }

    .review-section svg {

        width: 20px;

        height: 20px;

    }

    .svg-top {

        position: absolute;

        top: -25px;

        left: 45px;

    }

    .svg-bottom {

        position: absolute;

        bottom: -25px;

        right: 45px;

    }

    .svg-top, .svg-bottom {

        width: 50px;

        height: 50px;

        border-radius: 10px;

        background-color: #C39733;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .svg-bottom svg, .svg-top svg {

        width: 40px;

        height: 40px;

    }

</style>

{% schema %}

{

  "name": "Testimonials",

  "tag": "section",

  "class": "section",

  "disabled_on": {

    "groups": ["header", "footer"]

  },

  "settings": [

    {

      "type": "select",

      "id": "layout",

      "options": [

        {

          "value": "full_bleed",

          "label": "t:sections.slideshow.settings.layout.options__1.label"

        },

        {

          "value": "grid",

          "label": "t:sections.slideshow.settings.layout.options__2.label"

        }

      ],

      "default": "full_bleed",

      "label": "t:sections.slideshow.settings.layout.label"

    },

    {

      "type": "select",

      "id": "slide_height",

      "options": [

        {

          "value": "adapt_image",

          "label": "t:sections.slideshow.settings.slide_height.options__1.label"

        },

        {

          "value": "small",

          "label": "t:sections.slideshow.settings.slide_height.options__2.label"

        },

        {

          "value": "medium",

          "label": "t:sections.slideshow.settings.slide_height.options__3.label"

        },

        {

          "value": "large",

          "label": "t:sections.slideshow.settings.slide_height.options__4.label"

        }

      ],

      "default": "medium",

      "label": "t:sections.slideshow.settings.slide_height.label"

    },

    {

      "type": "select",

      "id": "slider_visual",

      "options": [

        {

          "value": "dots",

          "label": "t:sections.slideshow.settings.slider_visual.options__2.label"

        },

        {

          "value": "counter",

          "label": "t:sections.slideshow.settings.slider_visual.options__1.label"

        },

        {

          "value": "numbers",

          "label": "t:sections.slideshow.settings.slider_visual.options__3.label"

        }

      ],

      "default": "counter",

      "label": "t:sections.slideshow.settings.slider_visual.label"

    },

    {

      "type": "checkbox",

      "id": "auto_rotate",

      "label": "t:sections.slideshow.settings.auto_rotate.label",

      "default": false

    },

    {

      "type": "range",

      "id": "change_slides_speed",

      "min": 3,

      "max": 9,

      "step": 2,

      "unit": "s",

      "label": "t:sections.slideshow.settings.change_slides_speed.label",

      "default": 5

    },

    {

      "type": "header",

      "content": "t:sections.all.animation.content"

    },

    {

      "type": "select",

      "id": "image_behavior",

      "options": [

        {

          "value": "none",

          "label": "t:sections.all.animation.image_behavior.options__1.label"

        },

        {

          "value": "ambient",

          "label": "t:sections.all.animation.image_behavior.options__2.label"

        }

      ],

      "default": "none",

      "label": "t:sections.all.animation.image_behavior.label"

    },

    {

      "type": "header",

      "content": "t:sections.slideshow.settings.mobile.content"

    },

    {

      "type": "checkbox",

      "id": "show_text_below",

      "label": "t:sections.slideshow.settings.show_text_below.label",

      "default": true

    },

    {

      "type": "header",

      "content": "t:sections.slideshow.settings.accessibility.content"

    },

    {

      "type": "text",

      "id": "accessibility_info",

      "label": "t:sections.slideshow.settings.accessibility.label",

      "info": "t:sections.slideshow.settings.accessibility.info",

      "default": "Slideshow about our brand"

    }

  ],

  "blocks": [

    {

      "type": "slide",

      "name": "t:sections.slideshow.blocks.slide.name",

      "limit": 5,

      "settings": [

        {

          "type": "image_picker",

          "id": "image",

          "label": "t:sections.slideshow.blocks.slide.settings.image.label"

        },

        {

          "type": "inline_richtext",

          "id": "heading",

          "default": "Image slide",

          "label": "t:sections.slideshow.blocks.slide.settings.heading.label"

        },

        {

          "type": "select",

          "id": "heading_size",

          "options": [

            {

              "value": "h2",

              "label": "t:sections.all.heading_size.options__1.label"

            },

            {

              "value": "h1",

              "label": "t:sections.all.heading_size.options__2.label"

            },

            {

              "value": "h0",

              "label": "t:sections.all.heading_size.options__3.label"

            }

          ],

          "default": "h1",

          "label": "t:sections.all.heading_size.label"

        },

        {

          "type": "inline_richtext",

          "id": "subheading",

          "default": "Tell your brand's story through images",

          "label": "t:sections.slideshow.blocks.slide.settings.subheading.label"

        },

        {

          "type": "richtext",

          "id": "testi_content",

          "label": "Testimonial Content."

        },

        {

          "type": "inline_richtext",

          "id": "author_name",

          "default": "John Doe",

          "label": "Name of Author."

        },

        {

          "type": "inline_richtext",

          "id": "designation",

          "default": "CEO, Company",

          "label": "Designation"

        },

        {

            "type": "range",

            "id": "opti_stars",

            "min": 1,

            "max": 5,

            "step": 1,

            "unit": "c",

            "label": "Testimonial Stars.",

            "default": 5

        },

        {

          "type": "select",

          "id": "box_align",

          "options": [

            {

              "value": "top-left",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"

            },

            {

              "value": "top-center",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"

            },

            {

              "value": "top-right",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"

            },

            {

              "value": "middle-left",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"

            },

            {

              "value": "middle-center",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"

            },

            {

              "value": "middle-right",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"

            },

            {

              "value": "bottom-left",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"

            },

            {

              "value": "bottom-center",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"

            },

            {

              "value": "bottom-right",

              "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"

            }

          ],

          "default": "middle-center",

          "label": "t:sections.slideshow.blocks.slide.settings.box_align.label",

          "info": "t:sections.slideshow.blocks.slide.settings.box_align.info"

        },

        {

          "type": "checkbox",

          "id": "show_text_box",

          "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",

          "default": true

        },

        {

          "type": "select",

          "id": "text_alignment",

          "options": [

            {

              "value": "left",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"

            },

            {

              "value": "center",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"

            },

            {

              "value": "right",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"

            }

          ],

          "default": "center",

          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"

        },

        {

          "type": "range",

          "id": "image_overlay_opacity",

          "min": 0,

          "max": 100,

          "step": 10,

          "unit": "%",

          "label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",

          "default": 0

        },

        {

          "type": "color_scheme",

          "id": "color_scheme",

          "label": "t:sections.all.colors.label",

          "default": "scheme-1"

        },

        {

          "type": "header",

          "content": "t:sections.slideshow.settings.mobile.content"

        },

        {

          "type": "select",

          "id": "text_alignment_mobile",

          "options": [

            {

              "value": "left",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"

            },

            {

              "value": "center",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"

            },

            {

              "value": "right",

              "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"

            }

          ],

          "default": "center",

          "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"

        }

      ]

    }

  ],

  "presets": [

    {

      "name": "Testimonials",

      "blocks": [

        {

          "type": "slide"

        },

        {

          "type": "slide"

        }

      ]

    }

  ]

}

{% endschema %}