Add Quickview Button to Your Shopify Product Card

Adicione o botão Quickview ao seu cartão de produto do Shopify

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: compatível com qualquer tema GRATUITO do Shopify 2.0

Se você administra uma loja Shopify, sabe como é importante oferecer aos seus clientes uma experiência de compra agradável e perfeita. Uma maneira de fazer isso é adicionar um botão de visualização rápida aos cartões de produto.

Um botão de visualização rápida permite que os clientes tenham uma prévia de um produto sem precisar sair da página atual em que estão. Esse recurso pode melhorar significativamente a experiência do usuário em seu site, pois elimina a necessidade dos clientes navegarem para fora de sua localização atual e aguardarem o carregamento de uma nova página.

Ao usar a API de renderização de seção do Shopify, você pode adicionar facilmente um botão de visualização rápida aos cartões de produtos sem precisar instalar nenhuma biblioteca ou aplicativo externo. Isso significa que você pode personalizar a funcionalidade e o design do botão para atender à estética e às necessidades da sua marca.

Com um botão de visualização rápida, os clientes podem visualizar facilmente as informações do produto, adicionar itens ao carrinho e continuar comprando sem interrupção. Ao fornecer esse recurso, você mostra a seus clientes que valoriza seu tempo e deseja tornar sua experiência de compra o mais agradável possível.

É importante notar que, embora alguns dos temas 2.0 gratuitos do Shopify ofereçam um botão de visualização rápida integrado, os recursos podem ser limitados e não totalmente personalizáveis ​​de acordo com suas preferências. Ao usar nosso código, você terá mais controle sobre o design e a funcionalidade do seu botão de visualização rápida.

Não perca a oportunidade de melhorar a experiência do usuário da sua loja. Adicione um botão de visualização rápida aos seus cartões de produtos hoje e observe suas taxas de conversão dispararem.

Confira a loja DEMO aqui 💻 . Senha: made4uo

O que você está comprando:

  • Ocultar e mostrar o botão de visualização rápida ao passar o mouse
  • Compatível com dispositivos móveis com pequeno botão fornecido
  • Navegação anterior e seguinte fornecida para fácil visualização da coleção
  • Controles deslizantes de miniatura disponíveis

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 loja Admin Shopify > Temas > Ações > Editar código

2. Na pasta Seção, crie uma nova seção, nomeie-a como "visualização rápida" e substitua o código padrão pelo código abaixo.


3. Precisamos criar outra seção para nosso modelo. Estamos usando a API de renderização de seção do Shopify. Nomeie esta seção recém-criada como "modelo de visualização rápida". Em seguida, cole o código abaixo.


4. Em seguida, encontre a pasta Asset e crie um novo arquivo CSS. Chame-o de "visualização rápida". Em seguida, abra o arquivo recém-criado e cole o código abaixo.

5. Em seguida, abra o arquivo global.js na mesma pasta, Ativo e adicione o código abaixo.



6. Precisamos chamar essa visualização rápida no cartão do produto. Vá para a pasta Snippet, se você tiver o Dawn Theme versão 2.5 acima, abra o card-product.liquid. Encontre a classe "card-wrapper" e cole o código após a linha.


Para Dawn Theme 2.5 e inferior, siga as mesmas instruções acima, mas cole o código abaixo.


7. Por último, vá para a pasta theme.liquid na parte superior. Em seguida, encontre a {% section 'announcement-bar' %} e cole o código acima dela.

É isso. Você pode personalizar a seção de visualização rápida se acessar o Editor de temas. A Seção deve estar no topo. (",)

Copied!
Voltar para o blogue

Deixe um comentário