How To Add Testimonial Section Without APP [Shopify]

Step 1: Introduction to Testimonials Section:

In this video, we’ll delve into the world of testimonials and demonstrate how you can seamlessly integrate them into your product pages. No need for expensive Shopify apps – just follow along as we unveil the magic behind this feature-packed section.

Step 2: Features Overview:

Witness firsthand the power of testimonials as we showcase the diverse range of features at your fingertips. From embedding custom videos to adjusting star ratings and text styles, the possibilities are endless.

Step 3: Customization Options:

We’ll guide you through the process of tailoring your testimonials section to match your brand’s aesthetic. Whether you prefer a grid or scroll layout or desire specific color schemes and fonts, we’ve got you covered.

Step 4: Adding New Testimonials:

Learn how to effortlessly add new testimonials directly from your Shopify backend. With just a few clicks, you can keep your testimonials section fresh and engaging for your customers.

Step 5: Back-End Setup:

Follow along as we navigate the backend of your Shopify store, ensuring that you’re equipped with all the tools necessary to implement this feature seamlessly.

Step 6: Installation of the Dawn Theme:

We’ll install a fresh Dawn theme to demonstrate that our testimonials section works flawlessly with the latest Shopify themes. Plus, we’ll provide insights into other useful videos available on our channel to enhance your Shopify layout further.

Step 7: Code Implementation:

Step into the world of code as we guide you through adding the testimonials section to your theme. Don’t worry; we’ll provide a link to the code in the YouTube description for easy access.

Copy Code

{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}

{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
  {%- assign max_width = section.settings.max_width -%}
{%- else -%}
  {%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}

{% assign inner_border_radius = section.settings.border_radius | minus: section.settings.border_width %}

{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}

{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
{%- if section.settings.override_theme_font != blank -%}
  {%- for font in font_array -%}
    {%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
  {%- endfor -%}
  #WP--{{ section.id }} {
    --main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
    --main-font-weight: {{ section.settings.main_font.weight }};
    --main-font-style: {{ section.settings.main_font.style }};
    --heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
    --heading-font-weight: {{ section.settings.heading_font.weight }};
    --heading-font-style: {{ section.settings.heading_font.style }};
  }
{%- endif -%}

#WP--{{ section.id }} {
  background: {{ section.settings.background_color }};
  margin-top: {{ section.settings.outer_margin }}px;
  margin-bottom: {{ section.settings.outer_margin }}px;
  --play-button-size: 50px;
}

#WP--{{ section.id }} .wbs__sizer {
  padding-top: {{ section.settings.inner_padding }}px;
  padding-bottom: {{ section.settings.inner_padding }}px;
  width: {{ section.settings.base_width }}%;
  max-width: {{ max_width }};
  margin: 0 auto;
}

#WP--{{ section.id }} .wbs__heading {
  text-transform: none;
  text-align: center;
  margin: 0 0 1em;
  color: {{ section.settings.heading_color }};
  line-height: calc(3px + 2ex + 3px);
  font-size: calc(var(--WP-g-heading-size, var(--WP-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  {%- endif -%}
}

{%- if section.settings.desktop_display == 'scroll' -%}
  #WP--{{ section.id }} .wbs__sizer {
    {% comment %} margin-right: 0; {% endcomment %}
  }

  #WP--{{ section.id }} .wbs__testimonials-wrapper {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    margin-left: 0;
  }

  #WP--{{ section.id }} .wbs__flex-item {
    min-width: calc(100%/{{ section.settings.per_row }} + 1vw);
    scroll-snap-align: start;
    position: relative;
    margin-bottom: 20px;
    border-radius: {{ section.settings.border_radius }}px;
  }

  #WP--{{ section.id }} ::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: rgba(0,0,0,0);
    width: 7px;
    height: 3px;
  }

  #WP--{{ section.id }} ::-webkit-scrollbar-track,
   ::-webkit-scrollbar-corner { /* Background */
    background: #D8D8D8;
  }

  #WP--{{ section.id }} ::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #000000;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
  }
{%- else -%}
  #WP--{{ section.id }} .wbs__testimonials-wrapper {
    flex-wrap: wrap;
  }

  #WP--{{ section.id }} .wbs__flex-item {
    flex: 0 0 calc(100%/{{ section.settings.per_row }} - 20px);
    border-radius: {{ section.settings.border_radius }}px;
  }
{%- endif -%}

