BuzzMaven Internet Marketing ConsultantScott Clark Web Marketing Consultant
1-859-951-4414 or 1-888-668-4393
Lexington metro area: 1-859-268-0664
...or use my online form anytime

Adding Google Checkout Gadget to Wordpress

by Scott Clark on July 31, 2009

The Google Checkout Store Gadget is a game-changer for small business.  In combination with the excellent Google Docs tool, this promises to make creation of small ecommerce stores easier than ever.  Google rolled out the technology preview in April, and it is now fully in Google Labs now.

As many of you know I’m a big Wordpress fan, and think that, when implemented with the right set of plugins and a strong CMS theme, it’s all a small business would ever need to create a powerful web presence.

So for those small businesses wanting to add basic store features using Google Checkout Gadgets  to their Wordpress site, here is a basic set of guidelines.

  1. Get your Google Checkout Account set up if not already done. You’ll get a Merchant ID from that for use in these checkout processes.   Take note of that ID, as you’ll need it in these steps.
  2. You’ll need to enable the “unsigned carts” feature on Google Checkout (uncheck the “only post signed carts” box.)
  3. Grab the spreadsheet template. This is on Google Docs.  Save a copy in your account.   The format for this spreadsheet is very simple.
  4. Decide how wide your posts area is, as you’ll want to try to fit the checkout widget in the space.
  5. Upload your product images to your Wordpress media folder.  Take note of the file location URLs so you can refer to them in the catalog spreadsheet*.  Google Checkout gadget only offers one image size, so I recommend that you start out with a small-medium image and then size it up to fit your need.  Remember, photographs are critical to ecommerce success!
  6. Make the spreadsheet your own, adding products, options, descriptions and such.   In here, you’ll refer to your media images.
  7. Click “share” and then “publish as a web page” - check the “Automatically re-publish when changes are made” and finally “start publishing” – the URL for sharing will be provided (see figure 1)  Please take note of that URL as you’re going to need it in the next step.    When you share, be sure not to select “also allow them to edit” … you don’t want anyone tweaking your catalog!
  8. Google Docs, Share as Webpage

    Figure 1: Google Docs, Share as Webpage

  9. Decide which size you want for your store configuration tool… Since we’re using Wordpress, you’re going to use the “HTML” mode.
  10. No matter which size you choose, once you are looking at the configuration tool, you’ll enter the URL you obtained in step 7, as well as your merchant ID from step 1***.
  11. Click on “get the code” and you’ll get a busy slice of script code that will go into your wordpress page/post.
  12. Wordpress has a nasty habit of munging up scripts, so I recommend you consider using the “wp-noscript” plugin to protect the area in which the script is inserted.
  13. If you wish to add the code to your sidebar, you’ll use the  “TINY version” of the widget and set it up the same way, with the share URL and the Merchant ID…But to post it to your site, you’ll Wordpress Appearance->Widgets function, choosing the “TEXT” widget to insert your HTML provided by Google Checkout Widget.  The smallest size that seems to work is around 200-220 pixels wide.  Below that the buttons start flaking out.  Here is where the size if your item images start to matter.
  14. Now that you’re live, you can edit your product inventory, pricing, pages, images and such by just adjusting the google spreadsheet.

Tips:

* When grabbing the image URLs: Make sure to use the file-upload location (ends with a “.jpg”) and not the media page location.  Wordpress will give you the proper URL in the “upload media” page.  It usually looks like this:
“http://www.domainname.com/wp-content/uploads/filename.jpg”

** There are no multiple-options for this tool, so if you have multi-options, you’ll need to add them all in a bit of a hack…. so let’s say you had small,medium,large and blue, red, green.  You’ll need to create a list like this in the options:
blue small
blue medium
blue large
red small
red medium
red large
green small
green medium
green large

*** If you get an XML error when clicking on “checkout with Google checkout” your merchant ID has a typo in it.

Let me know if you see any issues with my instructions.  I may put together a plugin for parts of this soon, but it’s pretty simple as-is!

Bookmark and Share

{ 1 trackback }

ECommNewz » Blog Archive » Adding Ecommerce Features To Your WP Blog
08.05.09 at 8:15 am

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>