Haz clic en el Widget de E-commerce para crear un nuevo widget. Verás un botón del carrito y una ventana emergente que te pedirá conectar a tu cuenta de Ecwid o Stripe. Si cambia al color azul es que la conexión ha sido exitosa. Puedes mover el botón del carrito adonde quieras que aparezca en el proyecto publicado.
El botón del Carrito funciona globalmente, por lo tanto, aparecerá en todas las páginas de tu proyecto. Para eliminarlo de una página específica: selecciona la página deseada, abre el panel de widgets, busca el widget del carrito y haz clic en el icono del ojo para ocultarlo.
Después haz clic en el botón + en tu widget de atributos y selecciona el producto que quieres añadir. El botón de agregar al carrito (Add to Cart en inglés) aparecerá: cuando tus clientes cliquen en él, el producto agregado se verá en el carrito (puedes comprobar esto en el modo vista previa). Si tu producto tiene otros atributos, estos se verán encima del botón ‘Add to cart’.
Si no hay productos juntos al botón Add to cart, se mostrará una advertencia en el Editor y tanto en la vista previa como en la versión publicada, se mostrará como ‘No Product’.
Sube una imagen de tu producto vía el widget de imagen o el widget Slideshow y agrega un precio a través del widget de texto. Tu producto está listo.
Para agregar un nuevo producto, crea un nuevo widget de E-commerce en tu diseño. Se conectará a Ecwid o Stripe de manera automática.
Personalizar el carrito y los botones
Haz clic en Settings en el widget de control para establecer el color, bordes, radio, y fuente preferida para tus botones de Carrito (Cart en inglés) y Add to cart. Los dos botones pueden ser personalizados de forma individual. Haz clic en el botón que necesitas editar y ve a Settings, después de esto: Verás las opciones dedicadas para cada botón.
Si quieres que tus botones cambien su apariencia cuando el usuario clica sobre ellos, cambia de la opción ‘Default’ a la opción ‘Hover’, y selecciona tu configuración preferida.
En el control ‘Icon’ del widget, puedes seleccionar entre miles de íconos para mostrar al lado de tu texto. Aquí puedes además ajustar el tamaño del ícono y la posición de este al borde derecho o izquierdo de tu botón.
Para cambiar la apariencia de tu carrito de compra, entra en el modo de Vista Previa y haz clic en el icono del engranaje en la esquina superior derecha. Aquí puedes controlar el color y la transparencia de la barra lateral, personalizar la fuente y decidir si quieres que el carrito se muestre con una sombra.
También puedes activar la opción de 'Auto-Open' (Apertura automática): de este modo, el carrito se abrirá en la barra lateral automáticamente cada vez que tu cliente agregue un nuevo producto en él.
Si estás utilizando Ecwid, puedes reemplazar las palabras precio y cantidad mostrada en tu carrito desde el editor de Readymag. Para hacerlo, ve al modo vista previa, abre tu carrito, haz clic en ‘Price’ o ‘Quantity’, y escribe los términos que quieras que se muestren en su lugar.
Personalizar cesta de pago (para Stripe)
Desde tu panel de control de Stripe, puedes personalizar la apariencia de la cesta de pago: cambiar su fondo, seleccionar el color del botón, etc. Para ello, visita la configuración de tu cuenta de Stripe, selecciona Checkout settings -> Appearance -> Branding settings. Encuentra más detalles sobre la personalización de la cesta de compra en las instrucciones oficiales de Stripe.
Para añadir un campo en el que tus clientes puedan especificar su dirección de entrega, sigue estos pasos:
- Establece una tarifa de envío en tu cuenta de Stripe. Para ello, haz clic en 'Products' en tu panel de control de Stripe, selecciona 'Shipping rates' y haz clic en 'New'. Introduce el importe, la descripción y el plazo de entrega estimado.
- Abre tu proyecto de comercio electrónico creado con Readymag, ve al modo de Vista Previa, abre el carrito y haz clic en el icono del engranaje en la esquina superior derecha.
- Activa la opción 'Promo code' (Código promocional) en la sección de Stripe.
- Haz clic en "Available countries" y selecciona el lugar al que deseas enviar los productos haciendo clic en el ícono de signo más junto a ellos.
Para agregar un campo de código de promoción, siga estos pasos:
- Abre tu panel de Stripe, haz clic en 'Products' → 'Coupons' → 'New' para crear un cupón. Especifica la cantidad o porcentaje de descuento para tus clientes.
- Abre tu proyecto e ingresa al modo de Vista Previa, abre el carrito, luego haz clic en el icono de engranaje en la esquina superior derecha.
- Habilita la opción 'Promo code' en la sección Stripe.