Shopify reviews widget slick

shopify reviews widget

{% if section.settings.show_reviews_slider %}
<div class="review_wrapper">
<h2 class="center home-section--title">{{ section.settings.reviews_title }}</h2>

<div data-section-id="{{ section.id }}"  id="slick-{{ section.id }}" class="slickslider reviews-responsive{% if section.settings.slideshow_width == 'contained' %} collection-list--container {% endif %}" data-section-type="reviews-slideshow-section">  
  {% for block in section.blocks %}
    <div class="brand-slide">
      <img src="{{ 'reviews_stars.png' | asset_img_url: 'original' }}" alt="5 star review">
      <h4>{{ block.settings.review_title }}</h4>
      <div class="reviews_copy">{{ block.settings.review_copy }}</div>
      <div class="reviewer_name">{{ block.settings.review_name }}</div>
      	
      
    </div>
  {% endfor %}  
</div>
</div>
{% endif %}



{% schema %}
 {
    "name": "Reviews Slider",
    "max_blocks": 20,
    "settings": [
      {
        "type": "select",
        "id": "slideshow_width",
        "label": "Layout",
        "options": [
          {
            "value": "full",
            "label": "Full-width"
          },
          {
            "value": "contained",
            "label": "Contained"
          }
        ],
        "default": "full"
      },
	  {
        "type": "text",
        "id": "reviews_title",
        "label": "Reviews Title",
		"default": "Reviews"
      },
	  {
        "type": "checkbox",
        "id": "show_reviews_slider",
        "label": "Enable reviews slider",
		"default": true
      },
      {
        "type": "header",
        "content": "Info"
      },
      {
        "type": "paragraph",
        "content": "You may upload up to 25 reviews"
      },
	  {
        "type": "paragraph",
        "content": "Please try to use the same pixel size for all images - I've suggested 133px by 73px but you can use whatever other size you want"
      }

	],
     "blocks" : [
      {
        "type": "review",
        "name": "Review",
        "settings": [
      {
        "type": "header",
        "content": "Review"
      },
	  {
        "type": "text",
        "id": "review_title",
        "label": "Review Title"
      },
	  {
        "type": "textarea",
        "id": "review_copy",
        "label": "Review Body"
      },
	  {
        "type": "text",
        "id": "review_name",
        "label": "Name of reviewer"
      }
	  ]
 	 }
	]
 }
{% endschema %}



{% javascript %}

// form a brands slider with slick
  $('.reviews-responsive').slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
  autoplaySpeed: 2000,
    autoplay: true,
 	arrows: true,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          infinite: true
        }
      },
      {
        breakpoint: 769,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });



$('.reviews_copy').readmore({
        speed: 75,
        lessLink: '<a href="#">Read less</a>',
        collapsedHeight: 73
      });
{% endjavascript %}


{% stylesheet %}
.reviews-responsive {padding-top:20px;padding-bottom:100px;}
.brand-slide h4 {margin-bottom:10px;}
.brand-slide {
padding:20px;
text-align:left;
}
.reviews_copy {
    color: #b1b1b1;
    font-style: italic;
	padding-bottom:15px;
	overflow:hidden;
}
.reviews_copy a {padding:10px 0;}
.slick-slide {outline:none;}
.slick-next {right:0;}
.slick-prev {
    left: 0;
}
.center {text-align:center;}
.review_wrapper {margin-top:70px;}
{% endstylesheet %}



<style>
  .brand-slide a {color:{{ settings.color_links }} !Important;}
  .slick-prev, .slick-next{color:{{ settings.color_links }} !Important;}
</style>

Here we have a sectioned reviews widget that can be added to homepage/cart etc. Edit and enjoy. Needs slick and readmore.js