#WP--{{ section.id }} .wbs__testimonials-wrapper {
  justify-content: flex-start;
  gap: 20px;
  display: flex;
}

#WP--{{ section.id }} .wbs__flex-item {
  height: auto;
  border: {{ section.settings.border_width }}px solid {{ section.settings.border_color }};
  background: {{ section.settings.text_background_color }};
}

#WP--{{ section.id }} .wbs__inner-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#WP--{{ section.id }} .wbs__youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  display: block;
  border-radius: {{ inner_border_radius }}px {{ inner_border_radius }}px 0 0;
}

#WP--{{ section.id }} .wbs__hosted-video {
  width: 100%;
  height: auto;
  display: block;
}


#WP--{{ section.id }} .wbs__video-inner-wrapper {
  position: relative;
}

#WP--{{ section.id }} .wbs__play-button,
#WP--{{ section.id }} .wbs__pause-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--play-button-size);
  height: var(--play-button-size);
  fill: {{ section.settings.play_button_color }};
  transition: 0.1s ease;
  cursor: pointer;
}

#WP--{{ section.id }} .wbs__pause-button {
  opacity: 0;
  transition: 0.1s ease;
  pointer-events: none;
  width: calc(var(--play-button-size)/1.5);
  height: calc(var(--play-button-size)/1.5);
  fill: {{ section.settings.play_button_color }};
}


#WP--{{ section.id }} .wbs__video-wrapper:hover {
  border-color: red;
}
#WP--{{ section.id }} .wbs__video-wrapper:hover .wbs__pause-button.wbs__playing {
  opacity: 100;
  pointer-events: initial;
}

#WP--{{ section.id }} .wbs__play-button path,
#WP--{{ section.id }} .wbs__pause-button path {
  pointer-events: none;
}

#WP--{{ section.id }} .wbs__play-button.wbs__playing {
  opacity: 0;
}

#WP--{{ section.id }} .wbs__stars {
  display: flex;
  justify-content: center;
  width: min(80%, 300px);
}

#WP--{{ section.id }} .wbs__star {
  flex: 1 0 auto;
  max-width: 30px;
}

#WP--{{ section.id }} .wbs__star svg path {
  fill: {{ section.settings.star_color }};
}

#WP--{{ section.id }} .wbs__text {
  position: relative;
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
  font-weight: normal;
  color: {{ section.settings.text_color }};
  line-height: calc(3px + 2ex + 3px);
  font-size: calc(var(--WP-g-body-size, var(--WP-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--main-font);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-style);
  {%- endif -%}
}

#WP--{{ section.id }} .wbs__image {
  width: {{ section.settings.image_size }}%;
  overflow: hidden;
}

#WP--{{ section.id }} .wbs__image--circle {
  border-radius: 50%;
}

#WP--{{ section.id }} .wbs__image--rounded {
  border-radius: 5px;
}

#WP--{{ section.id }} .wbs__link {
  text-align: center;
  margin-top: 20px;
  font-weight: normal;
  text-decoration: underline;
  color: {{ section.settings.text_color }};
  line-height: calc(3px + 3ex + 3px);
  font-size: calc(var(--WP-g-body-size, var(--WP-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--main-font);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-style);
  {%- endif -%}
}

#WP--{{ section.id }} .wbs__link:not([href]) {
  text-decoration: none;
}

/* Animation */
{%- if section.settings.animation != 'none' -%}
  #WP--{{ section.id }}.wbs__animation-applied [style*="--wbs-animate"] {
    animation-name: wbs__animation--{{ section.settings.animation }};
  }
{%- else -%}
  #WP--{{ section.id }} [style*="--wbs-animate"] {
    opacity: 1;
  }
{% endif %}

