Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Shopify 3.0.
Crie uma apresentação de slides sem necessidade de aplicativo, assinatura e experiência em codificação.
Eu sei que a maioria dos temas do Shopify tem uma espécie de apresentação de slides, mas não estamos criando apenas uma espécie de apresentação de slides. A apresentação de slides tem um total de 11 estilos diferentes que você pode aplicar (não contei o design 2, pois é apenas o oposto do design 1). Está tendo problemas com imagens muito claras ou muito escuras? Eu adicionei filtros. Eu recomendo brincar com os filtros.
Além disso, adicionei um vídeo que você pode enviar do seu disco rígido ou do YouTube.
Isso funciona com o tema Debut e Dawn com certeza, mas como escrevi o código com nomes de classe exclusivos e com código rígido (o que significa que não pode ser facilmente alterado), isso deve funcionar na maioria dos temas do shopify.
Apenas para informar, componentes complexos vêm com códigos longos. Tentei encurtar o código o máximo que pude.
Confira a loja DEMO aqui 💻 . Senha: made4uo
NOTA: Lembre-se de usar imagens de paisagem tanto quanto possível ou usar os designs 1 e 2 para imagens de retrato para evitar que as imagens sejam cortadas. As imagens devem ter os mesmos tamanhos possíveis.
O que você está comprando:
- 11 designs de slides diferentes
- Adicionados filtros para facilitar o ajuste das imagens
- Use vídeos no slide
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 sua loja online > Temas > Ações > Editar código
2. Vá para a pasta Seção e crie uma seção, vamos chamá-la de "apresentação de slides personalizada"
3. Na nova seção, cole o código abaixo e clique em SALVAR
Observe que cada design tem uma duração de animação diferente (veja as informações abaixo).
Requisito de duração da animação
.design1: 1s;
.design2: 1s;
.design3: 2s;
.design4: 3s;
.design5: 3s;
.design6: 3s;
.design7: 3s;
.design8: 1s;
.design9: 1s;
.design10: 4s;
.design11: 3s;
.design12: depende da velocidade de reprodução automática
6. Por último, na pasta Asset, abra global.js ou pode ser theme.js para outros temas. Se você estiver usando um arquivo javascript minificado, cole-o no min.js que você está usando. Em seguida, cole o código abaixo.
Atualização 20/10/21: Fiz algumas alterações no código para que os botões apareçam com design minimalista. (veja a imagem abaixo como é)
Atualização 06/11/21: adicionei uma opção de largura total (no editor de tema personalizado, clique em "Apresentação de slides personalizada" à sua esquerda. Você deve ter as configurações de largura total e intervalo lá. (veja a imagem abaixo ).Eu também fixo os pontos, então quando você clica neles, o índice passa para os botões e se torna o ponto atual.
ATUALIZAÇÃO 12/02/22: Fiz algumas atualizações importantes para ter várias apresentações de slides na mesma página. Tenho as opções de cores disponíveis no editor de temas. Você também pode ter a opção de ocultar os controles. Tornou-o compatível com dispositivos móveis.
Deixe-me saber se você tem perguntas. Aproveitar! (",)
Copied!
27 comentários
I purchased this code and Made4uo generously helped troubleshoot minor issues with my particular theme selection. It works perfectly now. I am very pleased and highly recommend this product and the service that Made4uo provides.
Hi @James,
Thank you for making this website better. I did place instructions on how to see the code. If in the future you have a problem, I am just a button away. Please chat with me using “Chat with us.”
OK – so for all the other frustrated customers… You need to create an account using the same email as you did for the purchase and then you will gain access.
I have just purchased this package, but you give absolutely zero instruction on how to access the code! Really frustrating. And by the sounds of it I’m not the only one…
Just purchased but not getting access to the code. What should I do now?