[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]
- Adding your Logo to the Checkout Flow
- Checkout Flow Background
- Checkout Steps
- Checkout Text & Buttons
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 the your shop logo displays at on the Checkout Flow could differ massively to how it appears on your actual shop and in a worse 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 which 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 which 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 Account Manager or Customer Support, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm on the weekends.[/contact]