Artículos sobre: Personalización y Diseño de Formulario

Cómo agregar un botón de prepago en páginas de productos con descuento

Si deseas incentivar a tus clientes a prepagar sus pedidos ofreciendo un precio con descuento, puedes configurar un botón de prepago en las páginas de producto. Este método te permite crear un descuento automático para pedidos prepago, mientras mantienes la opción de Pago Contra Entrega (COD) disponible para aquellos clientes que prefieran pagar al momento de la entrega.

Esta guía te mostrará los pasos para configurar un botón de prepago con descuento, personalizar su apariencia y asegurarte de que funcione correctamente.

Paso 1: Crea un Descuento Automático en Shopify



Antes de configurar el botón de prepago, debes crear un descuento automático en Shopify que se aplique cuando los clientes elijan la opción prepago.

Cómo crear un descuento automático:


Ve a Shopify Admin > Descuentos.
Haz clic en Crear nuevo descuento.
Configura la configuración del descuento según sea necesario (puedes cambiar el nombre y el valor del descuento según las necesidades de tu tienda).

![](https://storage.crisp.chat/users/helpdesk/website/-/9/5/6/c/956ccd10099b2000/image_191ksi1.png)

Paso 2: Desactiva el Pago Contra Entrega (COD) en el Checkout de Shopify



Dado que los pedidos COD se procesarán a través del formulario COD de Releasit, necesitas desactivar COD en el checkout estándar de Shopify para evitar conflictos.

Cómo desactivar COD en el checkout:


Ve a Shopify Admin > Configuración > Pagos.
Desplázate y haz clic en Administrar junto al método de pago de Pago Contra Entrega (COD).
Haz clic en Desactivar COD para eliminarlo del checkout de Shopify.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/5/6/c/956ccd10099b2000/image_13z28bp.png)
Nota: Esto no afecta la funcionalidad de COD en Releasit; solo evita que COD aparezca en el checkout predeterminado de Shopify.

Paso 3: Desactiva los Descuentos Automáticos en Releasit



Para asegurarte de que el descuento se aplique correctamente en el checkout, debes desactivar los descuentos automáticos en la configuración de Releasit.

Cómo desactivar los descuentos automáticos en Releasit:


Abre Releasit.
Ve a Configuración e Integraciones > General.
Activa la opción para desactivar los descuentos automáticos.
### Paso 4: Habilita el Botón "Buy Now" en las Páginas de Producto

Para permitir que los clientes prepago obtengan un descuento, debes asegurarte de que el botón Buy Now (Comprar Ahora) sea visible en tus páginas de producto.

Cómo habilitar el botón Buy Now:


Abre Releasit.
Ve a Configuración e Integraciones > Visibilidad.
Desactiva la opción que oculta el botón Buy Now en las páginas de producto.


Nota: Si el botón Buy Now no aparece en tus páginas de producto, revisa la configuración de tu tema en el editor de temas de Shopify y habilítalo desde allí.

Paso 5: Personaliza el Nombre del Botón Buy Now



Para dejar claro a los clientes que están seleccionando la opción prepago con descuento, puedes renombrar el botón Buy Now.

Cómo renombrar el botón Buy Now en Releasit:


Abre Releasit.
Ve a Configuración e Integraciones > General.


Pega el siguiente código CSS en la sección Agregar CSS personalizado:

.shopify-payment-button .shopify-payment-button__button--unbranded::after {
      content: "YOUR_BUTTON_NAME_HERE" !important;
      color: rgb(255, 255, 255) !important;
      font-size: calc(16px) !important;
      position: static !important;
      text-transform: none !important;
      box-shadow: none !important;
      background-image: none !important;
      transform: none !important;
    }
    
    .shopify-payment-button .shopify-payment-button__button--unbranded {
      box-shadow: rgb(0 0 0 / 20%) 0px 2px 7px 0px !important;
      font-size: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      padding: 6px 20px 6px;
      min-height: 51px;
      color: transparent !important;
    }


Reemplaza "YOUR_BUTTON_NAME_HERE" con el texto que prefieras para el botón (por ejemplo, "Paga ahora y obtén 10% de descuento").

![](https://storage.crisp.chat/users/helpdesk/website/-/9/5/6/c/956ccd10099b2000/image_1evc7zo.png)
Haz clic en Guardar para aplicar los cambios.

Paso 6: Verifica el Botón de Prepago en tu Tienda



Abre una página de producto en tu tienda.
Asegúrate de que el nuevo botón de prepago aparezca con el nombre correcto.
Haz clic en el botón y confirma que aplica el descuento automático en el checkout.
Si el botón no se actualiza, refresca la página o limpia la caché.
### Reflexiones Finales

Los clientes ahora verán un botón de prepago con descuento en las páginas de producto.
La opción COD sigue disponible a través del formulario COD de Releasit, dando a los clientes la posibilidad de elegir entre prepago o COD.
Personalizar el texto del botón asegura que los clientes comprendan la oferta de descuento al seleccionar la opción prepago.

¿Necesitas Ayuda?



Si tienes alguna pregunta o necesitas asistencia para configurar el botón de prepago con descuento, no dudes en contactar al soporte desde la app.

Actualizado el: 01/04/2025

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!