Creating custom checkout pages and assigning them to the product

You can also adapt your >>checkout page on elopage according to your corporate identity.

For the layout, colors and fields of your checkout page, you can create a template with the help of this article, which covers:

• creating a template
• editing an existing one
• in the "Checkout Page" tab of your product.

You can preview the selected template for your checkout page directly in the product and also scroll and click on it.

 Overview

Edit default template

Create a custom template

Customize the checkout page

Choose a variant for the checkout page

Settings for paid products

Free products

"Give away" option (different delivery address)

Choose a checkout page template for a product

Preview of the checkout page

Create and edit your own template

You can create and edit your own template in two ways:

a) Directly next to the product in the tab "Checkout page"

Here you can create a new template, select or edit an existing one.

We'll also show you a live preview to the right of it. You can scroll and click on them to see a preview.

If you click on the editing pen for the selected template, the entire template including the settings will be displayed as a pop-up, so that you do not have to leave the page if you want to make changes.

As soon as you change a setting and click on "Save and Apply" at the bottom, the displayed preview changes immediately.

b) In the overview of the checkout page templates

• In the main menu of your seller account, go to "Checkout Tools" and "Checkout Page Templates."
• Click on "Create."

• Name the checkout page template.

Later you can select this for the respective products.

Customize the checkout page

You can edit the following elements in the "Customize checkout page" section.

Page

• Background color
• Focus color for checkboxes & borders
• Color of the recommendation note for a specific pricing plan
• Color for the badge for the recommended pricing plan if you have multiple prices for the product and have a pricing plan in the product as recommended

"Buy Now" button

• Button color
• Font color
• Button text
• Button shape (degree of rounding of the corners)

Coupon codes

• Color of the "Apply" button
• Font color
• Button shape (degree of rounding of the corners)

Countdown timer

• Here you can provide settings for the design of the countdown timer, which is displayed when you have provided a price for a certain period of time with the product.

You can activate the fields separately for private individuals or companies. If you only sell to companies, deactivate private individuals via the switcher.

• Click the fields you want to display.
• Determine whether this is mandatory information that must be filled in so that the purchase can take place.

Please note

If you sell to both individuals and companies, leave both options activated. Your customers can then choose on the checkout page whether they order as a private individual or a company.

Event participants

• If you want to use the checkout page template for eTickets, activate the fields for event participants by clicking on the switcher.
• If the buyer details are to be automatically transferred to the participant data and the input fields are not initially displayed, deactivate the checkbox "Show input fields 'Participant data'." If necessary, your customers can also enter different data on the checkout page.
• If you also want to specify the telephone number when purchasing, simply tick the corresponding field to activate the query.

Important

Activate the options "Buyer is private person" and/or "Buyer is company" in combination with the fields for event participants.

Coupon code field

• Here you can deactivate the display of the "Coupon code" field on the checkout page by clicking on the checkbox.

Free products

For free products, you can specify the displayed or necessary fields separately. Please note the requirements of the GDPR, e.g. in terms of data economy.
For our system, the email address is absolutely necessary to deliver the products, but also a name usually makes sense and you can address your customers directly in the emails and find customers in the system faster.

"Give away" option (different delivery address)

You can specify whether the option "Give away" (different delivery address) should be displayed on the checkout page and also determine the fields.

If someone buys a product as a gift for someone else, there are two records:
a) the buyer who receives the invoice
b) the recipient who receives the email with access to the product

Choose a checkout page template for a product

• In the main menu of your seller account, go to "Products," create or select the product and go to the "Checkout Page" tab in edit mode.
• Scroll down to "Checkout Page Template" and select your custom template.
• Then click "Update" or "Save & Close."

Use case

Here is an example of a checkout page for an online course with an individual background and focus color as well as its own >>header & footer.

Info

You add the banner image while creating or editing the product in the "Checkout page" tab under "Add/customize checkout page" simply by copying & pasting into the text editor. 

Preview of the checkout page

You can preview your checkout page via the >>Product links.