Making the move to Checkout Manager

May 12, 2006 | In Best Practices |

A merchant left a comment on a recent post saying that while the Checkout Manager functionality looked great, they felt the process of moving to Checkout Manager was slightly intimidating. The purpose of this post is to de-mystify the process and show the steps involved in moving to Checkout Manager.

The minimum steps for any merchant involve first setting the test cookie, and testing your new checkout flow by placing a test order. Then when ready, enable Checkout Manager, and publishing the Store Editor and your order settings. This would give your store a functioning checkout flow using Checkout Manager with all of the default settings. Of course, if you modified your current checkout pages in Order Forms, or you wish to take advantage of the ability to customize the design of your checkout pages to match your site, then there are a few more steps.

  • Select flow settings: involves choosing single or multi-page checkout, combining shipping and billing pages, and showing or hiding the Order Review page. Version 1 checkout flow (also called the old checkout) shows the shopping cart section and shipping information. Version 2 checkout flow (also called the new checkout) shows a cart page, separate shipping and billing pages, and the Order Review page.Either one of these flows can be recreated in Checkout Manager. However, you also have the capability of customizing your checkout flow in ways that were not possible with the previous checkout flows. You can build the same checkout flow you have now, or choose a new flow that may work better for your store. Learn more about flow settings.
  • Select visual design settings: involves setting colors for section header, borders, fonts, and buttons. You can use the Customizable Styles option to set the most common design elements of your checkout pages. If you built your site using the Store Editor, and you wish to use the same colors found in your site, then go to the Variables page in the Store Editor and copy the values for use in Checkout Manager. Learn more about customizing the visual design.Tip: The Store Editor displays color values in RGB format (for example 51 153 153), while Checkout Manager uses hexadecimal format (though the color picker does have fields for RGB color values). You can switch the Store Editor to display hexadecimal color values in the Advanced mode of the Store Editor by clicking the red arrow in the Editor toolbar, selecting the Controls button, and selecting “Hex” from the Color Code Input menu. This will allow you to copy color values from Store Editor and paste directly into Checkout Manager.You will also likely wish to upload a company logo to your checkout pages, but you can choose to include full HTML to display header, side bar, and footer regions to wrap your checkout pages.
  • Add special messaging from your current checkout pages (if applicable): If your current checkout pages display any custom content to buyers such as your shipping or refund policies, you will need to copy that messaging from Order Form fields to Checkout Manager. Most of this content will likely be inserted into the Page Message field in Checkout Manager. You do have the ability to create new custom fields though so your custom messaging can be placed closer to the sections where the information is needed.

Before enabling Checkout Manager, merchants should set the test cookie and place test orders using the new checkout pages. This allows you to test the entire checkout process along with any customizations you have made so you can be certain your pages are exactly how you want them before making them available to buyers. Just be sure to cancel any test orders as these will be included when calculating your transaction fees.

If you want some inspiration of the kinds of customizations that are possible with Checkout Manager, check out http://www.sophiebags.com and place an item in the cart. If you have custom checkout pages that you want to show off, post the link to your site in the comments of this post.

Paul Boisvert
Yahoo! Small Business

19 Comments »