{%- if section.settings.custom_css != blank -%}
  {%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
  {%- for declaration in custom_section_declarations -%}
    {%- if declaration contains '{' -%}
      #WP--{{ section.id }} {{ declaration }} }
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  #WP--{{ section.id }} .wbs__sizer {
    width: 100%;
  }

  {%- if section.settings.mobile_display == 'scroll' -%}
    #WP--{{ section.id }} .wbs__testimonials-wrapper {
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      overflow-x: scroll;
      justify-content: flex-start;
      scroll-snap-type: x mandatory;
      scroll-padding: 20px;
      padding-right: 20px;
      padding-left: 20px;
      margin-left: 0;
    }

    #WP--{{ section.id }} .wbs__flex-item {
      min-width: 75vw;
      scroll-snap-align: start;
      position: relative;
      margin-bottom: 20px;
    }

    #WP--{{ section.id }} .wbs__flex-item:first-child {
      margin-left: 20px;
    }

    #WP--{{ section.id }} ::-webkit-scrollbar {
      -webkit-appearance: none;
      background-color: rgba(0,0,0,0);
      width: 7px;
      height: 3px;
    }

    #WP--{{ section.id }} ::-webkit-scrollbar-track,
     ::-webkit-scrollbar-corner { /* Background */
      background: #D8D8D8;
    }

    #WP--{{ section.id }} ::-webkit-scrollbar-thumb {
      border-radius: 0px;
      background-color: #000000;
      -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
  {%- else -%}
    #WP--{{ section.id }} .wbs__testimonials-wrapper {
      margin: 0 20px;
    }

    #WP--{{ section.id }} .wbs__flex-item {
      min-width: 100%;
    }
  {%- endif -%}

  #WP--{{ section.id }} .wbs__inner-content {
    padding: 2em 2.5em;
  }
}
/* Landscape phones and down */
@media (max-width: 480px) {
  #WP--{{ section.id }} {
    margin-top: {{ section.settings.outer_margin | divided_by: 2 }}px;
    margin-bottom: {{ section.settings.outer_margin | divided_by: 2 }}px;
  }
  #WP--{{ section.id }} .wbs__sizer {
    padding-top: {{ section.settings.inner_padding | divided_by: 2 }}px;
    padding-bottom: {{ section.settings.inner_padding | divided_by: 2 }}px;
  }
  {%- if section.settings.mobile_custom_css != blank -%}
    {%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
    {%- for declaration in mobile_custom_declarations -%}
      {%- if declaration contains '{' -%}
        #WP--{{ section.id }} {{ declaration }} }
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
}


.wbs__image__wrapper:not(.wbs__image__wrapper--contain) svg{
  width: inherit;
    height: inherit;
}

