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

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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