Compatibilidade: Compatível com qualquer versão do Dawn e qualquer Temas GRATUITOS do Shopify 2.0 .
No mundo visualmente orientado do varejo on-line, a apresentação é tudo. Para proprietários de lojas do Shopify que usam o tema Dawn, as amostras de cores oferecem uma maneira dinâmica de mostrar variações de produtos. Este blog irá guiá-lo na adição de amostras de cores Dawn à sua loja, aprimorando as páginas de produtos e coleções com uma exibição mais interativa e visualmente atraente.
Por que usar amostras de cores no Shopify Dawn? As amostras de cores convertem o menu suspenso tradicional para variantes de produtos em um formato mais atraente visualmente e fácil de usar. Isso não apenas melhora a experiência do usuário, mas também fornece uma visão mais clara das opções de produtos disponíveis.
Benefícios de adicionar amostras de cores:
- Apelo visual aprimorado : fornece uma maneira mais atraente e envolvente de exibir variantes.
- Experiência do usuário aprimorada : torna mais fácil para os clientes visualizar e selecionar opções de produtos.
- Melhor exibição do produto nas páginas da coleção : mostra aos clientes em potencial a variedade de opções disponíveis diretamente na página da coleção.
Você pode conferir a loja de demonstração aqui . Senha: made4uo
O que você está comprando:
- Uma amostra com instruções de opções para alterar o estilo. Por favor, certifique-se de ler {% comment %} no código
- Capaz de usar com seletor de variantes select ou radios
- Capaz de adicionar amostras aos cartões de coleção
- Certifique-se de atribuir a opção de cor como primeira opção para que isso funcione
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. Acesse Loja Online > Temas > Ações > Editar Código.
Se você tiver o arquivo product-variant-picker.liquid na pasta Snippet, siga as instruções abaixo:
2. Vá para a pasta Snippet e abra o arquivo “product-variant-picker.liquid”. Substitua o código pelo código abaixo.
NOTA: Por favor, veja os nomes das opções no código, se o nome da sua opção para cor não for "Cor", "Estilo" ou "Cor", adicione o nome com uma vírgula no meio do código. É sensível a maiúsculas e minúsculas. Você também pode alterar o tamanho da amostra alterando a variável swatchSize.
Se você NÃO tiver o arquivo product-variant-picker.liquid na pasta Snippet, siga as instruções abaixo:
2. Abra o arquivo main-product.liquid na pasta Section e encontre o código abaixo.
3. Precisamos substituir o código entre o código da Etapa 2 e o código abaixo, pelo código da Etapa 4.
NOTA: Se você tiver um nome "Cor" diferente de "Cor", "Estilo" ou "Cor", será necessário alterar o nome_da_opção. É sensível a maiúsculas e minúsculas. Você também pode alterar o tamanho da amostra alterando a variável swatchSize.
Retome as instruções aqui dependendo da versão do tema que você possui.
1. Mostrar fotos da cor da variante não será suficiente, temos que fornecer o nome da variante de cor que estão escolhendo. Portanto, precisamos do script abaixo. Vá para global.js na pasta Asset e adicione o código abaixo.
Se você quiser mostrar a amostra em um cartão de produto, prossiga com as etapas a seguir.
1. Abra o card-product.liquid na pasta Snippet. Em seguida, encontre as "informações do cartão". Existem dois deles, certifique-se de que seja o primeiro . Cole o código abaixo antes das "informações do cartão. Clique em Enter para iniciar uma nova linha. Veja a imagem abaixo para posicionamento.
Nota: O tema Dawn tem muitas edições, algumas versões antigas do Dawn eles chamam o produto usando "product_card", a versão mais recente, que uso neste tutorial, usa "card_product".
Dependendo da sua versão do Dawn, você deve alterar parte do código na Etapa 6. Para ver se você tem product_card ou card_product, você pode verificar em card_product.liquid. Veja a imagem abaixo.
Se você não possui card_product, você pode alterar o código simplesmente clicando em Ctrl + F, encontrar "card_product" e alterá-lo para product_card.
É isso (",)
Copied!
2 comentários
Hi @Jun Hwang,
Thank you for the purchase. We cannot replicate the issue. We also check the view in apple device. Please contact us using the “Chat with us” for faster reply.
Hi,
I just bought the variant image code and it works perfect.
The only problem I’m having right now is that mobile and small screen is ok but when the screen expands or view from desktop, the image height decreases and I’m seeing an white spaces top and bottom of the image variant.
Can you please let me know what could possibly trigger this error
Thank you,