.wbs__image__wrapper{
  position: relative;
  display: grid;
  margin: 0;
}

  .wbs__image__wrapper img{
    object-fit: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
</style>

{%- comment -%} HTML {%- endcomment -%}
<section id="WP--{{ section.id }}" class="WP--{{ section.id }} wbs__testimonials-video wbs__section" {%- if section.settings.animation != 'none' -%}data-animated-section{%- endif -%}>
  <div class="wbs__sizer">
    {%- if section.settings.title != blank -%}
      <h2 class="wbs__heading">{{ section.settings.title }}</h2>
    {%- endif -%}
    <div class="wbs__testimonials-wrapper wbs__flex">
      {%- for block in section.blocks -%}
        <style>
          .wbs__block-{{ block.id }} .wbs__hosted-video {
            {%- if block.settings.star_rating != -1 or block.settings.title != blank or block.settings.image != blank or block.settings.link_label != blank %}
              border-radius: {{ inner_border_radius }}px {{ inner_border_radius }}px 0 0;
            {% else %}
              border-radius: {{ inner_border_radius }}px;
            {% endif %}
          }
        </style>
        <div class="wbs__flex-item wbs__item wbs__block-{{ block.id }}" {{ block.shopify_attributes }} style="--wbs-animate: {{ forloop.index }};">
          <div class="wbs__video-wrapper">
            {%- if block.settings.youtube_video != blank %}
              <iframe
                class="wbs__youtube-video"
                src="https://www.youtube.com/embed/{{ block.settings.youtube_video.id }}"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope;"
                allowfullscreen></iframe>
            {% elsif block.settings.html5_video != blank %}
              {%- assign video = block.settings.html5_video -%}
              <div class="wbs__video-inner-wrapper">
                <video class="wbs__hosted-video" width="{{ video.aspect_ratio | times: 100 }}" height="100" {% if section.settings.video_style == 'control_bar' %}controls{% endif %} playsinline loading="lazy" poster="{{ video.preview_image | image_url: width: 2800 }}">
                  {%- for source in video.sources -%}
                    <source src="{{ source.url }}">
                  {%- endfor -%}
                </video>
                {% if section.settings.video_style == 'play_button'  %}
                  <svg id="wbs__play-button" class="wbs__play-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"/></svg>
                  <svg id="wbs__pause-button" class="wbs__pause-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 22h-4v-20h4v20zm6-20h-4v20h4v-20z"/></svg>
                {% endif %}
              </div>
            {% endif %}
          </div>
          {%- if block.settings.star_rating != -1 or block.settings.title != blank or block.settings.image != blank or block.settings.link_label != blank %}
            <div class="wbs__inner-content">
              {%- if block.settings.star_rating != -1 -%}
                <div class="wbs__stars">
                  {%- for i in (1..5) -%}
                    <div class="wbs__star">
                      {%- if i <= block.settings.star_rating -%}
                        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.2 18a.8.8 0 01-.792-.914l.743-5.203-2.917-2.917a.8.8 0 01.434-1.355l4.398-.733 2.218-4.435a.8.8 0 011.435.008l2.123 4.361 4.498.801a.8.8 0 01.425 1.353l-2.917 2.917.744 5.203a.8.8 0 01-1.154.828l-4.382-2.22-4.502 2.223A.792.792 0 015.2 18z" fill="#5C5F62"/></svg>
                      {%- else -%}
                        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.71 15.116l3.357-1.658.892.452 2.327 1.178-.56-3.912.708-.707 1.29-1.29-3.235-.576-.445-.915-1.059-2.176L8.4 8.683l-1.005.168-2.098.35 1.975 1.975-.141.99-.422 2.95zM5.2 18a.8.8 0 01-.792-.914l.743-5.203-2.917-2.917a.8.8 0 01.434-1.355l4.398-.733 2.218-4.435a.8.8 0 011.435.008l2.123 4.361 4.498.801a.8.8 0 01.425 1.353l-2.917 2.917.744 5.203a.8.8 0 01-1.154.828l-4.382-2.22-4.502 2.223A.792.792 0 015.2 18z" fill="#5C5F62"/></svg>
                      {%- endif -%}
                    </div>
                  {%- endfor -%}
                </div>
              {%- endif -%}
              {%- if block.settings.title != blank -%}
                <div class="wbs__text wbs__rte">
                  {{ block.settings.title }}
                </div>
              {%- endif -%}
              {%- if block.settings.link_label != blank -%}
                <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} {% if block.settings.external_link %}target="_blank"{% endif %} class="wbs__link">
                  {{ block.settings.link_label }}
                </a>
              {%- endif -%}
            </div>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}

{% schema %}
{
  "name": "Testimonials - video",
  "class": "WP__testimonials-video",
  "settings": [
     {
        "type": "paragraph",
        "content": "Support WebSensePro by [Subscribing our Channel](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)"
      },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Some kind words."
    },
    {
      "type": "range",
      "id": "per_row",
      "label": "Testimonials per row",
      "default": 4,
      "min": 1,
      "max": 5
    },
    {
      "type": "select",
      "id": "video_style",
      "label": "Video style",
      "default": "control_bar",
      "options": [
        {
          "value": "control_bar",
          "label": "Control bar"
        },
        {
          "value": "play_button",
          "label": "Play button"
        }
      ],
      "info": "Does not apply to Youtube or Vimeo videos."
    },
    {
      "type": "select",
      "id": "desktop_display",
      "label": "Display",
      "default": "grid",
      "options": [
        {
          "value": "scroll",
          "label": "Scroll"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ]
    },
    {
      "type": "header",
      "content": "📱 Mobile"
    },
    {
      "type": "select",
      "id": "mobile_display",
      "label": "Mobile display",
      "default": "scroll",
      "options": [
        {
          "value": "scroll",
          "label": "Scroll"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ]
    },
    {
      "type": "header",
      "content": "Text appearance"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 60,
      "max": 120,
      "step": 5,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Design"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "Testimonial star color",
      "default": "#121212"
    },
     {
      "type": "color",
      "id": "play_button_color",
      "label": "Play button color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#121212"
    },
    {
      "type": "range",
      "id": "border_width",
      "label": "Border width",
      "default": 1,
      "min": 0,
      "max": 12,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Border radius",
      "default": 0,
      "min": 0,
      "max": 50,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "base_width",
      "label": "Size",
      "min": 80,
      "max": 100,
      "step": 5,
      "default": 95,
      "unit": "%"
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "Maximum width",
      "placeholder": "eg. 1200px",
      "info": "Sets width constraint for content."
    },
    {
      "type": "range",
      "id": "inner_padding",
      "label": "Inner padding",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 40,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "outer_margin",
      "label": "Outer margin",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 0,
      "step": 5,
      "unit": "px"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "video",
          "id": "html5_video",
          "label": "Hosted video"
        },
        {
          "type": "video_url",
          "id": "youtube_video",
          "label": "YouTube video (optional)",
          "accept": ["youtube"]
        },
        {
          "type": "range",
          "id": "star_rating",
          "min": -1,
          "max": 5,
          "label": "Star rating",
          "default": 5,
          "info": "Set to -1 to hide star rating"
        },
        {
          "type": "richtext",
          "id": "title",
          "label": "Testimonial",
          "default": "<p>Best product ever! Highly recommend.</p>"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonials",
      "blocks": [
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        }
      ]
    }
  ]
}
{% endschema %}

