selectselectselect
Call our Sales Hotline
0333 004 0333

Checkout

With ekmPowershop it is very easy to configure the way that your checkout fields work, and the information that is displayed to your customers.

To begin, go into your settings, and then into “checkout”, and you will be presented with the following screen;

Configure checkout fields1.jpg

You can choose between two checkout styles; the “One Page” checkout style, where the checkout process is presented in one single page, or the “Multiple Pages” checkout style, where the checkout process is spread over multiple pages.

One Page Checkout

If you select the “One Page” checkout style, you will be presented with the following page;

Onepageflow1.jpg

Onepageflow2.jpg

Onepageflow3.jpg

First, we will look at the “Checkout Flow” section, which splits the “One Page” checkout process into six sections. You will see these sections highlighted with a red outline when you hover your mouse cursor over each section of the “Checkout flow” diagram. The first section deals with the shopping cart summary and can be accessed by clicking the top section of the checkout flow diagram;

Onepageflow4.jpg

Within this section, you choose whether you want to display a summary of the cart at the top of the “One Page” checkout process. In most cases you will want to display this, as this gives your customers one last chance to confirm that what they have bought is correct, and will help prevent incorrect orders being placed.

The next section deals with the customer login facility;

border‎

The first question you are asked in this section is whether you want to display a customer login area in the checkout process. If you would rather allow your customers to checkout without setting a customer account, then you can set this drop down to “No” and move on to the next section. If you want your customers to set up a customer account on your shop, set this drop down to “Yes” and you will be presented with the following screen;

Onepageflow11.jpg

It is important to note that by enabling the customer login within the checkout process that all of your customers, both new and existing, will be asked to set up a customer account with a password, and the alert in this section highlights that this can cause problems for existing customers if you have switched the customer login area after already taking orders on your shop.

Guestcheckout.JPG

You also have the option of enabling a guest checkout, which means if you have the customer login section enabled, it will allow customers to bypass logging into to checkout. This also means that if you have the Loyalty Points feature enabled, if a customer selects Guest Checkout, they'll forfeit any points they may have been due.

Below the alert you will be able to choose how to display the customer login area within the checkout process. There are two options here; you can either supply your customers with a link that will take them away from the checkout process to log into their customer account or you can display the customer login area within the one page checkout process itself.

Below this you will be able to set the minimum length of the customers’ passwords. The customers’ passwords can be between 0-15 characters, but it is important to note that the shorter the password the less secure it is and the longer the more secure but the harder it can be to remember.

The next section of the checkout flow diagram deals with the input of the billing and shipping information;

Onepageflow5.jpg

The first part of this section allows you to choose whether you customers’ can supply a delivery address that is different to their billing address or not. The main advantage of disabling this section is to prevent credit card fraud, as it ensures that the goods can only be delivered to the card holder’s address. This is, of course, no good if you are offering a gift wrapping and delivery service as your customer may want the goods to be delivered to the person who is receiving the gift. You may also want to take into account that may people want their items delivered to their work place rather than their home during the working week.

Onepageflow12.jpg

The next part of this section controls if the customer has to enter in their email address twice of confirmation or not. The advantage of forcing the customer to input their email address twice is that they are less likely to input their email address incorrectly, which in turn means they are more likely to receive the emails you send to them through the ekmPowershop platform, but the minor disadvantage is that it does mean the checkout process takes slightly longer to complete.

Onepageflow6.jpg

The next part of this section is the required field section, which determines what information a customer has to enter before they can complete their order. So for example, you may want your customers to enter a contact number so that you contact them if there is a problem with the order. To force a customer to enter something into a certain field, set the dropdown menu of the field that you want to make a required field to “Required” and click the “Update” button at the bottom of this page. When you go to the customer details section of the checkout procedure, the field you have just selected will now be marked with a red * and your customers will have to enter something into that field or they will not be able to proceed to the next stage.

Be aware that some payment gateways require some checkout fields to be filled in, otherwise they will error out. To confirm which fields are required for your payment gateways, please contact the payment gateways.

The next section of the checkout flow diagram allows you to set custom fields within the checkout process, to gather further information that has not been gained from the billing and shipping information section;

Onepageflow7.jpg

Upon entering this section, you will first be able to set a title for the custom fields section of your checkout process. It is important to note that this title will only ever be displayed if you choose to add a custom field to the checkout process. The edit the title, simply click the “Edit” button next to the title; to delete it just click the “Delete” button. To add a custom field to the checkout process, click the “Add New Field” button;

Onepageflow13.jpg

Upon clicking the “Add New Field” button, you will be able to choose from four types of custom fields; Drop Down Box, Text Box, Text Area and Check Box. Upon clicking the image next to any of these options, you will first be asked to name the field. This is where you type the question you want to ask your customer (e.g. “How did you hear about us?” or “Do you agree to our terms and conditions?”)

