Slick Carousel for Testimonials or Quotes or Reviews

Slick Carousel for Testimonials or Quotes or Reviews

Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0.

Create a responsive carousel for your reviews or testimonials. This is a plug and play code. No coding experience needed. No app nor subscription needed.

Note: Video is showing carousel for product collections but same steps in creating a testimonial carousel.  Code has been modified below. 

 

1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, create a new section, name it "custom-carousel", then paste the code below.

{% comment %}
When customizing theme, changes need to be SAVE before you will see the updated setting.
{% endcomment %}

{% if section.settings.title != blank %}
<div class="section-header text-center">
<h3>{{ section.settings.title | escape }}</h3>
</div>
{% endif %}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="carousel-page">

<button type="button" class="carousel-navi carousel-navi-left"> </button>
<div class="carousel-root" {%- if section.settings.bg_color != false -%} style="background: none" {%- endif -%}>


{% for block in section.blocks %}
<div class="carousel-track ">
<span class="quote-icon">{% include 'icon-quote' %}</span>
{% if block.settings.quote != blank %}
<div class="rte-setting rte">{{ block.settings.quote }}</div>
{% endif %}
{% if block.settings.author != blank %}
<cite>{{ block.settings.author | escape }}</cite>
{% endif %}

</div>


{% endfor %}
</div>
<button type="button" class="carousel-navi carousel-navi-right"> </button>
</div>


<style>
html {
font-size: 62.5%;
height: 100vh;
}
.carousel-page {
position: relative;
width: 100%;
height: 50%;
display: flex;
overflow: auto;
justify-content: center;
}
/* carousel container */
.carousel-root {
position: relative;
width: 90%;
background: linear-gradient(to right bottom, {{section.settings.bg_linear1}}, {{section.settings.bg_linear2}});
background-size: cover;
border-radius: 1rem;
box-sizing: content-box;
padding: .5rem;
}


/* carousel navigation */
.carousel-navi {
cursor: pointer;
z-index: 100;
background:{{section.settings.navi_color}};
border: none;
border-radius: 1.5rem;
transition: all .3s;
margin: 0 .5rem;
padding: 30px;
align-self: center;
}

.carousel-navi:hover {
filter: brightness(0.85); /* brightness when hover*/
}

.carousel-navi:active {
filter: brightness(0.6);
transform: translateY(.4rem); /* brightness when got clicked*/
}