{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wbs="{{ section.id }}">
  {
    "id": {{ section.id | json }},
    "animation": {{ section.settings.animation | json }}
  }
</script>
{%- comment -%} JavaScript {%- endcomment -%}
<script
  data-wbs-js="{{ section.id }}"
  type="module"
  defer
>
(function(){
  const wbsPack = {
    settings: {},
    animateSection: function(entries, observer){
      // Target the first entry available.
      let observedSection = entries[0];
      if (observedSection.isIntersecting) {
        observedSection.target.classList.add('wbs__animation-applied');
      }
    },
    playVideo: function(play_button){
      const video = play_button.previousElementSibling;
      const pause_button = play_button.nextElementSibling;
      video.play();
      play_button.classList.add('wbs__playing');
      pause_button.classList.add('wbs__playing')
      video.addEventListener("ended", (event) => {
        play_button.classList.remove('wbs__playing');
        pause_button.classList.remove('wbs__playing');
      });
    },
    pauseVideo: function(pause_button){
      const video = pause_button.parentElement.querySelector('.wbs__hosted-video');
      const play_button = pause_button.parentElement.querySelector('.wbs__play-button');
      video.pause();
      play_button.classList.remove('wbs__playing');
      pause_button.classList.remove('wbs__playing');
    },
    load: function(section){
      const play_buttons = section.querySelectorAll(`.wbs__play-button`);
      const pause_buttons = section.querySelectorAll(`.wbs__pause-button`);

      play_buttons.forEach((play_button) => {
        play_button.addEventListener('click', (e) => {
          this.playVideo(e.target)
        });
      });

      pause_buttons.forEach((pause_button) => {
        pause_button.addEventListener('click', (e) => {
          this.pauseVideo(e.target)
        });
      });

      if (this.settings.animation !== 'none'){
        const options = {
          root: null,
          rootMargin: '0px',
          threshold: [0, 0.25, 0.5, 0.75, 1]
        };
        // Construct Intersection Observer.
        const observer = new IntersectionObserver( this.animateSection, options );
        // Observe if element is present.
        if (section) {
          observer.observe(section);
        }
      }
    },
    unload: function(section){
      section.classList.remove('wbs__animation-applied')
    }
  }
  window.addEventListener('shopify:section:unload', function (e) {
    const settings = document.querySelector(`[data-wbs="${e.detail.sectionId}"]`);
    const sectionId = e.detail.sectionId;
    const section = document.querySelector(`#WP--${e.detail.sectionId}`);
    if (sectionId == wbsPack.settings.id){
      wbsPack.unload(section);
    }
  });
  wbsPack.settings = JSON.parse(document.querySelector('[data-wbs="{{ section.id }}"]').innerHTML);
  const sectionId = {{ section.id | json }};
  const section = document.querySelector(`#WP--${sectionId}`);
  if (sectionId == wbsPack.settings.id){
    wbsPack.load(section);
  }
})()
</script>

Step 8: Preview and Testing:

Once implemented, we’ll show you how to preview and test your testimonials section to ensure everything functions as expected. From desktop to mobile, your testimonials will shine across all platforms.

Step 9: Conclusion and Call to Action:

As we wrap up, we’ll invite you to explore more valuable content on our channel, designed to elevate your Shopify store’s layout and boost sales. Remember, all our tutorials and sections are free – all you need to do is subscribe!