Please note that if you want to ask your customers to agree to the terms and conditions of your website, you should choose a check box field, add a field name of “Do you agree to our Terms and Conditions?”, make the field a required field and enter just one answer of “Yes”. This will mean that in order to proceed with the order, the customer will have to tick the “Yes” check box.

If you have selected “Drop Down Field”, which is best used for questions where you need your customer to supply you with one answer out of a fixed selection of answers (e.g. “Year of Birth” or “How did you hear about us?”), you will be presented with the following screen after entering a field name;

Onepageflow14.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the dropdown list, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The next part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

The default text section allows you to display some default text, such as 'Make your selection...', before the customer chooses an option from the dropdown menu. This is an optional field and so if you do not want to enter any default text, you do not have to.

The final part of this page allows you to set up to ten answers for the custom field;

Onepageflow15.jpg

As you can see from the red circle in the above image, you are able to associate a value to each answer which will then add or deduct a specific amount or percentage from the order total.

A common use for this is if you are using a gateway that takes a high percentage per transaction, as you may want to pass this charge onto your customer. In this case, you would want a custom field that asks “Which payment gateway will you be paying by?”

You would then list all of your available gateways, and for the one that takes the high percentage, simply change the drop down on the right to % and then in the far right field enter, for example +10, if you want to add 10% onto the order. -10 would take 10% off the order as well.

Once you have added all the fields you need, click update, and the changes will take effect immediately.

If you have selected “Text Box”, which is best used for questions where you need your customer to supply you with a single line of custom text (e.g. “What message should be engraved on the item?” ), you will be presented with the following screen after entering a field name;

Onepageflow16.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the text box, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The last part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

If you have selected “Text Area”, which is best used for questions where you need your customer to supply you with more than one line of custom text (e.g. “What message would you like to be printed on the compliments card?” ), you will be presented with the following screen after entering a field name;

Onepageflow17.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the text area, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The last part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

If you have selected “Check Box”, which is best used for questions where you need your customer to supply you with one or more answers out of a fixed selection of answers (e.g. “Which of the following reasons contributed to you ordering from this website?” ), you will be presented with the following screen after entering a field name;

Onepageflow18.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the dropdown list, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The next part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

The final part of this page allows you to set up to ten answers for the custom field;

Onepageflow19.jpg

As you can see from the red circle in the above image, you are able to associate a value to each answer which will then add or deduct a specific amount or percentage from the order total.

The next section of the checkout flow diagram simply allows you to add another set of custom fields to the checkout process under a different heading to the first set of custom fields. These are added in the exact same way as the the first set of custom fields.

The next section of the checkout flow diagram allows you to set the payment options layout in the checkout process;

Onepageflow8.jpg

In this page, you can display your payment options in either a dropdown menu, or as separate buttons. If you have a large number of payment gateways, you may want to use the “drop down list” option, as this will only display the button for the payment gateway you have selected in the drop down menu, reducing the length of the checkout page. If you just have one or two payment options, you may want to select the “Buttons” option and display them all on the checkout page at the same time.

Below the checkout flow diagram, you have the Order Complete page diagram, which the customer will get to after paying for their order through the chosen payment gateway and completing their order;

Onepageflow9.jpg

This page allows you to customise the order complete page for each of your payment gateways. As each payment gateway has its own unique order complete page, this page will, at first, just display the icons for the payment. To edit the order complete page for a particular payment gateway, simply click the button for the payment gateway in question and you will be presented with an editor;

Onepageflow20.jpg

As you can see, “Telephone” is highlighted at the top of the page to show that this is the one that is currently being modified.

The Editor on the right makes uses of the ekm tags, and a full list of the tags that can be used on the order complete page is provided just below the editor. Simply use the editor as you would the WYSIWYG editor anywhere else on the ekmPowershop system. You can also switch into the source view by clicking “Source” button in the top left hand corner of the editor. Entering the “Source” view of the editor will allow you to insert custom code into the order complete page, was well as allowing you to add more ekm tags to the page.

Another use for this is if you are using some kind of conversion tracker or affiliate scheme code. Such trackers generally require you to enter a line of code into the final page of your checkout procedure and this where you can add such code. Simply click on “Source” button and paste in the code that the conversion or affiliate company have provided you with below the existing content. Please note that if you wish to add Google Analytics tracking code, you can do this more easily using the “Google Tools” feature.

Below the Order Complete section of the checkout settings page is the checkout security section;

Onepageflow21.jpg

