How to Create a Testimonial Slider Section without an app in Shopify Free

How to Create a Testimonial Slider Section without an app in Shopify Free

Are you looking to add a stylish testimonial slider section to your Shopify store? Testimonial sliders are a great way to showcase customer reviews and build trust with potential buyers. In this step-by-step guide, we’ll show you how to create a testimonial slider section in Shopify using the provided code.

What You'll Need

Before we dive into the code, make sure you have the following components ready:

  1. A Shopify store
  2. Access to your Shopify theme’s code editor.
  3. Slick Carousel library (you can download it from the Slick website).
  4. The provided code snippet.

Step 1: Access Your Shopify Theme Code

Log in to your Shopify admin dashboard and navigate to “Online Store” > “Themes.” Find your active theme and click on the “Actions” button, then select “Edit code”.

Step 2: Download the Slick Carousel library

Download the slick carousel library and upload the “slick.css”, “slick-theme.css”, slick.min.js” and the “icons” to the assets in Shopify.

Step 3: Add the assets into the theme head.

To add the assets into the head section of the website. please add the following code into the theme.liquid.

{% if template == 'index' %}
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}
{{ 'slick.min.js' | asset_url | script_tag }}
{% endif %}

The provided code is designed to work on the homepage (index template) by default. If you want to use it on a different template, you can adjust the {% if template == 'index' %} condition accordingly.

Step 4: Create a section template

Now create a new testimonial-slider.liquid section template .

Step 5: Copy and paste the below code

Now copy the below code and paste it into the testimonial-slider.liquid

<section class="testimonial-slider anim-title">
    <div class="page-width">
        <h2>{{ section.settings.testimonial-slider }}</h2>
        <p class="sub-title">What they say</p>
        <div class="testimonial-track">

            {%- for block in section.blocks -%}
                <div class="testimonial-card ">
                    <div class="testimonial-meta">
                        <img src="{{ block.settings.avatar | img_url }}" alt="Testimonial Image" class="avatar">
                        
                    </div>
                    <div class="testimonial-content">
                        <p>{{ block.settings.testimonial }}</p>
                    </div>
                    <div class="author-meta">
                            <div class="star-rating">

                                {% for i in (1..5) %}
                                    {% if i > block.settings.rating %}
                                        {% break %}
                                    {% else %}
                                        <img src="{{ 'star.png' | asset_url }}" alt="Star Rating">
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <h3>{{ block.settings.name }}</h3>
                    </div>
                </div>
            {%- endfor -%}

        </div>
    </div>
</section>

This code will render the settings of the slider section like Title, User Image, Testimonial text, and the rating.

Step 6: Add settings schema

Below code will add the settings to the customizer, where user can add or edit the testimonials settings from the customizer section. 

{% schema %}
{
    "name": "Testimonial Slider",
    "settings": [
        {
            "id": "testimonial-slider",
            "type": "text",
            "label": "Add a testimonial slider"
        }
    ],
    "templates": ["index"],
    "presets": [
        {
            "name": "Testimonial Slider",
            "category": "Sliders"
        }
    ],
    "blocks": [
        {
            "name": "Testimonial Card",
            "type": "testimonial-card",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "avatar",
                    "label": "Avatar Image"
                },
                {
                    "type": "text",
                    "id": "name",
                    "label": "Name"
                },
                {
                    "type": "text",
                    "id": "testimonial",
                    "label": "Testimonial Content"
                },
                {
                    "type": "range",
                    "id": "rating",
                    "label": "Star Rating",
                    "default": 5,
                    "min": 0,
                    "max": 5
                }
            ]
        }
    ]
}
{% endschema %}

You can customize the testimonial slider by adjusting the code within the {% schema %} section. Here’s what you can modify:

  • "label": "Add a testimonial slider": Change the label to set the slider’s title.
  • "label": "Avatar Image": Customize the label for the avatar image.
  • "label": "Name": Customize the label for the customer’s name.
  • "label": "Testimonial Content": Customize the label for the testimonial content.
  • "label": "Star Rating": Customize the label for the star rating.

