Você gostaria de oferecer várias variantes de produto no seu formulário de pedido e fazer com que seus clientes as selecionem usando caixas de seleção? Este artigo explicará como tudo isso funciona.

Exemplo de suplemento alimentar

Um vendedor vende o suplemento alimentar GainMAXX na forma de caixas de comprimidos. Para esse propósito, eles gostariam de oferecer três quantidades diferentes no seu formulário de pedido:

1. GainMAXX – 1 caixa
2. GainMAXX – 3 caixas
3. GainMAXX – 6 caixas

O vendedor, portanto, cria três produtos separados e adiciona a variante de 3 caixas e 6 caixas ao primeiro produto “GainMAXX – 1 caixa” como um complemento.

Não é a solução que você está procurando?

Há muitas maneiras de oferecer vários produtos no seu formulário de pedido. Se este artigo não representa o que você deseja implementar, recomendo que você veja nosso recurso de Order Bump ou tente criar variantes nas configurações do produto na aba “Variantes”.

Configuração básica:

Para cada variante de produto que você oferecer, você deve criar um seu próprio produto e atribuí-lo como um complemento a um de seus produtos.

Para fazer isso, siga os seguintes passos:

Passo 1: Criar produtos

Primeiro de tudo, você deve criar todos os produtos que deseja exibir no seu formulário de pedido como produtos independentes criar.

Como você adiciona os produtos ao seu processo de vendas como complementos depois, os seguintes passos são suficientes:

1. Na visualização Vendedor, vá para Conta > Produtos.
2. Clique em Adicionar produto.
3. Digite um Nome para o produto, por exemplo, [Nome do produto] - [variante] = NutritionMAXX - 1 quilograma.
4. Digite uma Página de vendas.
5. Clique em Salvar.

Repita esses passos para os outros produtos que você deseja exibir no seu formulário de pedido.

Por razões técnicas, você também deve adicionar um plano de pagamento, mas apenas para seu produto principal. Como regra, o produto com o menor preço/quantidade é o mais adequado para ser o produto principal, pois aparece no topo do seu formulário de pedido e, portanto, é o primeiro produto.

Para fazer isso, siga os passos a seguir:

1. Na visualização Vendedor, vá para Conta > Produtos.
2. Clique no ícone E no Produto principal.
3. Vá para a aba Planos de pagamento.
4. Role até o final e clique no ícone E à esquerda do único plano de pagamento que você encontrará.
5. Ajuste o preço do seu produto principal no campo Primeiro pagamento.
6. Clique em Atualizar plano de pagamento existente.

Passo 2: Definir produtos como complemento

Agora mude para o produto que você deseja usar como seu produto principal.

1. Na visualização Vendedor, vá para Conta > Produtos.
2. Clique no ícone E no Produto principal.
3. Vá para a aba Complementos.
4. Selecione a opção Sim - como escolha de botão de rádio a partir do menu suspenso Comprar o produto principal é opcional, se houver complementos presentes.
5. Clique em Salvar.
6. Role até a janela Adicionar complemento e selecione um dos produtos que você deseja exibir no formulário de pedido a partir da lista suspensa Produto.
7. Defina um preço para este complemento no campo Preço.
8. Finalmente, verifique se todas as outras configurações do seu complemento correspondem às suas expectativas na janela “Adicionar complemento”. Se tudo estiver OK, clique em Adicionar complemento.
9. Repita os passos 6-8 para todos os outros produtos que você deseja exibir no formulário de pedido.

Se você agora acessar o formulário de pedido do seu produto principal, poderá escolher livremente entre todos os produtos que você criou.

Dica: Pré-selecione produto(s) com parâmetros GET
Se você gostaria de pré-selecionar um produto diferente com links diferentes, você pode usar parâmetros GET e assim pré-selecionar os produtos desejados através do link. Você pode encontrar mais informações aqui. Nota importante: De acordo com a legislação dos EUA, os complementos não devem ser pré-selecionados. Portanto, eles não são pré-selecionados se o revendedor for DS.us.

Desenhe um formulário de pedido otimizado para conversão

Além da configuração básica, faz sentido adaptar e otimizar seu formulário de pedido para este funil, a fim de gerar mais clientes e receita.

Uma das estruturas mais populares para formulários de pedido em um funil parece assim:

Este formulário de pedido consiste em:

