You can customize the checkout page of your shop theme by editing the header and footer and adapting them to your requirements and objectives. You can:
- Hide the header and/or footer
- Adapt the colors and font properties in the header and footer
- Set up the menu for the header and footer
The checkout page is the page that your customer is taken to when they click on your product to buy it. On the checkout page, your customer enters their details and completes the order. The following screenshot shows a checkout page.
Why should you customize the header and footer of the checkout page?
On the checkout page, you should avoid having any distractions that may lead your customer away from the product. In the header of your shop pages you may have several pages with information about your offers and yourself, links to social media accounts, etc. So think about what should be your customer's focus on the checkout page. After all, this is the last step of the buying process. So it may be better to keep the header very concise or even to hide it.
There may also be information that you only need on the checkout page, such as a different legal notice. This is important because for example, if you sell in the reseller model, you have to provide elopage/namotto's legal notice, terms and conditions and data security information on the checkout page.
How to get started
First go to the overview of your shop themes and select the theme that you use to sell your products. You should already have marked this with the star on the far left. Then, click on the "three dots" on the far right and then on the "pencil".
Next, you are taken to the editing view of the shop theme. In the lower area you will find "Advanced settings".
To edit the header of the checkout page, slide the switch next to “Checkout page theme” to the right (to green).
Overview of this article
Step-by-step instructions
The header
Note
A header on the checkout page can sometimes confuse or distract customers. If you want to avoid a customer canceling the order process prematurely, you should consider hiding the header on the checkout page.
A premature cancellation could occur as a result of your customer clicking on a menu item in the header or on a social media icon and being led away from the product.
Showing or hiding the header
Once you have moved the slider next to “Checkout page theme” to the right (to green), you will be taken to the editing view of the checkout page theme where you can specify settings for the header and footer.
If you do not want to use the header on the checkout page (recommended), check the box on the far right next to "Hide".
Editing and adapting the header
By clicking on the "pencil" on the far right, you can create and adapt a custom header for the checkout page.
Next, you are taken to the editing view for the header of the checkout page of your shop theme. Here you can specify a wide range of settings relating to colors and font properties for the header and create a custom menu.
You can create menu items for the header of the checkout page using the input mask in the middle area:
- Enter the name of the menu item in the left field (1).
- In the right field, enter the URL to which your customer should be redirected when they click on the menu item (1).
- Then, confirm your changes by clicking on the "Save" button to the right of the input mask (2).
- If you do not make any further changes or adaptations afterwards, please remember to finish by clicking on the "Save" button in the bottom right corner (3).
In the lower area of the editing view for the header, you can set up links to your homepage and to social media accounts. These links are then automatically inserted in the header as icons. In the footer you can see some links inserted as an example (see below).
Make sure that you always exit the editing view for the header by clicking on the "Save" button so that all entries and changes are applied.
Then, you return to the editing view for the checkout page theme and see a preview of your custom header.
The footer
Showing or hiding the footer
If you do not want to use the footer on the checkout page, check the box on the far right next to "Hide".
Important!
You should never hide the header and the footer at the same time because you must provide the mandatory information required by law (legal notice, data security information, etc.). It is recommend that you insert this mandatory information in the footer.
Editing and adapting the footer
By clicking on the "pencil" on the far right, you can create and adapt a custom footer for the checkout page.
Next, you are taken to the editing view for the footer of the checkout page of your shop theme. Here you can specify a wide range of settings relating to colors and font properties for the footer and create a custom menu.
You can create menu items for the footer of the checkout page using the input mask in the middle area:
- Enter the heading of the section in the uppermost field (1).
- Enter the name of the menu item in the left field (1).
- In the right field, enter the URL to which your customer should be redirected when they click on the respective menu item (1).
- Then, confirm your changes by clicking on the “Save” button to the right of the input mask (2).
- If you do not make any further changes or adaptations afterwards, please remember to finish by clicking on the "Save" button in the bottom right corner (3).
In the lower area of the editing view for the footer, you can set up links to your homepage and to social media accounts. These links are then automatically inserted in the footer as icons.
Make sure that you always exit the editing view for the footer by clicking on the "Save" button so that all entries and changes are applied.
Then, you return to the editing view for the checkout page theme and see a preview of your custom footer.
Important for sellers in the reseller model
If you sell in the reseller model, you must insert the legal notice, terms and conditions and data security policy of the reseller partner on the checkout page (ideally in the footer).
About the author
This help article was written by our certified partner Ingo Simon, who uses elopage for his business and therefore writes from practical experience for practical application.
Ingo also offers you support in the Facebook community by answering practical questions.