Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11
Ao abrir uma loja de comércio eletrônico, é importante fornecer aos seus clientes uma página de produto clara e abrangente que mostre todas as variantes disponíveis. No entanto, às vezes um único produto pode ter múltiplas variantes que diferem em cor, design ou outros recursos. Você pode separar facilmente cada variante por seu recurso específico usando o código abaixo.
Se não quiser separar as variantes por cor ou por qualquer recurso específico, você pode usar a coleção de variantes de produto para todas as variantes .
Para implementar a imagem secundária, podemos modificar o código líquido da sua loja para incluir a imagem secundária na marcação HTML do produto. Isso pode ser feito usando uma instrução condicional que verifica se a variante possui uma imagem secundária definida em seu metacampo. Nesse caso, o código irá gerar um elemento HTML que exibe a imagem ao passar o mouse.
Usamos o seguinte metacampo de variante abaixo para mostrar uma imagem de variante secundária.
Além disso, você pode conferir nossa loja de demonstração, que mostra esse recurso em ação. Para acessar nossa loja de demonstração , use a senha 'made4uo'.
O que você está comprando:
- Uma coleção de produtos, mostrará variantes de produtos com cor ou tipo (dependendo de qual opção você deseja mostrar)
- Mostrará a primeira opção da segunda variante, por exemplo, S para opção de tamanho
- Você precisará fornecer imagens em destaque para as variantes
- Use a imagem variante do metacampo para fornecer a imagem instantânea
- Atribua qual opção você deseja separar usando o editor de temas
- Ocultar todos os títulos das variantes ou mostrar apenas o título colorido
- Opção para ocultar as variantes "esgotadas" e não os produtos
- Os filtros funcionam apenas com produtos, portanto NÃO filtrarão por variante
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. Na sua página de administração, clique em Loja Online > Temas > Ações > Editar código
2. Na pasta Section, crie uma seção, nomeie-a como collection-variant-color .
3. Substitua o código padrão pelo código abaixo
4. 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. 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 “collection-variant color”.
5. Precisamos fazer um trecho de código. Vá para a pasta Snippet, crie um novo snippet, nomeie-o variante-card .
6. Cole o código abaixo no snippet recém-criado. Certifique-se de SALVAR.
7. Certifique-se de personalizar o tema. Fornecemos mais opções para atender às suas necessidades.
É isso (",)
Copied!
4 comentários
Hi SHAYLA,
We updated the product into version 12.Please, check it again. Thanks!
Will this be updated for Dawn v12.0?
Hi,
We can do the installation for you with no extra cost. Just message us using “Chat with us” before purchasing.
can someone reach out about help us install this as well?