1. Uma imagem de cabeçalho
2. O carrinho de compras
3. Os campos para preencher os dados de contato
4. A lista de métodos de pagamento
5. Informações sobre o período de devolução
6. Uma lista de depoimentos
7. Uma lista de Perguntas Frequentes

Para desenhar tal formulário de pedido, siga os seguintes passos:

Guia

1. Na visualização Vendor, vá para Conta > Formulário de pedido.
2. Clique em Criar formulário de pedido responsivo.
3. Você está agora na visualização de edição do seu formulário de pedido. Você pode desenhar seu formulário de pedido por
   • Adicionando widgets (arrastando e soltando-os do lado esquerdo para a linha desejada),
   • Excluindo widgets (clicando na lixeira no canto superior direito do widget. Se não estiver visível, o widget deve estar presente no formulário de pedido),
   • Movendo widgets (arrastando e soltando-os para a linha desejada),
   • Alterando a largura dos widgets (movendo o controle deslizante no canto inferior direito do widget para a esquerda ou para a direita),
   • Editando widgets (clicando no ícone E no canto superior direito do widget, se estiver disponível).
   Configure a seguinte estrutura usando essas opções de operação:
   
4. Ao lado dos widgets HTML, você encontrará quatro números.
   Preparei um código HTML para você usar como modelo. É importante que você adapte este código ao seu negócio.
   Para usar nosso modelo, adicione o seguinte código aos widgets HTML clicando no ícone E no canto superior direito do widget. Lembre-se de sempre clicar em “Aplicar” após adicionar o código para salvá-lo.
   1. Widget HTML (modelo)
      <div class="box-hl-container"><h1><span>SELEÇÃO DE PRODUTO<a></a></span></h1></div> <div class="box-body contact-body"></div>
      Nota: Certifique-se de copiar todo o código! Role para a direita para ver todo o código.
   2. Widget HTML (modelo)
      <div class="guarantee-box"> <div class="guarantee-title"> 60 dias de período de devolução! </div> <div class="guarantee-text"> <div class="money-back-guarantee"> <img src="https://dltq3zauxm86g.cloudfront.net/images/orderform/guaranty-seals/de/gold-60.png" alt="" /></div> <b>Com esta oferta, você pode testar este produto e devolvê-lo por 60 dias.</b> Se você não estiver satisfeito, você pode sempre devolver seu produto. Para isso, clique no link de ajuda imediata no e-mail de confirmação de pedido e devolva-o você mesmo ou entre em contato comigo em beispiel@beispiel.com ou com o suporte do Digistore24 em support@digistore24.com. <br /><b>Depois de tudo, sua felicidade é a coisa mais importante para mim.</b> </div> <div class="guaranteed-by d-inline-block"> <div class="position-relative"> <b>GARANTIDO POR</b> <img src="https://dltq3zauxm86g.cloudfront.net/images/logo/made_in_germany.png" alt="" /></div> </div> <div class="clearfix"></div> </div>
   3. Widget HTML (modelo)
      <div class="box-hl-container"><h1><span>O QUE NOSSOS CLIENTES DIZEM<a></a></span></h1></div> <div class="box-body contact-body"></div>
   4. Widget HTML (modelo)
      <div class="box-hl-container"><h1>PERGUNTAS FREQUENTES</h1></div><div class="orderform-box-inner box-area-inner with-frame contact-area"><h3><strong data-mce-style="font-size: 14px;">Q: Aqui deve estar uma pergunta típica dos seus clientes.</strong></h3><p><strong data-mce-style="font-size: 14px;">A: </strong>Aqui deve estar a resposta a esta pergunta.</p><p> </p><p><strong>Q: Aqui deve estar uma pergunta típica dos seus clientes.</strong></p><p><strong>A: </strong>Aqui deve estar a resposta a esta pergunta.</p><p> </p><p> </p></div>