The “Enforce secure checkout” option in this section allows you to place the entire checkout process on a SSL protected https:// URL. It is important to note that is URL will always be a https://www.ekmsecure... URL, rather a secure version of the domain name you have associated to your ekmPowershop account.

This is not needed until the credit card stage (which is always secure). If you choose to enforce security be warned that any externally hosted images or scripts will generate a warning message to the customer. Examples of externally hosted scripts and images include, but are not limited to, Facebook like buttons, Google +1 buttons, Twitter icons and feeds, AddThis widgets and images or slideshows hosted on image storage sites such as Flickr or Photobucket.

« Back

Multiple Pages Checkout

If you select the “Multiple Pages” checkout style, you will be presented with the following page;

Mpageflow1.jpg

Mpageflow2.jpg

First, we will look at the “Checkout Flow” section, which splits the “Multiple Pages” checkout process into six pages. You will see these pages highlighted with a red outline when you hover your mouse cursor over each page in the “Checkout flow” diagram. The first section deals with the customer login and can be accessed by clicking the top section of the checkout flow diagram;

Onepageflow10.jpg

The first question you are asked in this page is whether you want to display a customer login area in the checkout process. If you would rather allow your customers to checkout without setting a customer account, then you can set this drop down to “No” and move on to the next page. If you want your customers to set up a customer account on your shop, set this drop down to “Yes” and you will be presented with the following screen;

Mpageflow3.jpg

This screen will allow you to select between two styles of login screen; an “Amazon” style customer login screen which asks if they’re an existing or new customer after asking for their email address, or a more conventional customer login screen which asks if they are an existing/new customer before asking for their email address and password. To choose the style you want, simply click on the image for the style you want then click the “Update” button.

The next page of the checkout flow diagram allows you to set the first page of custom fields within the checkout process, to gather further information that cannot be gained from the billing and shipping information section;

Onepageflow7.jpg

Upon entering this page, you will first be able to set a title for the first page of custom fields in your checkout process. It is important to note that this title will only ever be displayed if you choose to add a custom field to the checkout process. The edit the title, simply click the “Edit” button next to the title; to delete it just click the “Delete” button. To add a custom field to the checkout process, click the “Add New Field” button;

Onepageflow13.jpg

Upon clicking the “Add New Field” button, you will be able to choose from four types of custom fields; Drop Down Box, Text Box, Text Area and Check Box. Upon clicking the image next to any of these options, you will first be asked to name the field. This is where you type the question you want to ask your customer (e.g. “How did you hear about us?” or “Do you agree to our terms and conditions?”)

Please note that if you want to ask your customers to agree to the terms and conditions of your website, you should choose a check box field, add a field name of “Do you agree to our Terms and Conditions?”, make the field a required field and enter just one answer of “Yes”. This will mean that in order to proceed with the order, the customer will have to tick the “Yes” check box.

If you have selected “Drop Down Field”, which is best used for questions where you need your customer to supply you with one answer out of a fixed selection of answers (e.g. “Year of Birth” or “How did you hear about us?”), you will be presented with the following screen after entering a field name;

Onepageflow14.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the dropdown list, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The next part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

The default text section allows you to display some default text, such as 'Make your selection...', before the customer chooses an option from the dropdown menu. This is an optional field and so if you do not want to enter any default text, you do not have to.

The final part of this page allows you to set up to ten answers for the custom field;

Onepageflow15.jpg

As you can see from the red circle in the above image, you are able to associate a value to each answer which will then add or deduct a specific amount or percentage from the order total.

A common use for this is if you are using a gateway that takes a high percentage per transaction, as you may want to pass this charge onto your customer. In this case, you would want a custom field that asks “Which payment gateway will you be paying by?”

You would then list all of your available gateways, and for the one that takes the high percentage, simply change the drop down on the right to % and then in the far right field enter, for example +10, if you want to add 10% onto the order. -10 would take 10% off the order as well.

Once you have added all the fields you need, click update, and the changes will take effect immediately.

If you have selected “Text Box”, which is best used for questions where you need your customer to supply you with a single line of custom text (e.g. “What message should be engraved on the item?” ), you will be presented with the following screen after entering a field name;

Onepageflow16.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the text box, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The last part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

If you have selected “Text Area”, which is best used for questions where you need your customer to supply you with more than one line of custom text (e.g. “What message would you like to be printed on the compliments card?” ), you will be presented with the following screen after entering a field name;

Onepageflow17.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the text area, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The last part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

If you have selected “Check Box”, which is best used for questions where you need your customer to supply you with one or more answers out of a fixed selection of answers (e.g. “Which of the following reasons contributed to you ordering from this website?” ), you will be presented with the following screen after entering a field name;

Onepageflow18.jpg