RSS feed for comments on this post.

  1. Just finished my customized checkout manager. I must say, this post made everything a lot easier to understand. Thank you!

    You can check it out here http://www.barkslope.com

    Comment by George Zlatin — May 14, 2006 #

  2. When I checked out George’s site, I was flashed with a “This page contains both secure and nonsecure items” dialog. Thought you’d like to know about this.

    Comment by Greg Baskin — May 14, 2006 #

  3. Good catch Greg. It looks like the header image is not referencing a secure location (https). Since the merchant in this case is using the one page checkout, the cart and ship/bill page is secure. Hence any images included in the page must be served from a secure directory (https) or else a warning appears to buyers.

    Merchant Solutions merchants will need to create an SSL directory in their Web Hosting account and upload any images to that directory. Then any image references in headers,footers, or other checkout regions, need to refer to images in the ssl directory (images will be served from https so you can see they are secure). See the following help document for instructions:

    http://help.yahoo.com/help/us/webhosting/ssl/ssl-02.html

    Legacy merchants can upload to the “Files” area.

    Comment by Administrator — May 15, 2006 #

  4. Thank for the help Paul & Greg! I followed the instructions above but now I get a different security warning “the name on the security cert is invalid or does not match th name of the site”. Is there someway to fix this? Thanks again.

    George

    Comment by George Zlatin — May 15, 2006 #

  5. Merchants please note: SSL Certificates are not issued for individual domains. If you are referencing images uploaded to your Web Hosting account, please reference any images at the following format:

    https://s.hostingprod.com/@your-domain.com/ssl/your-secure-image-name.gif

    where “your-domain.com” is replaced with your domain and “your secure image name” is replaced with the name of the image. Note: there may also be a slightly different format at the start of the url depending on the server on which your files reside. Click the image you uploaded in the File Manager to get the actual URL to use.

     

    Do not use “http://site.your-domain.com/ssl/your-secure-image-name.gif”. This URL will work but will cause an invalid security certificate warning.

     

    To get the correct url for your secure image files, click the file name from within File Manager and copy the url appearing in the address bar of your browser.

    Comment by Administrator — May 15, 2006 #

  6. Good work outta you, Sophi’s Bags. I too was able to get similar fine results with the new checkout Manager customization features. Take a look…http://www.atkmchesssets.com. Just drop an item in the shopping cart and follow it through a couple of pages. Then cancel the order before confirmation.

    Comment by Stephen Arnold — May 18, 2006 #

  7. Can’t miss those purple buttons! Nice job making it clear to buyers what to do next.

    Any other merchants have new checkout pages they want to show off? Let’s see ‘em.

    Comment by Administrator — May 19, 2006 #

  8. Thank you so much for publishing this! I left the original message and I appreciate you acting on it. I’m swamped right now, but plan to implement this as soon as I have some free time.

    Comment by Lynn — May 26, 2006 #

  9. I’ve upgraded to Checkout Manager and am very happy with the results.

    I do have one issue. For some reason the shipping is no longer being automatically figured. The visitor selects a shipping option and then a note appears at the top saying “Shipping charges may be added.”

    Does the new Checkout Manager function no longer automatically include shipping cotst?

    Comment by Adam — July 21, 2006 #

  10. Hi Adam,

    Don’t see your store URL in your comment so I can’t check your store to verify this but dollars to donuts says your setting in Shipping Manager > Settings > Shipping Calculations is set to “Tell customers shipping may be added later.” Switch that to either “Calculate in real-time, error if no match” or “Calculate in real-time, ok if no match” and publish your order settings. That should resolve this issue.

    Paul

    Comment by Administrator — July 21, 2006 #

  11. That was it. Thanks for the very quick response.

    Comment by Adam — July 21, 2006 #

  12. Can you explain why a merchant should move over to Checkout Manager if he is already using the Order form? I mean, can you list the benefits of new Checkout Manager.

    Thanks,
    -Milind

    Comment by Milind — September 6, 2006 #

  13. Hi Milind

    The benefits of Checkout Manager are outlined in the following help document:

    http://help.yahoo.com/help/us/store/manage/checkout/migrate/migrate-02.html

    Basically it comes down to merchants having much more control over the flow of your checkout pages and more control over how those pages look. In earlier versions customizing the cart page may have been very easy in the Store Editor, but customizing the look of subsequent pages in checkout was not possible. Check out Sophie Bags for a great example of the customization that is possible.

    Paul

    Comment by Administrator — September 6, 2006 #

  14. I dont know why I was having such a hard time with the checkout manager, but I finally figured it out! The hardest thing to figure out for me was how to make it secure. I never realized how easy it was untill I did it. Check it out http://www.bowwowsmeows.com

    Comment by Dee — September 17, 2006 #

  15. Looks great Dee. Glad you figured it out.

    Merchants–If you are receiving errors about non-secure items when going to your checkout pages, make sure any images (or other files) used in your checkout pages, call files from a secure directory. For example, if you are using the same custom header from your site in your checkout pages, you will need to upload the same images from the header to a secure directory in your Web Hosting account. For legacy store merchants, ensure the path to files uses “https” in the url so your files will be secure.

    Paul

    Comment by Administrator — September 17, 2006 #

  16. I don’t know if this is still an active post, but I’ve upgraded to Checkout Manager and I’m frustrated that shipping charges do not get calculated until after a person buys an item if they don’t click “apply” on the checkout screen. Is there a way to have at least the default shipping always appear unless a customer changes it? This is very irritating. Thanks… Scott

    Comment by Scott — December 31, 2007 #

  17. Scott–With Checkout Manager you can choose to display the Shipping Calculator in the Shopping Cart page. This allows shoppers to check shipping rates even before proceeding to check out. Then the shipping rate would be displayed if they went to checkout and supplied a zip/postal code.

    Paul

    Comment by pboisver — January 2, 2008 #

  18. I’m customizing the checkout manager with my own header and footer - but I’m not able to remove the yahoo footer. Is there a way to remove the yahoo footer and only use my custom footer? thanks - Dave

    Comment by Dave — May 29, 2008 #

  19. Dave–removing the Yahoo! footer is not possible as this would violate Yahoo! policy given that checkout pages are hosted on the Yahoo! domain.–Paul

    Comment by pboisver — May 30, 2008 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Disclaimer and Reminder. The opinions expressed here are not necessarily the opinions of Yahoo! and we assume no responsibility for such content. Yahoo! may, in our sole discretion, remove comments that are off topic, inappropriate or otherwise violate our Terms of Service. Please do not post any private information unless you want it to be available publicly and never assume that you are completely anonymous and cannot be identified by your comments.

Copyright © 2006 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.
Copyright © 2006 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service