Compatibilidade: todos os temas do Shopify (o estilo pode variar)
Carrosséis podem ser uma ferramenta poderosa para exibir produtos em seu site, mas alguns desenvolvedores desencorajam seu uso devido ao risco de os produtos serem esquecidos se forem muito pequenos ou deslizarem constantemente para fora de vista. No entanto, com o código certo, é possível criar um carrossel elegante que amplia os produtos e faz uma pausa quando os clientes passam o mouse sobre eles, criando uma experiência mais envolvente e interativa para os usuários.
Se você estiver procurando um código que não exija nenhuma biblioteca externa, recomendo verificar o código deslizante da coleção de produtos . É uma ótima opção para quem prefere manter seus projetos independentes sem depender de dependências adicionais.
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 "carrossel personalizado" e cole o código abaixo.
{ % Comente % } Ao personalizar o tema, as alterações precisam ser SALVADAS antes que você veja a configuração atualizada. { % comentário final % } { % se seção. configurações . título ! = em branco % } < div class = "seção-cabeçalho texto-centro" > <h3> { { seção . configurações . título | escapar } } < / h3 > < / div > { % fim se % } < tipo de script = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" >< / script > < tipo de script = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" >< / script > < div class = "página carrossel" > { %- atribuir coleção = coleções [ seção. configurações . coleção ] -% } { %- atribuir product_limit = seção. configurações . contagem_produtos -% } < tipo de botão = "botão" class = "carrossel-navi carrossel-navi-esquerda" > < / botão > < div class = "carousel-root" { %- if seção. configurações . bg_color ! = false -% } style = "background: none" { %- endif -% } > { % para produto em coleção. limite de produtos : product_limit % } < div class = "carousel-track" > <a href = "{{produto.url | dentro de: coleção }}" > _ {{ product.url | within: collection }} _ < div class = "revelar" > < img class = "img-explore" src = " {{ product.featured_image | img_url: 'master'}} " > < img class = "hidden" src = " {{ product.images.last |img_url: '450x450'}} " /*passe a última imagem do produto*/ alt = " {{ product.images.last.alt | escape }} " / > < / div > < span class = "detalhes-texto título do produto text-center" > { { produto. título } } < / span > < span class = "detalhes-texto produto-preço text-center" > { { produto. preço | dinheiro } } < / span > < / a > < / div > { % fim para % } < / div > < tipo de botão = "botão" class = "carousel-navi carrossel-navi-right" > < / button > < / div > <estilo> _ HTML { tamanho da fonte : 62,5 % ; altura : 100vh ; } . carrossel - página { posição : relativa ; largura : 100 % ; altura : 50 % ; exibição : flexível ; estouro : automático ; justificar - conteúdo : centro ; } /* contêiner carrossel */ . carrossel - raiz { posição : relativa ; largura : 90 % ; fundo : gradiente linear ( para o canto inferior direito, { { section. settings . bg_linear1 } } , { { section. settings . bg_linear2 } } ) ; tamanho do fundo : capa ; raio da borda : 1rem ; dimensionamento da caixa : caixa de conteúdo ; preenchimento : 0,5rem ; } /* imagem */ . escondido { visibilidade : visível ; cor de fundo : rgb ( 228 , 241 , 254 ) ; /* cor de fundo da imagem ao passar o mouse*/ opacidade : 0 ; ajuste de objeto : contém ; margem : 20 % automática ; transformar : escala ( 1,5 , 1,5 ) ; } . revelar { posição : relativa ; altura : 100 % ; exibição : flexível ; justificar - conteúdo : espaço entre ; estouro : oculto ; } . revelar . escondido { posição : absoluta ; topo : 0 ; transformação - origem : centro ; índice z : 100 ; } . revelar : pairar. escondido { opacidade : 1 ; } . revelar : pairar. img - explorar { topo : 0 margem : 0 automático ; opacidade : 0 ; } /* Detalhes do produto */ . detalhes - texto { exibição : bloco ; cor : { { seção. configurações . detalhes_texto } } ; estouro de texto : reticências ; estouro : oculto ; espaço em branco : nowrap ; } . detalhes - texto : lastchild { margem inferior : 0,5rem ; preenchimento : 0 ; } . produto - título { tamanho da fonte : 2rem ; } . preço do produto { tamanho da fonte : 1,5rem ; } /* navegação em carrossel */ . carrossel - navegação { cursor : ponteiro ; índice z : 100 ; plano de fundo : { { seção. configurações . cor_navi } } ; borda : nenhuma ; raio da borda : 1,5rem ; transição : todos .3s ; margem : 0,5rem ; preenchimento : 30px ; alinhar - self : centro ; } . carrossel - navegação : pairar { filtro : brilho ( 0,85 ) ; /* brilho ao passar o mouse*/ } . carrossel - navegação : ativo { filtro : brilho ( 0,6 ) ; transformar : traduzirY ( .4rem ) ; /* brilho quando clicado*/ } . carrossel - navegação - esquerda { clip - path : polígono ( 100 % 0 % , 75 % 50 % , 100 % 100 % , 25 % 100 % , 0 % 50 % , 25 % 0 % ) ; } . carrossel - navegação - direita { clip - path : polígono ( 75 % 0 % , 100 % 50 % , 75 % 100 % , 0 % 100 % , 25 % 50 % , 0 % 0 % ) ; } @media ( largura máxima : 110em ) { . carrossel - raiz { largura : 85 % ; } @media ( largura máxima : 65em ) { . carrossel - raiz { largura : 75 % ; } } @media ( largura máxima : 48em ) { . carrossel - raiz { largura : 69 % ; } . carrossel - navegação { preenchimento : 20px ; } } < / estilo > <roteiro> _ $ ( ".carousel-root" ) . liso ( { infinito : verdadeiro , reprodução automática : { { seção. configurações . Reprodução automática } } , velocidade de reprodução automática : { { seção. configurações . rotação_automática_velocidade | vezes : 1000 } } , slidesToShow : { { seção. configurações . contagem_produto } } , slidesToScroll : 1 , velocidade : 1500 , pontos : falso , setas : verdadeiro , seta anterior : $ ( ".carousel-navi-left" ) , nextArrow : $ ( ".carousel-navi-right" ) , responsivo : [ { ponto de interrupção : 1020 , configurações : { slidesToShow : 3 , infinito : verdadeiro , } } , { ponto de interrupção : 600 , configurações : { slidesToShow : 2 , } } , { ponto de interrupção : 480 , configurações : { slidesToShow : 1 , } } ] } ) ; < / roteiro > { % esquema % } { "name" : "Controle deslizante de coleção" , "configurações" : [ { "tipo" : "texto" , "id" : "título" , "rótulo" : { "pt" : "Título" } , "padrão" : { "pt" : "Coleção em destaque" } } , { "tipo" : "coleção" , "id" : "coleção" , "rótulo" : "Coleção" } , { "tipo" : "intervalo" , "id" : "contagem_produto" , "min" : 2 , "máximo" : 10 , "label" : "Número de produtos a serem exibidos" , "padrão" : 4 } , { "tipo" : "caixa de seleção" , "id" : "bg_color" , "rótulo" : { "pt" : "Cor de fundo NENHUM" } , "padrão" : falso } , { "tipo" : "cor" , "id" : "bg_linear1" , "label" : "Primeiro gradiente linear da cor de fundo" , "padrão" : "#DAF4F1" } , { "tipo" : "cor" , "id" : "bg_linear2" , "label" : "Segundo gradiente linear da cor de fundo" , "padrão" : "#11999E" } , { "tipo" : "cor" , "id" : "texto_detalhes" , "label" : "Cor dos detalhes do texto" , "default" : "#FFFFFF" } , { "tipo" : "cor" , "id" : "navi_color" , "label" : "Cor de navegação" , "padrão" : "#56D4C5" } , { "tipo" : "caixa de seleção" , "id" : "reprodução automática" , "rótulo" : { "pt" : "Reprodução automática de slides" } , "padrão" : verdadeiro } , { "tipo" : "intervalo" , "id" : "autorotate_speed" , "rótulo" : { "pt" : "Alterar slides a cada" } , "máximo" : 9 , "min" : 1 , "passo 1 , "unidade" : { "pt" : "s" } , "padrão" : 3 } ] , "predefinições" : [ { "categoria" : "Coleção" , "name" : "Controle deslizante de coleção" , "configurações" : { "contagem_produto" : 4 } } ] } { % termina o esquema % } |
3. Clique em SALVAR.
4. Concluído. Tudo que você precisa para personalizar o tema
Nota: Como estamos usando script externo ou código-fonte, o tema deve ser SALVAR antes de ver as alterações ao personalizar o tema.
É isso (",)
1 comentário
Hi this one is okay for dawn theme? Becouse no work correct