.carousel-navi-left {
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.carousel-navi-right {
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}


@media (max-width: 110em){
.carousel-root {
width: 85%;
}

@media (max-width: 65em){
.carousel-root {
width: 75%;
}
}

@media (max-width: 48em){
.carousel-root {
width: 69%;
}
.carousel-navi {
padding: 20px;
}
}
</style>

<script>
$(".carousel-root").slick({
infinite: true,
autoplay: {{ section.settings.autoplay }},
autoplaySpeed: {{ section.settings.autorotate_speed | times: 1000 }},
slidesToShow: {{section.settings.product_count}},
slidesToScroll: 1,
speed: 1500,
dots: false,
arrows: true,
prevArrow: $(".carousel-navi-left"),
nextArrow: $(".carousel-navi-right"),
responsive: [
{
breakpoint: 1020,
settings: {
slidesToShow: 3,
infinite: true, }
},
{
breakpoint: 600,
settings: {
slidesToShow: 2, }
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,}
}]
});
</script>

{% schema %}
{
"name": "Carousel",
"class": "index-section",
"max_blocks": 9,
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": {
"en": "Testomonials Slider"
}
},
{
"type": "range",
"id": "product_count",
"min": 2,
"max": 10,
"label": "Number of products to display",
"default": 4
},
{
"type": "checkbox",
"id": "bg_color",
"label": {
"en": "Background color NONE"
},
"default": false
},
{
"type": "color",
"id": "bg_linear1",
"label": "Background color first linear gradient",
"default": "#DAF4F1"
},
{
"type": "color",
"id": "bg_linear2",
"label": "Background color second linear gradient",
"default": "#11999E"
},
{
"type": "color",
"id": "text_details",
"label": "Text details color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "navi_color",
"label": "Navigation color",
"default": "#56D4C5"
},
{
"type": "checkbox",
"id": "autoplay",
"label": {
"en": "Autoplay slides"
},
"default": true
},
{
"type": "range",
"id": "autorotate_speed",
"label": {
"en": "Change slides every"
},
"max": 9,
"min": 1,
"step": 1,
"unit": {
"en": " s"
},
"default": 3
}
],
"blocks": [
{
"type": "quote",
"name": {
"cs": "Ohlas",
"da": "Udtalelse",
"de": "Testimonial",
"en": "Testimonial",
"es": "Testimonio",
"fi": "Suositukset",
"fr": "Témoignage",
"it": "Testimonial",
"ja": "お客様の声",
"ko": "추천",
"nb": "Anbefaling",
"nl": "Testimonial",
"pl": "Referencja",
"pt-BR": "Depoimento",
"pt-PT": "Testemunho",
"sv": "Kundberättelser",
"th": "เสียงชื่นชมจากลูกค้า",
"tr": "Kullanıcı görüşü",
"vi": "Chứng thực",
"zh-CN": "感言",
"zh-TW": "推薦文"
},
"settings": [
{
"type": "richtext",
"id": "quote",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"cs": "<p>Přidejte recenze a ohlasy zákazníků, které vyjadřují jejich spokojenost s vaším obchodem.</p>",
"da": "<p>Tilføj kundeanmeldelser og udtalelser for at fremhæve din butiks tilfredse kunder.</p>",
"de": "<p>Kunden-Reviews und Testimonials, die Kundenzufriedenheit beweisen.</p>",
"en": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>",
"es": "<p>Agrega las reseñas y los testimonios de los clientes para mostrar a los clientes satisfechos de tu tienda.</p>",
"fi": "<p>Lisää asiakasarviointeja ja suositteluja esimerkeiksi myymäläsi tyytyväisistä asiakkaista.</p>",
"fr": "<p>Ajoutez des avis et témoignages pour mettre en avant vos clients satisfaits.</p>",
"it": "<p>Aggiungi recensioni e testimonianze sul tuo negozio per dimostrare che i clienti sono soddisfatti.</p>",
"ja": "<p>あなたのストアの幸せなお客様を紹介するために、カスタマーレビューとお客様の声を追加してください。</p>",
"ko": "<p>고객 리뷰 및 추천을 추가하여 스토어에 만족한 고객을 보여주십시오.</p>",
"nb": "<p>Legg til kundeomtaler og anbefalinger for å vise frem butikkens glade kunder.</p>",
"nl": "<p>Voeg beoordelingen van klanten en testimonials toe om te laten zien dat je klanten tevreden zijn.</p>",
"pl": "<p>Dodaj opinie i referencje od klientów, aby pokazać zadowolenie klientów Twojego sklepu.</p>",
"pt-BR": "<p>Adicione comentários e depoimentos para dar destaque aos clientes satisfeitos com a sua loja.</p>",
"pt-PT": "<p>Adicione análises e testemunhos para mostrar os clientes felizes da sua loja.</p>",
"sv": "<p>Lägg till kundrecensioner och berättelser för att visa upp din butiks nöjda kunder.</p>",
"th": "<p>เพิ่มรีวิวและเสียงชื่นชมจากลูกค้าเพื่อนำเสนอลูกค้าที่ได้รับความพึงพอใจจากร้านค้า</p>",
"tr": "<p>Müşteri değerlendirmeleri ve kullanıcı görüşleri ekleyerek mağazanızdan memnun kalan müşterileri gösterin.</p>",
"vi": "<p>Thêm đánh giá và chứng thực từ khách hàng để chứng minh khách hàng hài lòng với cửa hàng.</p>",
"zh-CN": "<p>添加客户评论和感言,以展示对您的商店满意的客户。</p>",
"zh-TW": "<p>新增顧客評論和推薦文,展示對您商店滿意之顧客。</p>"
}
},
{
"type": "text",
"id": "author",
"label": {
"cs": "Autor",
"da": "Forfatter",
"de": "Autor",
"en": "Author",
"es": "Autor",
"fi": "Kirjoittaja",
"fr": "Auteur",
"it": "Autore",
"ja": "執筆者",
"ko": "작성자",
"nb": "Forfatter",
"nl": "Auteur",
"pl": "Autor",
"pt-BR": "Autoria",
"pt-PT": "Autoria",
"sv": "Upphovsman",
"th": "ผู้เขียน",
"tr": "Yazar",
"vi": "Tác giả",
"zh-CN": "作者",
"zh-TW": "作者"
},
"default": {
"cs": "Jméno autora",
"da": "Forfatterens navn",
"de": "Name des Autors",
"en": "Author's name",
"es": "Nombre del autor",
"fi": "Kirjoittajan nimi",
"fr": "Nom de l'auteur",
"it": "Nome dell'autore",
"ja": "筆者の名前",
"ko": "작성자 이름",
"nb": "Forfatterens navn",
"nl": "Naam auteur",
"pl": "Nazwisko autora",
"pt-BR": "Nome do autor",
"pt-PT": "Nome do autor",
"sv": "Författarens namn",
"th": "ชื่อผู้เขียน",
"tr": "Yazar adı",
"vi": "Tên tác giả",
"zh-CN": "作者姓名",
"zh-TW": "作者名稱"
}
}
]
}
],

"presets": [
{
"category": "Carousel",
"name": "Testimonials Slider",
"settings": {
"product_count": 4
}
}
]
}
{% endschema %}

3. Click SAVE.
4. Done. All you need to customize the theme

Note: Since we are using outside script or source code, theme must be SAVE before you see changes when customizing theme.

To check the code for the product collection carousel. Click here

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Deixe um comentário