Brand my Checkout Basket

Steps to Brand Your Checkout Basket

1 Checkout Examples
2 Where to find Checkout Branding
3 Header & Footers
4 Choosing your colour scheme & fonts
5 Check your Branding is cohesive
6 FAQ’s

Related Help Guide Pages

Supporting Resources

On demand webinar: Getting the most out of your Checkout basket

Learn how to Brand your Checkout with your company colours and logo.

Branding your Checkout Basket is essential for providing a positive customer booking experience! A basket that matches your website and includes your company colours builds trust with your customers, and reassures them they are in the right place - booking with the right training company!

Follow this page to learn the steps for getting the best out of your Checkout Branding.

Checkout Examples

Here are a few examples below of our recommendations for good and bad Checkout Branding

Example (please click the images to view them in more detail)

Description

Here is an example of Checkout that shows a clean, easily readable header and footer with core information on how to contact you if your customer has an issue, the text is visible and clear to read to help with accessibility, and the progress buttons are easily identifiable.

It's clear within the footer what Payment Gateways the User can expect when booking and has clear logos to point your customer in the direction of connecting with you outside of the Checkout Basket.

Here is an example of Checkout where the colour scheme is a bit overwhelming, some of the white text is not easily readable, and the number of colours in use make it difficult to see what the CTA (call-to-action) is, this means it is not obvious to the user where to click next.

Font plays a massive part in your branding, if the font in your basket is not easily readable, it may deter your customers from continuing their purchase. Here you can see we have used Courier New, this can be quite hard to read for some Users.

We recommend Focusing on readable, sans-serif fonts like Arial or Helvetica.

Here is an example where the button colouring is the wrong way around based on standard colour conventions. Red is typically associated with ‘cancel’, ‘delete’, and ‘danger’ whereas green or blue are used for more positive actions such as ‘continue and 'confirm’. Bear this in mind when choosing your button colours.

Where to find Checkout Branding

Follow the below steps to navigate to Checkout Options

Go to ‘Profile' and then 'Administration’
Click ‘Checkout Options’ from the menu
Open the ‘Training Provider Options’ option from the Checkout Options menu
Right-click on your Training Provider and select the option 'Branding' from the context menu
At the top of the Branding page check the ‘Branding Enabled’ checkbox

Please Note
Checkout Options, including Branding settings, are only available for Super Administrators. If you cannot access Checkout Options, please speak with your Super Administrator.

Header & Footers

Headers and Footers are the key areas of your branding which help keep your Checkout inline and cohesive with your company branding

This step will provide guidance on Headers & Footers for your Checkout Branding

Best practice is to match your header and footer as closely as you can to your website so that your customers have a seamless booking experience from website to basket. Using HTML is a great way to ensure that branding is seamless between the two. If you have company web developers, they may be able to assist you with the HTML required for this

Here is an example of what HTML code looks like:

Top Tip
Within your Header or Footer, we recommend including your contact information to support your customers if they come across an issue.

Brand using Code View:

Begin by clicking the ‘Code View' button within the Header Text box,
This will switch the Header box to Code View mode
Paste your HTML code into the box
Unclick the ‘Code View’ button and your HTML will be converted into your branding
Follow steps 1-4 for your Footer

Brand free-hand:

We don't usually recommend branding your Checkout free-hand, this is because the rich text box can be quite fiddly when trying to set your branding exactly how you want it. However, there are several options available that you can use to create your branding freehand if you feel this is the best option for you.

The style button allows you to Select your heading Style, you can add a quote or code if needed
You have the option to make your text Bold, Italics or Underlined
Next, you can select your font from the list available as well as the font size
You have the option to set your background colour and text colour
You can set your text formatting with bullet points, text layout and order
You can add tables or links within your branding
You can add images or files if necessary. Adding an image such as your logo can be done by using the Image option
And finally, you have full-screen mode, Code View and Cleaner if needed

Choosing your colour scheme & fonts

Colour schemes and fonts allows your Checkout to be easily identifiable to Users

For Colour Schemes and Fonts, we have a few areas within the Platform that require colour so that they are easily identifiable. For example, you have the general branding settings, order summary settings, breadcrumb settings, log-in, basket and payment steps settings, dialogue, and pop-up windows. We recommend using your company’s primary, secondary and additional colour settings preferably by ‘hex codes’ to ensure the colours match exactly.

The first section is about the Font type and size for your Checkout basket, begin by choosing the Font type from the list provided
Next is to select the font size. Now usually these can be left blank as Checkout will automatically set a standard font size, however, if you would like to change the font size to suit your branding then you can enter it here, otherwise you can leave it blank
Once you have selected your font, you can move on to selecting the colour scheme for your Checkout basket, here allows you to choose the font weight for each section, button colour, hover colour and background colour, please see the table below on what each area within this section does


Hex Code	A Hex Code is a great way of adding the exact colour that matches your company branding, this is usually a series of numbers and letters that can be pasted into the field and the platform will automatically match the colour to the code
Colour wheel	The Colour wheel allows you to select a colour to set for your branding if you do not have a Hex Code available
Preset	Presets are colours that are already set within the platform, this is great to use for text colour or button colours if needed
Font weight	Font weight allows you to select whether the text is bold, normal, lighter
Font colour	We recommend choosing a colour for your font that has a strong contrast to the button colour, usually black or white works best.

Top Tip
When branding your Checkout basket, we recommend opening a new tab with Checkout open. Each time you save your changes to the branding, refresh your other tab which displays your Checkout Basket so that you can check over the changes in real-time.

Check your Branding is cohesive

Ensuring your branding is cohesive across your Website and Checkout helps Users easily identify you as a brand

Open the page on your website page that contains booking links for your Courses
Open an additional web tab and open your Checkout basket
Ensure you are happy with the two and that the colours and Fonts match your company's branding

FAQ’s

Yes, branding options including headers and footers are set up per Training Provider!
You can access this within the ‘Branding' option on the Training Provider Options page, just follow the steps within this guide for each Training Provider

The rich text editor has limited font options. We advise that if your Font style is not on the list, try to select the closest one available.

No, unfortunately, the accessplanit team will not create or design the Header/Footer/HTML for you, you will need to speak with your own marketing/IT team to have this done.

Knowledge Base

💡Knowledge Base Home | 🚀What's New | 📅Upcoming Training Events