Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11
Devido à atualização recente no tema Dawn, a versão 7.0 do Dawn terá um código muito diferente. Veja o comentário abaixo.
Você tem apenas alguns produtos, mas cada produto tem múltiplas variantes? Exiba seu produto em uma coleção, mas em sua variante. Mostre variantes nas páginas da coleção como produtos separados.
Exibiremos variantes como produtos nas páginas da coleção com uma imagem secundária ao passar o mouse. A variante permite apenas uma imagem atualmente, certo? Podemos adicionar mais imagens usando metacampo.
Isso mostrará todas as variantes do produto. Se você quiser usar apenas cores , consulte este código.
Observação: se o seu produto não tiver uma imagem de variante, ele será exibido como um único produto. Portanto, certifique-se de atribuir uma imagem às suas variantes.
Usei o seguinte metacampo variante abaixo. NOTA: Certifique-se de editar o Namespace e a chave para que correspondam abaixo.
Temos que adicionar metacampo à nossa variante. Em seguida, configure nosso metacampo em nossa variante de produto. Por favor, veja o vídeo para mais informações.
O que você está comprando:
- Uma coleção de produtos, mostrará TODAS as variantes de produtos
- O filtro funciona filtrando o produto e NÃO por variantes
- Você precisará fornecer imagens em destaque para as variantes
- Use a imagem variante do metacampo para fornecer a imagem instantânea
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 Admin store > Loja Online > Temas > Ações > Editar código.
2. Vá para a pasta Seção e clique em "adicionar uma nova seção", nomeie-a como "coleção de variantes".
3. Se você deseja atribuir este modelo de coleção como padrão, siga o vídeo.
Caso contrário, precisamos criar um novo modelo de coleção. (Acompanhe o vídeo sobre como). Abra e copie o código em "collection.json" na pasta Template. Em seguida, cole o código no modelo recém-criado.
Dentro do modelo recém-criado, encontre este código “main-collection-product-grid” e substitua pelo nome “variant-collection”.
4. Em seguida, precisamos criar um cartão variante. Abra a pasta Snippet e clique em “Adicionar um novo snippet”. Chame-o de “cartão variante”. Se você possui o Dawn versão 6.0 abaixo, use o código abaixo; caso contrário, use o próximo código.
Para Dawn 6.0 abaixo
Para Dawn 7.0 e superior
5. Certifique-se de SALVAR
É isso (",)
Copied!
4 comentários
@DHEL DOMINCIL,
At this moment, the filter does not work with this. I have not get a chance to write a specific filter for this but stay tuned.
Cool tutorial! I do have a question:
With the variants showing as individual products on the collection, will the filter(s) for a collection page filter out the specific variants as well?
As an example: If there are several different products that all have a green variant, and customer wants to see only green products, will the filter on the collection page show only those green variants fafter filter?
Hi @Binaebi,
This should work in any Shopify 2.0 FREE themes, since they share the same code, the only difference is the CSS which is not much. Can you message me in “Chat with us” to discuss what gone wrong? Thank you
This did not work with the Studio theme. It broke the collection and won’t show the filters or even the default products. Everything after the collection banner is gone.