Compatibilidade: apenas temas GRATUITOS do Shopify 2.0
Procurando uma maneira de exibir seus produtos em destaque na página inicial do seu site? Um controle deslizante de coleção de produtos pode ser uma ótima solução! Com este código simples e personalizável, você pode criar facilmente um controle deslizante elegante e responsivo que destaca seus principais produtos de uma forma atraente.
Esteja você procurando promover produtos específicos, vendas ou apenas exibir seus mais vendidos, um controle deslizante de coleção de produtos pode ajudar a chamar a atenção para suas principais ofertas. Confira nosso guia passo a passo e comece a personalizar o controle deslizante de sua coleção de produtos hoje mesmo!
No entanto, é importante observar que este código pode não funcionar com o tema Dawn atualizado no Shopify. Nesse caso, recomendamos verificar nosso controle deslizante atualizado da coleção de produtos .
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 "controle deslizante de coleção"
3. Na nova seção, cole o código abaixo e clique em SALVAR
4. Vá para a pasta Asset, crie um novo arquivo, nomeie-o como "collection-slider"
5. Abra a pasta CSS recém-criada e cole o código abaixo e clique em SALVAR
6. Precisamos ir para a pasta Asset novamente. Abra o arquivo global.js e encontre o componente deslizante. No construtor, vamos adicionar este código abaixo
7. Na seção initPages, substitua this.totalPages pelo código abaixo
8. Na seção update(), substitua this.currentPage pelo código abaixo
Seu código em global.js deve ser semelhante ao abaixo
Atualizado em 19/10/21: Para problemas com a imagem tem uma altura diferente daquelas.
Atualizado em 12/11/21: Adicionado um intervalo de limite de produto.
Atualizado em 24/11/21: Adicionado um botão mostrar tudo. Consulte as configurações da seção para clicar no botão mostrar tudo.
Atualizado em 22/05/23: Funciona com todas as versões dos temas GRATUITOS do Shopify
É isso (",). Deixe-me saber se você tiver dúvidas
Copied!
10 comentários
The Counter below the slider starting from 4 can you do No. of slides starting from 1 instead of no. of products starting from 4.
Can you please change the count number? It starts from 4, but it should be 1, and it should count pages, not products. I mean I prefer that way. Can you make the change please ?
Here I found bug please solve the number next and prev not proper
First slider’s image has more height than other sliders. Please help