Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Dawn 2.0.
Crie um carrossel responsivo para suas avaliações ou depoimentos. Este é um código plug and play. Nenhuma experiência de codificação necessária. Nenhum aplicativo nem assinatura necessária.
Observação: o vídeo mostra o carrossel para coleções de produtos, mas as mesmas etapas para criar um carrossel de depoimentos. O código foi modificado abaixo.
1. Acesse Admin Shopify store > Temas > Ações > Editar Código
2. Na pasta Seção, crie uma nova seção, nomeie-a como "carrossel personalizado" e cole o código abaixo.
| {% 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. Clique em SALVAR.
4. Pronto. Tudo que você precisa para personalizar o tema
Observação: como estamos usando script externo ou código-fonte, o tema deve ser SALVAR antes de você ver as alterações ao personalizar o tema.
Para verificar o código do carrossel de coleta de produtos. Clique aqui