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
<estilo> _ { % se configurações. cart_type == "gaveta" % } upsell - contêiner. upsell - carrinho - gaveta { exibição : flexível } carrinho - itens. vendas adicionais - página { Mostrar nenhum ; } { % outro % } . vendas adicionais - página { exibição : flexível ; } { % fim se % } } . gaveta { visibilidade : oculta ; } . carrinho - gaveta. carrinho - itens no cabeçalho { plano de fundo : rgb ( var ( -color - background ) ) ; } #CartDrawer { exibição : flexível ; } . gaveta . ativo . upsell - gaveta__inner { transformar : traduzir ( 0 ) ; } . venda adicional - contêiner { posição : relativa ; exibição : flexível ; flex - direction : coluna ; exibição : flexível ; estouro : automático ; altura : 100 %; largura : 100 %; } . upsell - gaveta__inner { plano de fundo : #fff; preenchimento : 1rem ; largura : 20rem ; estouro : automático ; transformar : traduzir ( 400 % ) ; transição : transform var ( -duration - default ) facilidade ; } . upsell - gaveta__inner h2 { margem superior : 0,6rem ; alinhamento de texto : centro ; } . upsell - gaveta__inner . upsell - produto - contêiner { flex - direction : coluna ; } . venda adicional - item { exibição : flexível ; flex - direction : coluna ; alinhar - itens : centro ; justificar - conteúdo : espaço entre ; alinhamento de texto : centro ; margem inferior : 3rem ; largura : 100 %; } . item do carrinho - link { decoração de texto : nenhuma ; } . produtoImageWrapper { largura : 100 %; preenchimento : 0 2rem 1rem ; } . upsell - contêiner. produto__media - ícone , . upsell - contêiner. produto__media - alternar { Mostrar nenhum ; } . upsell - produto - contêiner { exibição : flexível ; lacuna : 2rem ; } . upsell - produto - preço { tamanho da fonte : 1,5rem ; intensidade da fonte : Negrito ; } botão. venda adicional - btn. botão { preenchimento : 0,5rem 1rem ; min - altura : 3rem ; tamanho da fonte : clamp ( 1,2rem , 1vw , 1,5rem ) ; largura mínima : 10rem ; } . upsell - gaveta__inner. upsell - contêiner ::- webkit - barra de rolagem - polegar { raio da borda : 10px ; -webkit - box - shadow : inserção 0 0 6px rgb ( 0 0 0 / 50 % ) ; } . upsell - gaveta__inner. upsell - contêiner ::- webkit - barra de rolagem { largura : 5px ; } . upsell - gaveta__inner. upsell - container ::- webkit - barra de rolagem - track { raio da borda : 10px ; -webkit - box - shadow : inserção 0 0 6px rgb ( 0 0 0 / 30 % ) ; } . produtoImageWrapper img { largura : 100 %; altura : automático ; } @media screen e ( largura máxima : 749px ) { . carrinho - gaveta. gaveta__interior { largura : 25rem ; } . upsell - gaveta__inner { largura : 12rem ; } } </ estilo > < venda adicional - contêiner class = " {% if section_name %} página de upsell {% else %} upsell-cart-drawer {% endif %} " dados - carrinho - type = " {{ settings.cart_type }} " dados - caminho = " {{ request.path }} " > < div class = "upsell- {{ settings.cart_type }} __inner upsell-container {% unless settings.cart_type == " gaveta " %} largura da página {% endunless %} " > < h2 class = "" > { { configurações. upsell_title } } </ h2 > < div class = "upsell-produto--container" > { %- para produto nas configurações. upsell_collection . limite de produtos : 5 -% } { % atribuir cart_inventory = 0 % } { % para item no carrinho. Unid % } { % se item. id == produto. selecionado_ou_primeira_variável_disponível . eu ia % } { % atribuir cart_inventory = item. quantidade % } { % fim se % } { % fim para % } < div class = "item de upsell" dados - carrinho - inventário = " {{ cart_inventory }} " dados - produto - inventário = " {{ product.selected_or_first_available_variant.inventory_quantity }} " > < a href = " {{ product.url }} " class = "productImageWrapper" > { %- se produto. selecionado_ou_primeira_variável_disponível . destaque_media != nulo -% } { %- atribuir destaque_media = produto. selecionado_ou_primeira_variável_disponível . destaque_media -% } { %- atribuir media_position = 1 -% } { % renderiza 'mídia do produto' , mídia : destaque_media , laço : seção. configurações . ativar_video_looping , variante_image : verdadeiro % } { % outro % } { %- atribuir mídia = produto. mídia | primeiro -% } { %- líquido atribuir media_position = media_position | padrão : 0 | mais : 1 renderizar 'produto-mídia' , mídia : mídia , loop : seção. configurações . enable_video_looping , variante_image : verdadeiro -% } { %- fim se -% } </a> _ <a href = "{{ product.url }} " class = "cartItem-link" > _ {{ product.url }} _ _ _ _ < span class = "cart-item__name h4 break" > { { produto. título } } </ span > </a> _ < span class = "produto de upsell--preço" > { { produto. preço | dinheiro } } </ span > < carrinho - adicionar - dados do botão - upsell = " {{ product.selected_or_first_available_variant.id }} " > < botão class = "botão upsell-btn" { %- a menos que produto. selecionado_ou_primeira_variável_disponível . disponível e produto. selecionado_ou_primeira_variável_disponível . quantidade_inventário > estoque_carrinho -% } desabilitado { % sem fim % } > < span data - adicionar - ao - carrinho - text = "" dados - padrão - text = "Adicionar ao carrinho" > { %- se produto. selecionado_ou_primeira_variável_disponível . disponível -% } ADICIONAR AO CARRINHO { %- outro -% } VENDIDO { %- fim se -% } </span> _ </ botão > </ carrinho - adicionar - botão > </div> _ _ { % fim para % } </div> _ _ </div> _ _ </ upsell - contêiner > |
4. Encontre a pasta Ativos e abra global.js.
5. Cole o código abaixo na parte inferior do arquivo.
classe UpsellContainer estende HTMLElement { construtor ( ) { super ( ) ; esse . addToCarts = isto . querySelectorAll ( 'botão adicionar carrinho' ) ; esse . addToCarts . forEach ( btn => { btn. addEventListener ( 'clique' , isto . renderUpsell . bind ( este ) ) } ) esse . carrinho = documento. querySelector ( 'notificação de carrinho' ) || documento. querySelector ( 'gaveta-carrinho' ) ; esse . carrinhoItems = documento. querySelector ( 'itens do carrinho' ) ; esse . carrinhoDrawerItems = documento. querySelector ( 'itens-gaveta-do-carrinho' ) ; } getSectionsToRender ( ) { seções const = [ { id : 'carrinho-ícone-bolha' , seção : 'carrinho-ícone-bolha' , seletor : '#shopify-section-cart-icon-bubble' , } , ] ; if ( este . conjunto de dados . cartType === "gaveta" ) { Seções. empurrar ( { id : 'CartDrawer' , seção : 'gaveta de carrinho' , seletor : '.drawer__inner' , } ) ; } if ( este . conjunto de dados . caminho === "/ carrinho" ) { Seções. empurrar ( { id : 'itens do carrinho principal' , seção : 'itens do carrinho principal' , seletor : 'itens do carrinho' , } , { id : 'rodapé do carrinho principal' , seção : documento. getElementById ( 'rodapé do carrinho principal' ) . conjunto de dados . eu ia , seletor : '#main-cart-footer .js-contents' , } ) ; } seções de retorno ; } cartListener ( linha , quantidade ) { const corpo = JSON. stringificar ( { linha , quantidade , seções : isto . getSectionsToRender ( ) . mapa ( ( seção ) => seção. seção ) , seções_url : janela. localização . nome do caminho , } ) ; fetch ( `$ { rotas. cart_change_url } ` , { ... fetchConfig ( ) , ... { body } } ) . então ( ( resposta ) => { resposta de retorno . texto ( ) ; } ) . então ( ( estado ) => { const parsedState = JSON. analisar ( estado ) ; if ( parsedState. seções ) { esse . getSectionsToRender ( ) . forEach ( ( seção ) => { const elementoToReplace = documento. querySelector ( seção.seletor ) || documento. getElementById ( seção.id ) ; elementoToReplace. innerHTML = isto . getSectionInnerHTML ( parsedState.seções [ seção.seção ] , seção.seletor ) ; } ) ; if ( este . conjunto de dados . cartType === "gaveta" ) { esse . querySelector ( '.upsell-product--container' ) . innerHTML = isto . getSectionInnerHTML ( parsedState. seções [ 'cart-drawer' ] , '.upsell-product--container' ) ; } } outro { documento. querySelector ( ` #CartDrawer-LineItemError-${line} .cart-item__error-text`).textContent = parsedState.errors; documento. querySelector ( ` #Drawer-quantity-${line}`).value = document.querySelector(`#Drawer-quantity-${line}`).dataset.cartQuantity esse . carrinhoDrawerItems . updateLiveRegions ( linha , parsedState.erros ) ; } } ) } getSectionInnerHTML ( html , seletor ) { retornar novo DOMParser ( ) . parseFromString ( html , 'texto/html' ) . querySelector ( seletor ) . HTML interno ; } renderUpsell ( evt ) { evt. preventDefault ( ) ; deixe formData = { 'id' : `$ { evt. atualTarget . conjunto de dados . venda adicional } ` , 'Quantidade : 1 , 'seções' : isto . getSectionsToRender ( ) . mapa ( ( seção ) => seção. seção ) , 'seções_url' : janela. localização . nome do caminho } ; buscar ( '/cart/add.js' , { método : 'POST' , cabeçalhos : { 'Tipo de conteúdo' : 'aplicativo/json' } , corpo : JSON. stringify ( formData ) } ) . então ( resposta => { resposta de retorno . json ( ) ; } ) . então ( resposta => { esse . getSectionsToRender ( ) . forEach ( ( seção ) => { const elementoToReplace = documento. querySelector ( seção.seletor ) || documento. getElementById ( seção.id ) || nulo ; elementoToReplace. innerHTML = isto . getSectionInnerHTML ( resposta.seções [ seção.seção ] , seção.seletor ) ; } ) ; if ( este . conjunto de dados . cartType === "gaveta" ) { esse . querySelector ( '.upsell-product--container' ) . innerHTML = isto . getSectionInnerHTML ( response. seções [ 'carrinho-gaveta' ] , '.upsell-produto--container' ) ; } if ( document.querySelector ( '#CartDrawer' ) ) { esse . carrinho . lista de classes . contém ( 'está vazio' ) && esse . carrinho . lista de classes . remover ( 'está vazio' ) ; esse . carrinho . querySelector ( '.drawer__inner' ) . lista de classes . contém ( 'está vazio' ) && esse . carrinho . querySelector ( '.drawer__inner' ) . lista de classes . remover ( 'está vazio' ) ; } outro { esse . carrinhoItems . lista de classes . remover ( 'está vazio' ) } } ) . pegar ( ( e ) => { console. erro ( e ) ; } ) } } elementos personalizados. define ( 'upsell-container' , UpsellContainer ) ; class CartAddButton estende HTMLElement { construtor ( ) { super ( ) ; esse . addEventListener ( 'clique' , ( evento ) => { evento. preventDefault ( ) ; const cartItems = this . mais próximo ( 'contêiner de upsell' ) ; carrinhoItems. renderUpsell ( evento ) } ) ; } } elementos personalizados. define ( 'botão adicionar carrinho' , CartAddButton ) ; |
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) {"
| document.querySelector('upsell-container').cartListener(linha, quantidade) |
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.
, { "name" : "Upsell do carrinho" , "configurações" : [ { "tipo" : "texto" , "id" : "upsell_title" , "label" : "Título de upsell" , "default" : "Você também pode gostar" } , { "tipo" : "coleção" , "label" : "Coleção de produtos de upsell" , "id" : "upsell_collection" , "info" : "Apenas no máximo 5 produtos para mostrar" } ] } |
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.
| {% render "upsell-products", section_name: section.id %} |
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.
| {% render "upsell-products", section_name: section.id %} |
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 .
3 comentários
Password for demo store provided are made4uo
Is there a password for the demo store?
Good