[intro]In this Guide you’ll learn how to customise the Checkout Flow on your EKM online shop to match your branding. [/intro]

[caution]This Guide is intended for EKM online shops using an Aerial Theme. If your EKM online shop is using a legacy Theme or is in Custom Mode, click here for the correct instructions. [/caution]

Before you begin to trade online, it’s essential that you customise your Checkout Flow. When a Checkout Flow has been customised to match the design and the Theme of your EKM online shop, it automatically encourages trust in the eyes of your customer. An unfinished, uncustomised or badly customised Checkout Flow can put customers off from completing their purchase - especially so in regard to customers who aren’t too internet savvy and are wary of online shopping to begin with. In this Guide, you’ll learn how to customise your Checkout Flow so that the logo, colour scheme and background match the design and Theme of your EKM online shop so that customers are aware that your EKM online shop is secure, authentic and safe.

Where to customise your Checkout Flow

1. From the Dashboard, click the Design tab:

2. You then need to click the Edit button next to the Checkout Element:

Adding your Logo to the Checkout Flow

3. From the drop-down menu, you need to click Edit Checkout Logo:

4. This will reveal the Edit Checkout Logo window:

5. As the logo has already been added to the Header of my EKM online shop, you’ll see it displayed in the Edit Checkout Logo window. If you have not already uploaded a copy of your logo to your EKM online shop, you can select either the ‘Create Logo’ or ‘Upload Logo’ button. 

If you select Create Logo, this will launch EKM’s Logo Builder where you can quickly create a logo for use on your Checkout Flow and on your EKM online shop. Remember - both logos should match, so if you have not yet created a Logo, this will be the ideal option for you:

6. However, if you already have a company logo, the best option would be to click the Upload Logo button to upload a separate version to the logo used on the shop itself, before clicking the green Save Logo button:

7. When you have added your logo to the Checkout Flow, the next step is to amend the colour scheme and background to match the branding and design of your EKM online shop. To do this, click the Edit button on the Checkout again, but this time, select Change Colours:

8. You’ll then see this page. If you wish to add a background image to your Checkout Flow, click Checkout Background:

9. This will reveal two options; one is for you to amend the Background Colour and one is to upload a specific Background Image. If you wish to have a solid coloured background, simply click the square and select your colour. If you have a specific colour in mind, you can paste the hex code for the colour within the appropriate field before clicking the green tick symbol to set that colour:

10. On the other hand, if you wish to upload a background image to use on your Checkout Flow, click the Upload Image button to open the File Explorer and locate the image on your own computer:

[remember]The image you upload should be 1920 pixels wide by 1080 pixels high, and ideally be a .png file that has been optimised before it is uploaded. You can optimise your image by uploading it for free to Tinypng.com before uploading the optimised version to your EKM online shop. You also need to consider the detail on the image that you upload and ensure it is not too 'busy' and that the Checkout Steps and text can be read against it when it has been applied.[/remember]

11. When you have uploaded your image, you will be able to see it previewed on the page:

12. Click within the box provided to select the Background Image Position, and use the Background Type drop-down menu to select how you would like the image to display (if you’re not sure, leave it as ‘Fixed Scroll’):

[tips]In an incognito/In-Private browser tab, visit the front end of your EKM online shop, add some Products to the cart and enter the Checkout Flow, so as you make changes to the colours and background, you can review these by refreshing the page. Don’t forget to click the Save button at the bottom of the page to save your changes:


Checkout Steps

13. You then need to edit the Checkout Steps. Click the header to reveal the options available to you:

14. Each of the options has a square you can click - as above when selecting a solid-coloured background - where you can select a colour ‘on the fly’ or alternatively add a specific colour by entering its hex code in the field provided:

[tips]When selecting the colours for the Checkout Steps, it’s a good idea to use quite ‘dull’ colours for incomplete steps and bright colours for completed steps.[/tips]

Checkout Text & Buttons

15. When you have set the colours for your Checkout Steps, the next stage is to set the colours for the buttons and text that are visible on the Checkout Flow. To do this, click the Checkout Colours header the reveal the options available to you:

16. Repeat the process for setting your colours as you did with the Checkout Steps. When you are complete, scroll to the bottom of the page and click the green Save button on the bottom right-hand side:

[tips]You can tick the box at the bottom of the page which will reveal the functionality for you to add your own custom CSS to the Checkout Flow:

This functionality is for advanced users only. [/tips]



[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions Board. If you have a non-account specific question to ask the EKM Team, join us in EKM Community. If you need some inspiration for your EKM online shop, listen to our podcast on iTunes and Spotify.[/contact]