[caution]This Guide is intended for use with Legacy Themes or EKM online shops in Custom Mode. [/caution]
[intro] Before you begin this Guide, you should have installed at least one Payment Gateway and set up one offline Delivery Method on your EKM online shop, which will allow you to test the Checkout Flow afterwards. When you have completed this Guide, you will have customised your Checkout Flow with your own branding, background and colour scheme. [/intro]
Why should I customise my Checkout Flow?
Before you begin to trade online, it’s essential that you customise your Checkout Flow. Whilst this does little in terms of SEO (Search Engine Optimisation), it does wonders for customer experience. This is because if 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
1. From the drop-down menu, you need to click Edit Checkout Logo:
2. This will reveal the Edit Checkout Logo window:
3. The box to use your Existing Logo is ticked by default, as it’s important to have at least something there whilst you are still populating your EKM online shop. However, to keep this box is not recommended as the size that your shop logo displays on the Checkout Flow could differ massively from how it appears on your actual shop and in a worst-case scenario, the logo will display very large (dependent on the size of the original logo image you uploaded to your shop). You will need to untick this box.
You’ll then be able to 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. 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.
[tips] If you are uploading a separate logo to your Checkout Flow, create a version that is 625 pixels wide and approximately 100 pixels high, allowing you to incorporate your shop telephone number and your strapline too (if you have one) in the header of the Checkout Flow. [/tips]
4. When you click the Upload Logo button in the Edit Checkout Logo window, this will open the File Explorer, allowing you to locate the images you’d like to use on your own computer:
5. When you see your logo previewed in the window, click the green Save Logo button:
6. Now 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:
Checkout Flow Background
7. You’ll then see this page. If you wish to add a background Image to your Checkout Flow, click Checkout Background:
8. 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:
9. 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]
10. When you have uploaded your image, you will be able to see it previewed on the page:
Click within the box provided to select the Background Image Position, and used 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’ - which means the image will not move down the page as the customer scrolls down - and check this looks good by visiting your EKM online shop using an Incognito/In-private browsing tab.
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.
11. You then need to edit the Checkout Steps. Click the header to reveal the options available to you:
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
12. 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:
13. Repeat the process for setting your colours as you did do with the Checkout Steps. When you are complete, scroll to the bottom of the page and click the green Save button to the bottom right-hand side:
14. When you have finished customising your Checkout Flow, you should have something that looks like this:
[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]
- Settings - Checkout
- Settings - Shop Details
- Making Quotes on your EKM online shop
- Customising your Invoices
- The Orders Page
[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]