¿Te gustaría ofrecer varias variantes de producto en tu formulario de pedido y hacer que tus clientes las seleccionen usando casillas de verificación? Este artículo explicará cómo funciona todo esto.
Ejemplo de suplemento alimenticio
Un vendedor vende el suplemento alimenticio GainMAXX en forma de cajas de píldoras. Para este propósito, le gustaría ofrecer tres cantidades diferentes en su formulario de pedido:
- GainMAXX – 1 caja
- GainMAXX – 3 cajas
- GainMAXX – 6 cajas
Por lo tanto, el vendedor crea tres productos separados y agrega la variante de 3 cajas y 6 cajas al primer producto “GainMAXX – 1 caja” como un complemento1>.
¿No es la solución que buscas?
Hay muchas maneras de ofrecer múltiples productos en tu formulario de pedido. Si este artículo no representa lo que quieres implementar, te recomiendo que veas nuestra función de Order Bump o que intentes crear variantes en la configuración del producto en la pestaña “Variantes”.
Configuración básica:
Por cada variante de producto que ofreces, tienes que crear un tu propio producto y asignarlo como un complemento a uno de tus productos.
Para hacerlo, sigue estos pasos:
Paso 1: Crear productos
Primero que nada, tienes que crear todos los productos que deseas mostrar en tu formulario de pedido como productos independientes crear.
Dado que añades los productos a tu proceso de ventas como complementos posteriormente, los siguientes pasos son suficientes:
- En la vista de vendedor, ve a Cuenta > Productos.
- Haz clic en Agregar producto.
- Introduce un Nombre para el producto, p.ej. [Nombre del producto] - [variante] = NutritionMAXX - 1 kilogramo.
- Introduce una Página de ventas.
- Haz clic en Guardar.
Repite estos pasos para los otros productos que deseas mostrar en tu formulario de pedido.
Por razones técnicas, también tienes que añadir un plan de pago, pero solo para tu producto principal. Como regla general, el producto con el precio/cantidad más bajo es el más adecuado para ser el producto principal, ya que se muestra en la parte superior de tu formulario de pedido y, por lo tanto, es el primer producto.
Para hacerlo, sigue estos pasos:
- En la vista de vendedor, ve a Cuenta > Productos.
- Haz clic en el ícono de E en el Producto principal.
- Cambia a la pestaña de Planes de pago.
- Desplázate hasta el final y haz clic en el ícono de E a la izquierda del único plan de pago que encontrarás.
- Ajusta el precio de tu producto principal en el campo de Primer pago.
- Haz clic en Actualizar plan de pago existente.
Paso 2: Configurar productos como complemento
Ahora cambia al producto que deseas usar como tu producto principal.
- En la vista de vendedor, ve a Cuenta > Productos.
- Haz clic en el ícono de E en el Producto principal.
- Cambia a la pestaña de Complementos.
- Selecciona la opción Sí - como elección de botón de radio del menú desplegable La compra del producto principal es opcional, si hay complementos presentes.
- Haz clic en Guardar.
- Desplázate a la ventana de Agregar complemento y selecciona uno de los productos que deseas mostrar en el formulario de pedido de la lista desplegable de Producto.
- Establece un precio para este complemento en el campo de Precio.
- Finalmente, verifica si todas las demás configuraciones de tu complemento coinciden con tus expectativas en la ventana de “Agregar complemento”. Si todo está bien, haz clic en Agregar complemento.
- Repite los pasos 6-8 para todos los demás productos que deseas mostrar en el formulario de pedido.
Si ahora llamas al formulario de pedido de tu producto principal, puedes elegir libremente entre todos los productos que has creado.
Consejo: Preseleccionar producto(s) con parámetros GET
Si deseas preseleccionar un producto diferente con diferentes enlaces, puedes usar parámetros GET y así preseleccionar los productos deseados a través del enlace. Puedes encontrar más información aquí. Nota importante: Según la ley de EE. UU., los complementos no deben estar preseleccionados. Por lo tanto, no están preseleccionados si el revendedor es DS.us.
Diseña un formulario de pedido optimizado para la conversión
Además de la configuración básica, tiene sentido adaptar y optimizar tu formulario de pedido a este embudo para generar más clientes y ingresos.
Una de las estructuras más populares para formularios de pedido en un embudo es la siguiente:
Este formulario de pedido consiste en:
- Una imagen de encabezado
- El carrito de compras
- Los campos para llenar los detalles de contacto
- La lista de métodos de pago
- Información sobre el periodo de devolución
- Una lista de testimonios
- Una lista de FAQs
Para diseñar un formulario de pedido así, procede de la siguiente manera:
Guía
- En la vista de vendor, ve a Cuenta > Formulario de pedido.
- Haz clic en Crear formulario de pedido responsivo.
- Ahora estás en la vista de edición de tu formulario de pedido. Puedes diseñar tu formulario de pedido mediante
- Agregar widgets (arrastrándolos y soltándolos del lado izquierdo a la línea deseada),
- Eliminar widgets (haciendo clic en la papelera en la esquina superior derecha del widget). Si no es visible, el widget debe estar presente en el formulario de pedido),
- Mover widgets (arrastrándolos y soltándolos en la línea deseada),
- Cambiar el ancho de los widgets (moviendo el control deslizante en la esquina inferior derecha del widget hacia la izquierda o hacia la derecha),
- Editar widgets (haciendo clic en el ícono de E en la esquina superior derecha del widget, si está disponible).
- Al lado de los widgets HTML encontrarás cuatro números.
He preparado un código HTML para que lo uses como plantilla. Es importante que adaptes este código a tu negocio.
Para utilizar nuestra plantilla, agrega el siguiente código a los widgets HTML haciendo clic en el ícono de E en la esquina superior derecha del widget. Recuerda siempre hacer clic en “Aplicar” después de agregar el código para guardarlo.-
Widget HTML (plantilla)
<div class="box-hl-container"><h1><span>SELECCIÓN DE PRODUCTO<a></a></span></h1></div> <div class="box-body contact-body"></div>
Nota: ¡Asegúrate de copiar todo el código! Desplázate hacia la derecha para ver todo el código. -
Widget HTML (plantilla)
<div class="guarantee-box"> <div class="guarantee-title"> ¡Periodo de devolución de 60 días! </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>Con esta oferta, puedes probar este producto y devolverlo durante 60 días.</b> Si no estás satisfecho, siempre puedes devolver tu producto. Para hacerlo, haz clic en el enlace de ayuda inmediata en el correo electrónico de confirmación de pedido y devuélvelo tú mismo o contáctame a beispiel@beispiel.com o al soporte de Digistore24 en support@digistore24.com. <br /><b>Después de todo, tu felicidad es lo más importante para mí.</b> </div> <div class="guaranteed-by d-inline-block"> <div class="position-relative"> <b>GARANTIZADO POR</b> <img src="https://dltq3zauxm86g.cloudfront.net/images/logo/made_in_germany.png" alt="" /></div> </div> <div class="clearfix"></div> </div> -
Widget HTML (plantilla)
<div class="box-hl-container"><h1><span>LO QUE DICEN NUESTROS CLIENTES<a></a></span></h1></div> <div class="box-body contact-body"></div> -
Widget HTML (plantilla)
<div class="box-hl-container"><h1>PREGUNTAS FRECUENTES</h1></div><div class="orderform-box-inner box-area-inner with-frame contact-area"><h3><strong data-mce-style="font-size: 14px;">P: Aquí debería estar una pregunta típica de tus clientes.</strong></h3><p><strong data-mce-style="font-size: 14px;">R: </strong>Aquí debería estar la respuesta a esta pregunta.</p><p> </p><p><strong>P: Aquí debería estar una pregunta típica de tus clientes.</strong></p><p><strong>R: </strong>Aquí debería estar la respuesta a esta pregunta.</p><p> </p><p> </p></div>
-
Widget HTML (plantilla)
- Haz clic en Configuraciones en la esquina superior izquierda.
- Si deseas utilizar nuestra plantilla, pega el siguiente código en el campo de 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; } - Haga clic en Aplicar.
- Haz clic en Guardar.