Step 7: Add some css

Next, some CSS needs to be required to make the slider appealing. Copy the following code and paste it just after the schema closes. {% endschema %}

{% stylesheet %}
    section.testimonial-slider {
        margin-top: 2rem;
        margin-bottom: 5rem;
    }
    .testimonial-meta {
        text-align: center;
    }
    .testimonial-meta img.avatar {
        overflow: hidden;
        display: initial;
        width: 100px;
        height: 100px;
        border-radius: 50%;
          object-fit: cover;
    }
    .testimonial-content p {
      text-align: center;
      font-size: 15px;
    }
    .author-meta h3 {
      font-size: 17px;
      font-weight: 700;
      line-height: 1;
      text-transform: capitalize;
      margin: 0;
    }
    .author-meta {
      text-align: center;
      margin-top: 30px;
    }
    .star-rating img {
      width: 20px;
    }
    .testimonial-card {
        padding: 2rem;
        margin: 0 1rem;
        position:relative;
        margin-top: 30px;
    }
    .slick-slide .star-rating img {
        display: inline!important;
    }
    button.slick-arrow {
        background: black;
        border: none;
        padding: 2rem;
        font-size: 0;
        color: transparent;
        position: absolute;
        cursor: pointer;
    }
    button.slick-prev.slick-arrow {
        left: -45px;
        top: calc(50% - 27.5px);
    }
    button.slick-next.slick-arrow {
        right: -45px;
        top: calc(50% - 27.5px);
    }
    button.slick-prev.slick-arrow:before {
        content:url('https://cdn.shopify.com/s/files/1/0554/0996/7243/t/3/assets/chevron-left.png');   
    }
    button.slick-next.slick-arrow:before {
        content:url('https://cdn.shopify.com/s/files/1/0554/0996/7243/t/3/assets/chevron-right.png');   
    }
    button.slick-arrow:hover {
        opacity:0.75
    }
    .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 20px;
        height: 20px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
    }
    .slick-dots li button:before {
        font-family: 'slick';
        font-size: 5rem;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        content: '•';
        text-align: center;
        opacity: .25;
        color: black;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .slick-dots li.slick-active button:before {
        opacity: .75;
        color: black;
    }
    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px ;
        height: 20px ;
        margin: 0 5px ;
        padding: 0;
        cursor: pointer;
    }
    .slick-dots {
        position: absolute;
        bottom: -25px ;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    } 
    @media screen and (max-width:600px) {
        button.slick-arrow {
            display: none!important;
        }
    }
{% endstylesheet %}

You can also adjust the CSS styles within the {% stylesheet %} section to match your store’s design preferences. Be sure to preview your changes as you go.

Step 7: Add javascript

Finally, Add a piece of javascript just after the {% endstylesheet %} to make the slider work. 

{% javascript %}
    $('.testimonial-track').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        arrows:false,
        autoplay: true,
        speed: 2000,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }
        ]
    });
{% endjavascript %}

Step 7: Final complete code

<section class="testimonial-slider anim-title">
    <div class="page-width">
        <h2>{{ section.settings.testimonial-slider }}</h2>
        <p class="sub-title">What they say</p>
        <div class="testimonial-track">

            {%- for block in section.blocks -%}
                <div class="testimonial-card ">
                    <div class="testimonial-meta">
                        <img src="{{ block.settings.avatar | img_url }}" alt="Testimonial Image" class="avatar">
                        
                    </div>
                    <div class="testimonial-content">
                        <p>{{ block.settings.testimonial }}</p>
                    </div>
                    <div class="author-meta">
                            <div class="star-rating">

                                {% for i in (1..5) %}
                                    {% if i > block.settings.rating %}
                                        {% break %}
                                    {% else %}
                                        <img src="{{ 'star.png' | asset_url }}" alt="Star Rating">
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <h3>{{ block.settings.name }}</h3>
                    </div>
                </div>
            {%- endfor -%}

        </div>
    </div>
