When working in ecommerce, conversion is king. One common way to encourage conversion is to style your shopping cart to match your site so you have consistency with your site pages and there is no shock to your customers when they hit the shopping cart. This provides a continued look and feel and can provide trust to your shoppers so they feel comfortable to buy from your store. On one of my recent projects I found a quick way to take this ideal a step further.
Paypal… loved by some hated by others. Over the last couple of years I have seen them make some huge strides in regaining market trust and a better image. I frequently speak with a lot of ecommerce merchants that are just getting started and use paypal as their processing solution due to simplicity and a fairly reasonable pricing structure. The site I am currently working on falls into this category. As I was working to customize their cart I found a nice way to customize your paypal payment screen to attempt to retain shoppers and hopefully lower abandonment by maintaining the same look and feel as the site and the initial check out pages from their Yahoo! store.
1) Go to your paypal account and log in. Once logged in we will click on “Profile” in the top main navigation bar. Once on the profile page look in the third column labeled ” Selling Preferences” and locate ”Custom Payment Pages”. This is where we can style our paypal page to more closely resemble our Checkout screens and site.
2. ) Now that we have accessed the “Custom Payment Pages” we are going to click on “Add”. This is how we create our own custom styled version of the paypal page.
3. ) Now we can add some basic info to stylize our payment page. I used a browser add on called “eyedropper” for chrome to determine the Hex code of the colors for my checkout screen so I can style to match. Also I had to upload my desired header image into the “ssl” directory of the account in order to display my own image securely without security warnings. A quick call to your web hosting support team should be able to explain this or if you use Yahoo! contact me and I can provide more complete instructions. After adding the appropriate hex color codes and the proper url for the ssl hosted header image a quick preview should show if your on the right track.
4. ) now that this is created all we have to do is save and return to our “custom payment pages” section and select the new payment screen { I named mine cdr } and click “set as primary”. This whole process took me approximately 15 minutes and it has a much better look than the standard page. I will be tracking this page through the analytics I have installed and will compare the shopping cart abandonment with other standard pages soon so check back for updates.
I hope this is helpful in your ecommerce adventures and would appreciate your feed back and comments.
