Como adicionar controle deslizante de depoimento no Shopify [SEM APP]

9 de março de 2022

Compatibilidade: Compatível com todos os temas do Shopify.

Você está enfrentando alto tráfego em sua loja Shopify, mas baixas taxas de conversão? Adicionar um controle deslizante de depoimento à sua loja pode ajudar a aumentar a credibilidade e incentivar mais compras. Ao apresentar feedback positivo dos clientes, você pode construir a confiança de compradores em potencial e esclarecer quaisquer dúvidas que eles possam ter sobre seus produtos ou serviços.

A boa notícia é que adicionar um controle deslizante de depoimento à sua loja Shopify é fácil e personalizável. Você pode escolher a posição do nome do autor e personalizar a cor da borda para combinar com a marca da sua loja. Seguindo as etapas abaixo, você pode criar uma ferramenta de marketing poderosa que pode ajudar a impulsionar as vendas e aumentar a satisfação do cliente.

Não desperdice o alto tráfego - adicione um controle deslizante de depoimento à sua loja Shopify hoje mesmo e comece a converter mais visitantes em clientes fiéis!

Por favor, pode ver este controle deslizante de depoimento em nossa loja de demonstração aqui . Senha: made4uo

O que você está comprando:

Adicione depoimentos com links para fornecer legitimidade
Opção de adicionar imagem dos autores ao lado do nome
Personalize as cores. Remova a cor para remover a borda
Compatível com dispositivos móveis

O que torna nosso código melhor:

Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
Não deixamos nem adicionamos códigos para anunciar em nosso site
Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Vá para loja Admin Shopify > Temas > Ações > Editar código

2. Na pasta Seção, crie uma nova seção, nomeie-a como quiser e substitua o código padrão pelo código abaixo.

 { %- estilo -% } 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; 
preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ;
 }
 . seçãoHeader {
 exibição : flexível ;
 flex - direction : coluna ; 
}
 . sectionHeader :: depois de {
 conteúdo : ' {{section.settings.swipeable_text}} ' ;
 Mostrar nenhum ;
 margem : automática ;
 tamanho da fonte : 14px ;
 transformação de texto : maiúscula ;
 animação : piscar 1,5s linear infinito ;
 } 
@quadros-chave piscam {
 0 % {
 opacidade : 0 ;
 }
 30 % {
 opacidade : 0,5 ;
 }
 100 % {
 opacidade : 1 ;
 }
 } 
. seçãoHeader > p {
 alinhamento de texto : centro ;
 }
 depoimento - controle deslizante [ dados - controle deslizante ] {
 exibição : flexível ;
 posição : relativa ;
 flex - wrap : herdar ;
 estouro -x : automático ; 
scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ;
 rolagem - preenchimento - esquerda : 0 ;
 - webkit - overflow - rolagem : toque ;
 margem inferior : 1rem ; 
-ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ;
 }
 depoimento - controle deslizante [ dados - controle deslizante ] ::- webkit - barra de rolagem {
 Mostrar nenhum ;
 } 
depoimento - controle deslizante [ dados - controle deslizante - item ] {
 borda : var ( -testimonial - border - width ) sólido transparente ;
 }
 depoimento - controle deslizante li {
 estilo de lista : nenhum ;
 } 
depoimento - controle deslizante [ dados - contador - contêiner ] {
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 }
 depoimento - controle deslizante [ dados - contador ] {
 altura : 10px ; 
exibição : flexível ;
 margem : automático 5px ;
 preenchimento : 20px 0 ;
 }
 depoimento - controle deslizante [ dados - contador ] > span {
 largura : 20px ; 
plano de fundo : { { bloco. configurações . não ativo } } ;
 }
 . citaçõesSlider {
 preenchimento - esquerda : 0 ;
 scroll - snap - type : x obrigatório ;
 rolagem - preenchimento : 10 %; 
}
 . citaçõesSlide {
 scroll - snap - align : start ;
 }
 . redondo {
 altura : 20px ;
 proporção de aspecto : 1 ;
 borda - raio : 50 %;
 } 
