Featured Collection Product Image slider for Shopify Dawn theme with Option

Controle deslizante de imagem do produto da coleção em destaque para o tema Shopify Dawn com opção

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

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: temas GRATUITOS do Dawn 2.0 para Shopify 2.0

Criei uma Coleção com números e pontos (veja versão aqui ). Desta vez, adicionei uma opção de controle deslizante clicável. Por favor, veja a caixa de seleção na seção de configuração e verifique a versão correspondente.

NOTA: O botão de visualização rápida na demonstração é um código separado. Verifique este link para o botão de visualização rápida.

Confira a loja DEMO aqui 💻 . Senha: made4uo

Tenho uma caixa de seleção disponível no editor de temas para converter o código para uma versão mais recente ou mais antiga do Shopify Dawn Theme.

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 "Controle deslizante de coleção" e substitua o código padrão pelo código abaixo.

Buy product to view code!

T0JBScOhAgrh&jlQsO+?M/&ywSn6SIhY5Zg8Sr=QEoyx#mdCh$//+mGsvV6v+AufP9W29?ByK8ET=G8AInjcyI+8=PG&wXTJu&/ja7PCRijQaJA9Dxfb$yd4LRMAZJUEqojPe4FS%pDXNIiduYiqYCFV5/y+

3. Em seguida, precisamos adicionar um pouco de beleza a ele. Abra a pasta Ativos e “crie um novo ativo”. Nomeie-o como "controle deslizante de coleção". Então coloque o código abaixo.

Buy product to view code!

6N/j@A=L3W/TFokBbAW4Fw#HzwqXD=1KEO&tRB7NNQ/dNTf-6r93=Bzye&HNe?jwRdhnzoAfsiptH6EYrHJj-DivGtr9-IEMu8ckgs#-70&Jaxq6AUPxwA@=P?LaIp2H?b9+FRchr=sCsmMx/CGlUge1AHvbINZ

4. A última coisa a fazer é adicionar o cérebro em nossa seção. Ainda na pasta Asset, abra o global.js e adicione o código abaixo.

Buy product to view code!

fiyNE-VN&&QQ-&izV%vIhHll+sn0K7Upk@mm$apqfXxDGEQU

É isso. Aproveitar (",)

Copied!
Voltar para o blogue

Deixe um comentário