5. Clique em Configurações no canto superior esquerdo.
6. Se você quiser usar nosso modelo, cole o seguinte código no campo Código CSS personalizado.
   .money-back-guarantee img { margin-bottom: 70px; width: 80%; } #cart > tbody > tr.row_brutto_total.body.summary.brutto > td.summary_label > div { padding-bottom: 10px; } #order_form > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div > div > div.box-body.contact-body { margin-top: 0rem; } #order_form > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div { background: #f2f9ff; border-top-left-radius: 8px; border-top-right-radius: 8px; } #order_form > div > div:nth-child(5) > div { padding-top: 20px; } #order_form > div > div:nth-child(3) { background: #f2f9ff; } #order_form > div > div:nth-child(5) > div > div { background: #f2f9ff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #order_form > div > div.row.has_one_type_only.page_type_orderform { background: #f2f9ff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #order_form > div > div:nth-child(5) > div > div > div > div.orderform-box-inner.box-area-inner.with-frame.contact-area { padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) div.box-area-container { padding: 0 } .testimonial-area .testimonial-body .testimonial { background: #f2f9ff; margin-bottom: 0; } .html-area .box-hl-container h1 { margin-bottom: 16px } .box-area-inner .box-hl-container h1 { background-color: #3988E3; border-color: #071A2E; color: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; text-transform: uppercase; text-align: center; font-size: 16px; font-weight: bold; padding: 10px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.47); } .unit_price .amount { position: relative; font-size: 18px; font-weight: 700; } #cart tbody tr:first-child { background: #a0cae9; border-bottom: 5px solid #f1f1f1; } #cart tbody tr:nth-child(2) { background: #a4dae6; border-bottom: 5px solid #f1f1f1; color: #fff; } #cart tbody tr:nth-child(3) { background: #afdac0; border-bottom: 5px solid #f1f1f1; color: #fff; } .money-back-guarantee { width: 235px; margin: 60px -10px 0 0; overflow: hidden; border-radius: 5px; float: right; position: relative; right: 0; bottom: 0; } .details h3 { font-size: 20px; } .money-back-guarantee { width: 200px; margin: 0; overflow: hidden; border-radius: 5px; float: right; position: absolute; right: -30px; bottom: -80px; } .guarantee-box a, .guarantee-box a:active, .guarantee-box a:visited { color: #00F; } .guaranteed-by { font-size: 24px; letter-spacing: -1px; padding: 18px 21px; width: 307px; bottom: -15px; left: 0; display: block; } .guaranteed-by .position-relative { position: relative; } .guarantee-box .guaranteed-by b { } .guarantee-box .guaranteed-by img { display: block; width: 100%; margin-left: 0px; } .guarantee-box { border: 3px solid #269de2; border-radius: 9px; background: #f2f9ff; position: relative!important; overflow: hidden; } .guarantee-box .guarantee-title { font-size: 20px; padding: 18px 21px; text-transform: uppercase; text-align: left; letter-spacing: -1px; color: black; } .guarantee-box .guarantee-text { padding: 0 10px 8px 21px; font-size: 14px; line-height: 18px; display: block; } .product-top-l-arrow, .product-top-r-arrow { position: absolute; top: -11px; width: 55px; height: 55px; } table.orderform_table > thead > tr { background: #f2f9ff; border: 0px #ddd solid; border-bottom: none; } .click-button { min-width: 200px; width: 100%; height: auto; padding: 12px; font-weight: 700; box-shadow: 0 0 0px transparent; border: 1px solid #777; } .click-button.long_text { font-size: 20px; } .box-body.html-body { padding: 0px!important; } .header { position: relative; margin-bottom: 10px; } .header .logo { width: 120px; } .header .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } div.box-area-container > div.box-area-inner { margin: 0rem; } div.box-area-container { padding: 0 5px 0 5px; position: relative; } .box-area-inner.with-frame, .box-area-inner.empty { background-color: #f2f9ff; border: 0px solid #cccccc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .box-hl-container { position: relative; overflow: hidden; } .box-hl-container:after { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 0; height: 0; content: ""; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 20px solid #3988E3; } .box-body { margin-top: 1rem; } .box-body.cart-top, .cart-body, .html-body { margin-top: 0rem!important; } .cart-body, .contact-area .box-body, .payment-area .box-body, .guarantee-box { margin-bottom: 20px; } .sub-heading { margin: 0; height: 5px; background: #545356; } table.orderform_table { margin-bottom: 0rem!important; } table.orderform_table tbody { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .products-top { position: relative; font-size: 17px; padding: 0 5px 5px; text-align: center; background: #3c3c3c; color: #fff; letter-spacing: -1px; margin: 0; } .table>tbody>tr>td { border-top: 0px solid transparent; } .row:after, .row:before { width: 0px!important } table.orderform_table td[data-responsive-cell-label]:before { display: none!important; opacity: 0; } table.orderform_table tbody .image { padding: 1rem 0 1rem 0; }
7. Clique em Aplicar.
8. Clique em Salvar.

Preste atenção à nota sobre orientação jurídica.