. canto arredondado {
 altura : 5px ;
 raio da borda : 5px ;
 }
 . não - volta - esquina {
 altura : 5px ;
 }
 . slickDots > . slide__link -- ativo > span { 
plano de fundo : { { seção. configurações . Cor da borda } } ;
 }
 . citaçõesWrapper blockquote {
 altura : 100 %;
 margem : 0 ;
 preenchimento : 2rem ;
 borda - esquerda : nenhuma ; 
exibição : flexível ;
 flex - direction : coluna ;
 justificar - conteúdo : espaço entre ;
 lacuna : 20px ;
 }
 . quoteIcon svg {
 largura : 20px ;
 }
 . autorWrapper {
 exibição : flexível ; 
lacuna : 10px ;
 alinhar - itens : centro ;
 }
 . autorWrapper > img {
 borda - raio : 50 %;
 proporção de aspecto : 1 ;
 largura : 70px ;
 altura : automático ; 
ajuste ao objeto : capa ;
 }
 . autorWrapper > citar {
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 } 
. autorWrapper > citar > span {
 tamanho da fonte : 12px ;
 }
 . quoteIcon {
 exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 alinhar - itens : centro ;
 }
 . quoteIcon a { 
tamanho da fonte : 12px ;
 }
 . slickDots span {
 plano de fundo : { { seção. configurações . não ativo } } ;
 }
 Tela @media somente e ( largura mínima : 950px ) {
 . slideCol { 
min - largura : 33 %;
 }
 }
 Tela @media somente e ( largura máxima : 949px ) {
 . slideCol {
 min - largura : 50 %;
 }
 } 
Tela @media somente e ( largura máxima : 750px ) {
 . pontos lisos {
 Mostrar nenhum ! importante
 }
 . sectionHeader :: depois de {
 exibição : bloco
 }
 }
 Tela @media somente e ( largura máxima : 481px ) { 
. slideCol {
 min - largura : 100 %;
 }
 }
 @media screen e ( largura mínima : 750px ) {
 . seção - { { seção. id } } - preenchimento { 
preenchimento - topo : { { seção. configurações . padding_top } } px ;
 preenchimento - inferior : { { seção. configurações . padding_bottom } } px ;
 }
 }
 . depoimento - seção { 
fundo - cor : { { seção. configurações . cor_da_seção } }
 } 
. seção de depoimento . quoteSliderText , . seção de depoimento . seçãoHeader > h1 , . seção de depoimento . seçãoHeader > h2 {
 cor : { { seção. configurações . cor do texto } }
 } 
. quoteIcon svg {
 preencher : { { seção. configurações . cor do texto } }
 }
 . citaçõesSlide . slide -- ativo { 
borda : var ( -testimonial - border - width ) solid var ( -testimonial - border - color ) ;
 border - radius : var ( -testimonial - border - radius )
 } 
{ %- estilo final -% }
 < div
 class = "largura da página"
 style = "padding-top: {{ section.settings.padding_top | append: 'px' }} ; padding-bottom: {{section.settings.padding_bottom | append: 'px' }} "
 >
 < div class = "seçãoHeader" > 
{ % se seção. configurações . título % }
 < estilo h1 = "margem superior: 0; margem inferior: 0" > { { seção. configurações . título | escapar } } </ h1 > 
{ %- fim se % }
 { % se seção. configurações . descrição -% } 
< estilo h2 = "margem: 0; alinhamento de texto: centro" > { { seção. configurações . descrição } } </ h2 >
 { %- fim se % }
 </div> _ _ 
{ % se seção. blocos . tamanho > 0 % }
 < depoimento - controle deslizante
 class = "quotesWrapper" 
style = "--testimonial-border-width: {{ section.settings.border_width | append: 'px' }} ; --testimonial-border-color: {{section.settings.border_color}} ; --testimonial-border -radius: {{section.settings.border_radius | append: 'px'}} "
 >
 < div class = "quotesSliderWrapper slider__slide" >
 < ul class = "quotesSlider" dados - controle deslizante > 
{ % para bloco na seção. blocos % }
 < li
 class = "quotesSlide slideCol {% if section.blocks.size == 1 %} quotes-slide--single {% endif %} {% if forloop.first %} slide--active {% endif %} "
 dados - controle deslizante - item 
aria - labelledby = "slide {{ block.id }} "
 { { bloquear. shopify_atributos } }
 >
 < blockquote class = "quoteSliderText" > 
{ % se bloco. configurações . citação ! = em branco % }
 < div class = "rte" >
 < span class = "quoteIcon" >
 < svg 
aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-citação"
 viewBox = "0 0 41 35"
 > 
< caminho d = "M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766zm24.49 80h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40,83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766z" />
 </svg> _
 { % se bloco. configurações . verificar_comment != em branco % } 
