[warning]Please note the below guide is for users who are comfortable working with HTML.[/warning]If you're using PayPal Express or Google Checkout, the following instructions will not work.
If you would like us to do this for you, please contact us accordingly.
In this guide, we have used our Chameleon template as an example when editing the buttons in the cart page. By default this is how the cart page generally looks:
EKM gives you the ability to be able to change the three lower buttons:
- Continue Shopping
- Update Cart
The steps below will walk you through how you can use your own images to replace the default buttons:
1. The first step is to create the three images that you would like to use.
2. Once you have created your new buttons within your chosen image editing software, you need to then upload the images in to your online shop. To do that simply log into your EKM account and go to Design > File Manager.
3. Once in the File Manager, click on to the Design tab and upload the 3 images.
[more]Help on how to upload images into the file manager can be found here.[/more]
5. Once the images have been uploaded you will be able to obtain their path's which will look something like the examples below, depending on what you have called your image file names:
6. The next step is to click on the yellow edit button beside your cart buttons. You can get here by putting through a test order on your shop.
7. When the Edit Webpage screen appears, you will then be required to click on the Source button to view the HTML of the page.
8. Simply delete the ekmTags for:
And replace it with:
<table width="425" border="0" cellspacing="30"> <tr> <td width="135"><a href="index.asp"> <img src="/ekmps/shops/myshop/resources/design/continue.png" width="135" height="55" border="0" /></a></td> <td width="139"><a href="index.asp?function=CART"> <img src="/ekmps/shops/myshop/resources/design/update.png" width="135" height="55" border="0" /></a></td> <td width="137"><a href="index.asp?function=CHECKOUT"> <img src="/ekmps/shops/myshop/resources/design/checkout.png" width="135" height="55" border="0" /></a></td> </tr> </table>
The code above uses a simple table with the images that have been uploaded to the file manager.
Each image needs the relevant hyperlink associated to it within the code (as the above sample shows). You will need to replace the code in bold and underlined with the image URL's found in the design section of your file manager that you uploaded earlier.
Continue: index.asp This will return the customer back to the home page.
Update: index.asp?function=CART This will update the cart if the customer changes the quantity.
Checkout: Checkout: index.asp?function=CHECKOUT This will take the customer through to the checkout pages.
An example of a cart page with custom checkout buttons is illustrated below: