Please note that we have changed the menu structure.To simplify navigation, your elopage account is now structured slightly differently. But the functions remain the same. We will adjust the help section and renew the screenshots. If you have any questions, our support will be happy to help.
Achtung, neue Menüstruktur! Um die Navigation zu vereinfachen, ist dein elopage-Account jetzt etwas anders strukturiert. Die Funktionen bleiben aber die gleichen. Wir werden den Hilfebereich anpassen und die Screenshots erneuern. Bei Fragen hilft unser Support gerne weiter.
This is a machine-translated article. We’re constantly working on improving translation quality for an optimized help center experience. We apologize for any inconvenience.

Creating custom checkout pages and assigning them to the product

Monika
Monika
  • Updated

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

With the help of this article, you create a template for the layout, colors and fields of your checkout page, which you assign to one or more products when creating or editing the product in the "Checkout page" tab.

 

U_berblick_u_ber_diesen_Artikel.png Overview

Edit default template

Create a custom template

Customize 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

 

Edit default template

  • In the main menu of your seller account, go to "Checkout Tools" and "Checkout Page Templates."
  • The preset default template applies to all checkout pages to which you have not assigned a custom template.
  • If you want all your checkout pages to be displayed in a different design by default, you can change the default template by clicking on the pencil icon.

template_bezahlseite_stift.png

Create your own template

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

template_bezahlseite_erstellen.png

  • Name the checkout page template.

Customize checkout page

You can edit the following elements in the "Customize 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 and 2nd email field

  • Directly above you can provide your custom text for free products.
  • Below that, you can display a 2nd e-mail field on the checkout page. This allows you to prevent customers from mistyping and then not receiving the product. 

Buttontext_und_E-mail field.png

Choose a variant for the checkout page

You can select different designs here. It's best to test which design converts best for your customers.

  • Click the arrow to expand the layout options.
  • Select the layout variant for your checkout page here. Each variant is shown as a preview as soon as you mark it.

Bezahlseitentemplate_ _Variante.png

Settings for paid products

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

Bezahlseitentemplate_Privatperson.png

  • 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.

Hinweis.pngPlease 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.

Payment page Template_ _Veranstaltungsteilnehmer.png

Wichtig_.png 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.

Bezahlseiten-Template_-_Gutscheincode.png

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.

Bezahlseitentemplate_kostenlose_Produkte.png

 

"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."

produkt_bezahlseite_template.png

UseCase.png 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.

bezahlseite_template_use_case.png

bezahlseite_template_use_case_1.png

bezahlseite_template_use_case_2.png

Info.png 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. 

bezahlseite_banner_bild.png

Preview of the checkout page

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

Was this article helpful?