How to Add a Prepaid Button on Product Pages with a Discount

If you want to encourage customers to prepay for their orders by offering a discounted price, you can set up a prepaid button on your product pages. This method allows you to create an automatic discount for prepaid orders while keeping the Cash on Delivery (COD) option available for customers who prefer to pay at delivery.

This guide will walk you through the steps to set up a prepaid button with a discount, customize its appearance, and ensure it functions correctly.

Step 1: Create an Automatic Discount in Shopify

Before setting up the prepaid button, you need to create a Shopify automatic discount that applies when customers choose the prepaid option.

How to Create an Automatic Discount:

Go to Shopify Admin > Discounts.
Click on Create new discount.
Configure the discount settings as needed (you can change the discount name and value based on your store’s needs).

Step 2: Disable COD from Shopify Checkout

Since COD orders will be processed through the Releasit COD Form, you need to disable COD from Shopify’s standard checkout to prevent conflicts.

How to Disable COD at Checkout:

Go to Shopify Admin > Settings > Payments.
Scroll down and click Manage next to the Cash on Delivery (COD) payment method.
Click Deactivate COD to remove it from the Shopify checkout.






Note: This does not affect the COD functionality in Releasit; it only prevents COD from appearing in Shopify’s default checkout.

Step 3: Disable Automatic Discounts in Releasit

To ensure the discount is applied correctly at checkout, you must disable automatic discounts in the Releasit settings.

How to Disable Automatic Discounts in Releasit:

Open Releasit.
Go to Settings & Integrations > General.
Activate the option to disable automatic discounts.

Step 4: Enable the "Buy Now" Button on Product Pages

To allow customers to prepay with a discount, you need to ensure the Buy Now button is visible on your product pages.

How to Enable the Buy Now Button:

Open Releasit.
Go to Settings & Integrations > Visibility.
Deactivate the option to hide the Buy Now button on product pages.






If the Buy Now button does not appear on your product pages, check your theme settings in Shopify’s theme editor and enable it from there.

Step 5: Customize the Name of the Buy Now Button

To make it clear to customers that they are selecting the prepaid discounted option, you can rename the Buy Now button.

How to Rename the Buy Now Button in Releasit:

Open Releasit.
Go to Settings & Integrations > General.






Paste the following CSS code into the Add Custom CSS section:

.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;
}

Replace "YOUR_BUTTON_NAME_HERE" with your preferred button text (e.g., "Pay Now & Get 10% Off").





Click Save to apply the changes.

Step 6: Verify the Prepaid Button on Your Store

Open a product page on your store.
Ensure that the new prepaid button appears with the correct name.
Click the button and confirm that it applies the automatic discount at checkout.
If the button does not update, refresh the page or clear your cache.

Final Thoughts

Customers will now see a prepaid button with a discount on product pages.
COD remains available through the Releasit COD Form, giving customers the choice between prepaid or COD.
Customizing the button text ensures customers understand the discount offer when selecting the prepaid option.

Need Help?

If you have any questions or need assistance setting up the prepaid button with a discount, feel free to contact support from the app.

Updated on: 20/03/2025