![Shopify Ajax Cart Drawer for Shopify [No APP or external library]](http://made4uo.com/cdn/shop/articles/CART_DRAWER.jpg?v=1649727641&width=533)
Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 12
No mundo do comércio eletrônico, todas as oportunidades de aumentar suas vendas e receitas contam. Se você é um desenvolvedor web do Shopify e deseja ajudar os lojistas a maximizar seus lucros, você está no lugar certo. Hoje, estamos mergulhando na poderosa estratégia de upsell de produtos diretamente na página do carrinho ou na gaveta do carrinho. Descubra como essa técnica pode transformar a maneira como seus clientes fazem negócios e levar seu sucesso a novos patamares.
A arte de fazer upsell no carrinho: Imagine isto: um cliente já adicionou um produto ao carrinho. Eles estão prestes a fazer uma compra. Agora, e se você pudesse sugerir itens complementares ou atualizados ali mesmo na página do carrinho ou na gaveta? É aqui que a magia do upsell entra em ação.
Por que o upsell é importante: o upsell não consiste apenas em aumentar o valor médio do pedido; trata-se de fornecer valor aos clientes. Ao sugerir produtos ou atualizações relevantes durante o processo de finalização da compra, você aprimora a experiência do cliente e o ajuda a descobrir itens que podem ter esquecido. Isso resulta em taxas de conversão mais altas e clientes mais satisfeitos.
O poder do upsell da página do carrinho e da gaveta do carrinho: nossa solução de ponta capacita os proprietários de lojas do Shopify a aproveitar todo o potencial de upsell. Seja exibindo produtos relacionados, oferecendo descontos em pacotes ou destacando alternativas premium, nosso código se integra perfeitamente à página do carrinho e à gaveta para uma experiência de compra sem atritos.
Veja a loja de demonstração aqui para Dawn versão 5 e abaixo. Veja a demonstração com a gaveta do carrinho aqui . A senha para ambas as demonstrações é made4uo.
O código pode não funcionar para a gaveta do carrinho na versão inferior do Dawn, pois eles não são estáveis.
NOTA: Para fins de fácil utilização, a coleção apresentará apenas 5 produtos. Na minha opinião, o cliente se concentra mais nos produtos a seguir se você lhes der opções limitadas, que não são tão esmagadoras.
Consulte a seção Você também pode gostar (UPSELL) na imagem abaixo
O que você está comprando :
- Adicione uma coleção de produtos que você deseja recomendar na página do carrinho ou na gaveta do carrinho
- Escolha entre a página do carrinho ou a gaveta do carrinho para mostrar este upsell
- Recomendamos adicionar produtos que não tenham seleção múltipla de variantes.
- Se o produto tiver diversas variantes, a primeira variante será adicionada.
- Botão adicionar ao carrinho de fácil acesso
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 Snippet, crie um snippet e nomeie-o como upsell-products
3. Abra o arquivo recém-criado e cole o código abaixo
4. Encontre a pasta Ativos e abra global.js.
5. Cole o código abaixo na parte inferior do arquivo.
6. Acesse o arquivo cart.js ainda na pasta Asset, e adicione o código abaixo, após a linha de código "updateQuantity(line, amount, name) {"
Veja a imagem abaixo para posicionamento do código:
7. Em seguida, precisamos adicionar as configurações de Upsell do carrinho. Vá para a pasta Config e abra settings_schema.json. Antes do último "]", cole o código abaixo.
8. Pule esta etapa se você tiver Dawn versão 5 e inferior, pois a versão não possui gaveta de carrinho ou se você não deseja mostrar o upsell na página do carrinho e sim na gaveta do carrinho. Precisamos adicionar os Snippets à gaveta do carrinho. Vá para a pasta Snippet e abra cart-drawer.liquid. Encontre o <div id="CartDrawer-Overlay"class="cart-drawer__overlay"></div>. Após o código, cole o código abaixo.
Veja a imagem abaixo para posicionamento do código:
9. Precisamos adicionar o upsell ao arquivo main-cart-items.liquid na pasta Section. Encontre a tag de fechamento </cart-items> e, antes dela, adicione o código abaixo.
Veja a imagem abaixo para posicionamento do código:
10. Certifique-se de SALVAR todos os arquivos. Tudo que você precisa fazer é personalizar as configurações do tema. Procure Cart Upsell , ao clicar no ícone de engrenagem .
Copied!
3 comentários
Password for demo store provided are made4uo
Is there a password for the demo store?
Good