You can also customize your >>Checkout page to suit your corporate identity on elopage. The support article >>Creating a checkout page theme explains how to customize the header & footer of the checkout page. With the help of this article, you can create a template for the layout, colors and fields of your checkout page, which you can later assign to one or more products when creating or editing them in the "Payment page" tab.
Overview
Choosing a layout option for the checkout page
"Give away" option (different delivery address)
Choosing a checkout page template for a product
Editing the default template
- Go to "Templates" and "Checkout pages" in the main menu of your seller account.
- The default template automatically applies to all checkout pages which have not been assigned an individual template.
- If you want all of your checkout pages to be automatically displayed in a different design, you can edit the default template by clicking on the edit icon.
Creating a custom template
- Go to "Templates" and "Checkout pages" in the main menu of your seller account.
- Click on "Create" in the upper right hand corner.
- Name the checkout page template.
Customizing the checkout page
The following elements can be edited in the "Customizing the checkout page" section.
Page
- Background color
- Focus color for checkboxes & borders
"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)
Button text for free products
- Click on the slider to define the text of the buy button for free products.
Choosing a layout option for the checkout page
- Click on the arrow to view more layout options.
- Select the layout for your checkout page here. Each type of layout is shown as a preview as soon as you mark it.
Settings for paid products
The buyer is a private person
- Click on the arrow to choose which details your private customers needs to enter at the checkout page.
- Mark which fields are necessary by clicking on the checkbox.
- You can deactivate this section via the slider if you are not using this payment page design for sales to private individuals.
The buyer is a company
- Click on the arrow to choose which details your business customers needs to enter at the checkout page.
- Mark which fields are necessary by clicking on the checkbox.
- You can deactivate this function via the slider if you are not using this checkout page design for sales to companies.
Please note
If you are selling to both individuals and companies, leave both options activated. Your customers can then select on the checkout page whether they are ordering as a private person or as a company.
Event attendees
- If you want to use the checkout page template for eTickets, click on the slider to choose which details the event participants needs to enter at the checkout page
- If the buyer details are to be automatically adopted for the participant data and the input fields are not to be displayed initially, deactivate the "Show input fields 'participant data'" checkbox. Your customers can also enter different details on the checkout page if necessary.
Important
Always activate the options "Buyer is private person" and/or "Buyer is a company" in combination with the fields for event attendees.
Coupon code field
- Here you can activate or deactivate the display of the "Coupon code" field on the checkout page by clicking on the checkbox.
Free products
- Click on the arrow to choose which details that your private customers needs to enter at the checkout page
- Mark which fields are necessary by clicking on the checkbox.
"Gift" option (different delivery address)
- Click on the arrow to choose which details that your private customers needs to enter at the checkout page.
- Mark which fields are necessary by clicking on the checkbox.
- Click on "Save."
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 on "Update" or "Save & Close."
Use case
Here is an example of a checkout page for an online course with an individual background & focus color as well as its own >>Header & footer.
Info
You can add the banner image when creating or editing the product in the "Checkout page" tab under "Checkout page" / customize" simply by copying & pasting into the text editor. You can find out more about the settings of the checkout page in the following support article >>Product configuration: Checkout page step.
Preview of the checkout page
You can preview your checkout page via the >>Product links.
For your quickstart