<a href = "{{block.settings.verify_comment}}" target = "_blank" > _ {{block.settings.verify_comment}} _ _ _
 { { - bloquear. configurações . verificar_comment_text - } }
 </a> _
 { %- fim se % } 
</span> _
 { { bloquear. configurações . citar } }
 </div> _ _
 { % fim se % } 
< div class = "authorWrapper" style = "justify-content: {{block.settings.author_position }} " >
 { % se bloco. configurações . imagem_do_autor ! = em branco % }
 < imagem 
src = " {{block.settings.author_image | img_url: " pequeno " }} "
 alt = " {{block.settings.author_image.alt}} "
 style = "posição do objeto: {{block.settings.image_position}} "
 largura = "70"
 altura = "70"
 > 
{ % fim se % }
 { % se bloco. configurações . título ! = em branco % }
 <citar> _ 
{ { bloquear. configurações . título | escapar | prefixar : '- ' } }
 { % se bloco. configurações . data % } 
< span class = "commentDate" > { { bloco. configurações . data } } </ span >
 { % fim se % }
 </ citar > 
{ % fim se % }
 </div> _ _
 </blockquote> _
 </ li >
 { % fim para % }
 </ul> _
 </div> _ _ 
{ % se seção. blocos . tamanho > 3 % }
 < ul class = "slickDots" dados - contador - contêiner >
 { %- para bloco na seção. blocos -% } 
< li
 { % se forloop. primeiro % }
 classe = "slide__link--ativo"
 { % fim se % }
 dados - contador = " {{forloop.index0}} "
 > 
< span aria - label = "slide número {{forloop.index }} " class = " {{section.settings.dot_design}} " </ span >
 </ li >
 { %- fim para -% }
 </ul> _ 
{ % fim se % }
 </ depoimento - controle deslizante >
 { % fim se % }
 </div> _ _
 { % esquema % }
 {
 "nome" : "Depoimentos" , 
"class" : "seção de depoimento" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "rótulo" : "Título" ,
 "default" : "Depoimentos" 
} ,
 {
 "type" : "richtext" ,
 "id" : "descrição" ,
 "rótulo" : "Texto" ,
 "default" : "<p>Diga por que os clientes devem comprar em sua loja.</p>"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "texto_swipeável" ,
 "rótulo" : "Texto" ,
 "default" : "Conteúdo deslizável"
 } ,
 {
 "tipo" : "cor" , 
"id" : "border_color" ,
 "label" : "Borda e cor ativa" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "não_ativo" , 
"label" : "Nenhuma cor ativa" ,
 "padrão" : "#000"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "largura_fronteira" ,
 "min" : 0 , 
"máximo" : 20 ,
 " passo 1 ,
 "unidade" : "px" ,
 "padrão" : 2 ,
 "label" : "Largura da borda ativa"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "border_radius" ,
 "min" : 0 ,
 "máximo" : 20 ,
 " passo 1 ,
 "unidade" : "px" , 
"padrão" : 0 ,
 "label" : "Raio da borda ativa"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "seção_cor" ,
 "label" : "Cor de fundo da seção"
 } , 
{
 "tipo" : "cor" ,
 "id" : "text_color" ,
 "label" : "Cor do texto da seção"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "ponto_design" , 
"label" : "Design de ponto" ,
 "default" : "arredondamento" ,
 "opções" : [
 {
 "valor" : "canto arredondado" ,
 "label" : "canto redondo"
 } ,
 { 
"value" : "no-round-corner" ,
 "label" : "canto quadrado"
 } ,
 {
 "valor" : "redondo" ,
 "rótulo" : "redondo"
 }
 ]
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 99 ,
 " passo 1 ,
 "unidade" : "%" , 
"padrão" : 0 ,
 "label" : "Preenchimento da seção superior"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 , 
"máximo" : 99 ,
 " passo 1 ,
 "unidade" : "%" ,
 "padrão" : 0 ,
 "label" : "Preenchimento da seção inferior"
 }
 ] , 
