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
Please contact us using “Chat with us” for prompt solution.
I can’t copy a code. There is no button to copy. It is like picture, uncopiable
This is a really neat feature, but is there a way to activate the list counter at the bottom? The one that looks like < 1/50 >? Nothing happens when I click the < or > symbols, and there’s no way to adjust the 1/50 value. Thanks!
Hi Dheeraj,
If you are using this code in particular, you shouldn’t have any problem on having multiple sliders since the code is embed to the theme.
thank you for sharing the code. Appreciate you helping us.
I too implemented this code and it will works well for one collection-slider. But i have added 2 more collection-slider on to the home page and both have one common issue. Only 2 products are showing on screen. i tried removing and adding again or changing the collection but still only 2 products are show. Could you please advise what modification is required. thank you.