Antes de tudo, é necessário inserir nossa div que faz aparecer os reviews na loja (seja por html ou por javascript). Nela temos o campo 'data-qty' nele é limitado o total de testemunhos que vai ser carregado. Colocamos como recomendado 9 testemunhos mas se quiserem podem ser mais ou menos:

<div class="yv-testimonial" data-qty="9"></div>


É necessário inserir o css do slick, então dentro da tag <head> do seu html é necessário colocar o css:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>


É necessário alterar o template default dos testemunhos para colocar a classe referência ("testemunhos-slide") para o slick iniciar o carrosel.

Basta ir em Personalizar > Template > Review de Loja > Testemunhos

Alterar a tag:

<div id="yv-testimonial" class="yv-bootstrap" style="background-color: initial">

por

<div id="yv-testimonial" class="yv-bootstrap testemunhos-slide" style="background-color: initial">


Depois disso é necessário colocar o nosso css padrão para os testemunhos, é possível ser feito a personalização do mesmo também.

Pode ser colocado em um documento css da loja ou no nosso css através da nossa ferramenta.

Se for em nossa ferramenta, basta ir em Personalizar > Template > Outros > customstyle.css e colocar o código abaixo:

.yv-testimonial { 
    overflow: hidden; 
    clear: both;
    display: none;
}

.yv-bootstrap .slick-arrow {
    border: 0;
    background-color: transparent;
    background-image: url(https://yv-misc.s3.amazonaws.com/customers/Maximustecidos/arrow.png);
    width: 8px;
    height: 13px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    -webkit-appearance: none !important;
    text-indent: -9999px;
    white-space: nowrap;
    position: absolute;
    z-index: 5;
    top: 25%;
    transform: none !important;
}
 
.yv-bootstrap .slick-prev {
    transform: rotate(180deg);
    left: 0;
}
 
.yv-bootstrap .slick-next {
    left: inherit;
    right: 0;
}
 
.yv-testimonial .yv-bootstrap .slick-list {
    width: 922px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}
 
@media (max-width: 768px) {
    .yv-testimonial .yv-bootstrap .slick-list { width: 305px !important; }
    .yv-bootstrap .slick-next { right: 0 !important; }
    .yv-bootstrap .slick-prev { left: 0 !important; }
}


Após tudo isso, é necessário inicar o slick. O código em javascript abaixo deve ser inserido na nossa ferramenta, neste caso por gentileza entre em contato conosco.

njQuery(window).load(function(){
  jQuery('.yv-testimonial').show();
  if( njQuery('.testemunhos-slide').length ) {
    njQuery('.testemunhos-slide').yvslick({
        infinite: false,
        slidesToShow: 3,
        slidesToScroll: 3,
        variableWidth: true,
        responsive:
        [
            {
            breakpoint: 800,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            },
            {
            breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
  }
});



É possível configurar quais testemunhos serão exibidos acessando Configurações > Testemunhos em nossa ferramenta.