</section>

{% schema %}
{
    "name": "Testimonial Slider",
    "settings": [
        {
            "id": "testimonial-slider",
            "type": "text",
            "label": "Add a testimonial slider"
        }
    ],
    "templates": ["index"],
    "presets": [
        {
            "name": "Testimonial Slider",
            "category": "Sliders"
        }
    ],
    "blocks": [
        {
            "name": "Testimonial Card",
            "type": "testimonial-card",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "avatar",
                    "label": "Avatar Image"
                },
                {
                    "type": "text",
                    "id": "name",
                    "label": "Name"
                },
                {
                    "type": "text",
                    "id": "testimonial",
                    "label": "Testimonial Content"
                },
                {
                    "type": "range",
                    "id": "rating",
                    "label": "Star Rating",
                    "default": 5,
                    "min": 0,
                    "max": 5
                }
            ]
        }
    ]
}
{% endschema %}

{% stylesheet %}
    section.testimonial-slider {
        margin-top: 2rem;
        margin-bottom: 5rem;
    }
    .testimonial-meta {
        text-align: center;
    }
    .testimonial-meta img.avatar {
        overflow: hidden;
        display: initial;
        width: 100px;
        height: 100px;
        border-radius: 50%;
          object-fit: cover;
    }
    .testimonial-content p {
      text-align: center;
      font-size: 15px;
    }
    .author-meta h3 {
      font-size: 17px;
      font-weight: 700;
      line-height: 1;
      text-transform: capitalize;
      margin: 0;
    }
    .author-meta {
      text-align: center;
      margin-top: 30px;
    }
    .star-rating img {
      width: 20px;
    }
    .testimonial-card {
        padding: 2rem;
        margin: 0 1rem;
        position:relative;
        margin-top: 30px;
    }
    .slick-slide .star-rating img {
        display: inline!important;
    }
    button.slick-arrow {
        background: black;
        border: none;
        padding: 2rem;
        font-size: 0;
        color: transparent;
        position: absolute;
        cursor: pointer;
    }
    button.slick-prev.slick-arrow {
        left: -45px;
        top: calc(50% - 27.5px);
    }
    button.slick-next.slick-arrow {
        right: -45px;
        top: calc(50% - 27.5px);
    }
    button.slick-prev.slick-arrow:before {
        content:url('https://cdn.shopify.com/s/files/1/0554/0996/7243/t/3/assets/chevron-left.png');   
    }
    button.slick-next.slick-arrow:before {
        content:url('https://cdn.shopify.com/s/files/1/0554/0996/7243/t/3/assets/chevron-right.png');   
    }
    button.slick-arrow:hover {
        opacity:0.75
    }
    .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 20px;
        height: 20px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
    }
    .slick-dots li button:before {
        font-family: 'slick';
        font-size: 5rem;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        content: '•';
        text-align: center;
        opacity: .25;
        color: black;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .slick-dots li.slick-active button:before {
        opacity: .75;
        color: black;
    }
    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px ;
        height: 20px ;
        margin: 0 5px ;
        padding: 0;
        cursor: pointer;
    }
    .slick-dots {
        position: absolute;
        bottom: -25px ;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    } 
    @media screen and (max-width:600px) {
        button.slick-arrow {
            display: none!important;
        }
    }
{% endstylesheet %}

{% javascript %}
    $('.testimonial-track').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: false,
        arrows:false,
        autoplay: true,
        speed: 2000,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }
        ]
    });
{% endjavascript %}

Now you can add the testimonial slider on the home page of your website. Go to the “Online Store” > “Themes” > “Customizer” and add the sections anywhere on your home page.

After making your customizations, click the “Save” button to save your changes. If you’re ready to make the testimonial slider live on your store, click “Publish” or “Save” again, depending on your theme’s settings.

That’s it! You’ve successfully added a testimonial slider section to your Shopify store. Customers can now see what others are saying about your products or services, helping you build trust and boost conversions.

Share us