[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, you must 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 regards 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 Design on the left-hand menu:

2. Then you need to click Theme:

3. Click the Edit button next to the Checkout Element:

Adding your Logo to the Checkout Flow

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

5. This will reveal the Edit Checkout Logo window. This box will be ticked by default, and automatically display the logo that you've added to your EKM online shop to your Checkout Flow. You can untick this box to see more options:

[tips]Please remember though that it is best practice to check that this displays correctly; the logo on your EKM online shop can be constrained by the Theme to display to a specific size, and whilst this is the same case on your Checkout Flow, the proportions may be different, and the logo may be displayed in a completely different size. 

You can check how the logo displays on the Checkout Flow by opening an Incognito/In-Private Browser and visiting the front end of your EKM online shop. Add a single product to the Cart and follow the Checkout Flow. If your logo displays in a different size than the one you expected, follow the steps below to upload a different version to the Checkout Flow. [/tips]

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

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:

9. Click the down arrow for Checkout Background:

10. 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, 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:


As with many different areas of the EKM online shop platform, you can select colours by using the Colour Picker Window. You can drag the circle in the largest window to select a shade, and use the slider to the right to select a base colour. There’s also a field for you to add in a specific hex code if you know it. When you have finished selecting your colour, simply click the green tick to apply that colour, and click the screen off the window to close it down: 


11. 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 computer. When you have uploaded your image, 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’):

[remember]The image you upload should be 1920 pixels wide by 1080 pixels high, ideally 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 you upload and ensure it is not too 'busy' and that the Checkout Steps and text can be read against it when applied. It's good practice to add a Background Colour that matches the main colour of your Background Image too, to ensure that there's no unwanted default grey colour visible. [/remember]

[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

12. 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 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]

13. Repeat this process for the Checkout Colours section:

14. You also 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, and is not necessary if you have configured your colours using the steps above:

15. When you have finished configuring, scroll to the bottom of the page and click the green Save button on the bottom right-hand side:



[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]