Add automatic slider / carousel

Controle deslizante de imagem do produto para o tema Shopify Dawn

Log in or Sign up to ensure access to purchased code across multiple devices.

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: todos os temas do Shopify (o estilo pode variar)

Consegui escrever um controle deslizante/carrossel de reprodução automática usando rolagem. Isso funciona com a maioria dos temas do Shopify (funciona melhor no tema Dawn e Debut).

Neste tutorial, estamos criando um controle deslizante ou carrossel para um cartão ou cartão de produto. Eu forneci uma opção para escolher entre os dois. Também incluí uma opção de reprodução automática, é claro. Você pode escolher de 3 a 7 produtos por slide ou de 3 a 5 cartões por slide.

Também adicionei opções para pontos e contador de números. Sim, os contadores funcionam.

Verifique a loja DEMO aqui💻 . Senha: made4uo

O que você está comprando:

  • Controle deslizante automático para coleta

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

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 universal" e cole o código abaixo.

3. Precisamos do arquivo que contém o javascript. Na pasta de ativos, abra o arquivo “theme.js” ou “global.js” e cole o código abaixo.

É isso. Deixe-me saber se você tem perguntas (",)

Atualizado em 18/03/22: você pode adicionar várias desta seção em uma página.

Copied!
Voltar para o blogue

1 comentário

Thanks for great video. How can I set minimum card number to 1 ?

Tom

Deixe um comentário