The first part of this page will allow you to change the field name if you want to re-word it or if you have made a spelling error. The next part will allow you to set a description for the field to better describe the reason for the dropdown list, which will be displayed below the field name in a smaller font size within the checkout process. This is an optional field and so if you do not want to enter a field description, you do not have to.

The next part of this page allows you to state when this field is a required field or an optional field. If this dropdown menu is set to “Yes”, it means that the customer has to select an item from the dropdown list or they cannot complete the checkout process.

The final part of this page allows you to set up to ten answers for the custom field;

Onepageflow19.jpg

As you can see from the red circle in the above image, you are able to associate a value to each answer which will then add or deduct a specific amount or percentage from the order total.

The next page of the checkout flow diagram deals with the input of the billing and shipping information;

Onepageflow5.jpg

The first part of this page allows you to choose whether you customers’ can supply a delivery address that is different to their billing address or not. The main advantage of disabling this section is to prevent credit card fraud, as it ensures that the goods can only be delivered to the card holder’s address. This is, of course, no good if you are offering a gift wrapping and delivery service as your customer may want the goods to be delivered to the person who is receiving the gift. You may also want to take into account that may people want their items delivered to their work place rather than their home during the working week.

Onepageflow12.jpg

The next part of this section controls if the customer has to enter in their email address twice of confirmation or not. The advantage of forcing the customer to input their email address twice is that they are less likely to input their email address incorrectly, which in turn means they are more likely to receive the emails you send to them through the ekmPowershop platform, but the minor disadvantage is that it does mean the checkout process takes slightly longer to complete.

Onepageflow6.jpg

The next part of this section is the required field section, which determines what information a customer has to enter before they can complete their order. So for example, you may want your customers to enter a contact number so that you contact them if there is a problem with the order. To force a customer to enter something into a certain field, set the dropdown menu of the field that you want to make a required field to “Required” and click the “Update” button at the bottom of this page. When you go to the customer details section of the checkout procedure, the field you have just selected will now be marked with a red * and your customers will have to enter something into that field or they will not be able to proceed to the next stage.

Be aware that some payment gateways require some checkout fields to be filled in, otherwise they will error out. To confirm which fields are required for your payment gateways, please contact the payment gateways.

The next page of the checkout flow diagram simply allows you to add another page of custom fields to the checkout process that will appear after the customer has entered in their billing and shipping information. These are added in the exact same way as the first page of custom fields.

The next page deals with the shopping cart summary and can be accessed by clicking the top section of the checkout flow diagram;

Onepageflow4.jpg

Within this section, you choose whether you want to display a summary of the on the last page of the checkout process that contains the payment gateway buttons. In most cases you will want to display this, as this gives your customers one last chance to confirm that what they have bought is correct, and will help prevent incorrect orders being placed.

Below the checkout flow diagram, you have the Order Complete page diagram, which the customer will get to after paying for their order through the chosen payment gateway and completing their order;

Onepageflow9.jpg

This page allows you to customise the order complete page for each of your payment gateways. As each payment gateway has its own unique order complete page, this page will, at first, just display the icons for the payment. To edit the order complete page for a particular payment gateway, simply click the button for the payment gateway in question and you will be presented with an editor;

Onepageflow20.jpg

As you can see, “Telephone” is highlighted at the top of the page to show that this is the one that is currently being modified.

The Editor on the right makes uses of the ekm tags, and a full list of the tags that can be used on the order complete page is provided just below the editor. Simply use the editor as you would the WYSIWYG editor anywhere else on the ekmPowershop system. You can also switch into the source view by clicking “Source” button in the top left hand corner of the editor. Entering the “Source” view of the editor will allow you to insert custom code into the order complete page, was well as allowing you to add more ekm tags to the page.

Another use for this is if you are using some kind of conversion tracker or affiliate scheme code. Such trackers generally require you to enter a line of code into the final page of your checkout procedure and this where you can add such code. Simply click on “Source” button and paste in the code that the conversion or affiliate company have provided you with below the existing content. Please note that if you wish to add Google Analytics tracking code, you can do this more easily using the “Google Tools” feature.

Below the Order Complete section of the checkout settings page is the checkout security section;

Onepageflow21.jpg

The “Enforce secure checkout” option in this section allows you to place the entire checkout process on a SSL protected https:// URL. It is important to note that is URL will always be a https://www.ekmsecure... URL, rather a secure version of the domain name you have associated to your ekmPowershop account.

This is not needed until the credit card stage (which is always secure). If you choose to enforce security be warned that any externally hosted images or scripts will generate a warning message to the customer. Examples of externally hosted scripts and images include, but are not limited to, Facebook like buttons, Google +1 buttons, Twitter icons and feeds, AddThis widgets and images or slideshows hosted on image storage sites such as Flickr or Photobucket.


« Back