"blocos" : [
 {
 "tipo" : "citação" ,
 "nome" : "Depoimento" ,
 "configurações" : [
 {
 "tipo" : "url" , 
"id" : "verify_comment" ,
 "label" : "Verificar link do comentário"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "verify_comment_text" ,
 "label" : "Verificar etiqueta do comentário" 
} ,
 {
 "type" : "richtext" ,
 "id" : "citação" ,
 "rótulo" : "Texto" ,
 "default" : "<p>Adicione avaliações e depoimentos de clientes para mostrar os clientes satisfeitos da sua loja.</p>"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "título" ,
 "rótulo" : "Autor" ,
 "default" : "Nome do autor"
 } ,
 {
 "tipo" : "texto" , 
"id" : "data" ,
 "label" : "Data em que o comentário foi criado"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "posição_autor" ,
 "label" : "Posição de informações do autor" , 
"padrão" : "centro" ,
 "opções" : [
 {
 "valor" : "centro" ,
 "rótulo" : "centro"
 } ,
 {
 "valor" : "início flexível" , 
"rótulo" : "esquerda"
 } ,
 {
 "valor" : "flex-end" ,
 "rótulo" : "certo"
 }
 ]
 } ,
 {
 "type" : "image_picker" , 
"id" : "autor_imagem" ,
 "label" : "Imagem do autor"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "posição_imagem" ,
 "label" : "Posição de ajuste do objeto de imagem" , 
"padrão" : "superior" ,
 "opções" : [
 {
 "valor" : "topo" ,
 "rótulo" : "topo"
 } ,
 {
 "valor" : "centro" , 
"rótulo" : "centro"
 } ,
 {
 "valor" : "inferior" ,
 "rótulo" : "inferior"
 } ,
 {
 "valor" : "esquerda" , 
"rótulo" : "esquerda"
 } ,
 {
 "valor" : "certo" ,
 "rótulo" : "certo"
 } ,
 {
 "valor" : "desativar" , 
"rótulo" : "desativado"
 }
 ]
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "nome" : "Depoimentos" ,
 "categoria" : "Texto" , 
"blocos" : [
 {
 "tipo" : "citação"
 } ,
 {
 "tipo" : "citação"
 } ,
 {
 "tipo" : "citação"
 }
 ]
 }
 ] 
}
 { % termina o esquema % }

3. Em seguida, abra a pasta Asset, encontre global.js ou theme.js. Em seguida, adicione o código abaixo.

 classe TestimonialSlider estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . t = isso . querySelector ( ".botões deslizantes" ) ;
 esse . eu = isso . querySelector ( "[controle deslizante de dados]" ) ; 
esse . h = isso . querySelectorAll ( "[data-slider-item]" ) ;
 esse . eu = Matriz. from ( this.querySelectorAll ( "[contador de dados] " ) ) ; 
esse . eu . forEach ( ( t ) => t.addEventListener ( "clique" , isto.o.ligar ( este ) ) ) ) ; 
const t = novo ResizeObserver ( ( t ) => this . u ( ) ) ;
 t. observe ( este.i ) ; _ 
esse . eu . addEventListener ( " rolar " , isto.u.ligar ( este ) ) ;
 }
 você ( ) { 
esse . m = isso . h [ 1 ] . offsetLeft - este . h [ 0 ] . deslocamentoEsquerda ; 
esse . páginaatual = Math. round ( this.i.scrollLeft / this.m ) + 1 ; _ _ _ 
if ( este . h . comprimento > 3 ) isto . v ( this.currentPage - 1 ) ; _
 }
 atualizar ( t ) { 
esse . v ( t ) ;
 esse . k = t * isto . h [ 0 ] . largura do cliente ; 
esse . eu . scrollTo ( { esquerda : este.k } ) ;
 }
 o ( t ) {
 const i = t. atualTarget . conjunto de dados . T ; 
esse . passo = eu ;
 esse . atualizar ( esta etapa ) ;
 }
 v ( t ) {
 esse . eu . forEach ( ( t ) => { 
t. lista de classes . remover ( "slide__link--ativo" ) ;
 t. removeAttribute ( "aria-atual" ) ;
 } ) ; 
esse . eu [ t ] . lista de classes . adicionar ( "slide__link--ativo" ) ;
 esse . eu [ t ] . setAttribute ( "aria-current" , true ) ; 
esse . h . forEach ( ( t ) => {
 t. lista de classes . remover ( "slide--ativo" ) ;
 t. removeAttribute ( "aria-atual" ) ;
 } ) ; 
esse . h [ t ] . lista de classes . add ( "slide--ativo" ) ;
 esse . h [ t ] . setAttribute ( "aria-current" , true ) ;
 }
 } 
elementos personalizados. define ( "testimonial-slider" , TestimonialSlider ) ;