Blog » Running Ecommerce Store from Google Spreadsheet

Running Ecommerce Store from Google Spreadsheet

Google has recently released announced a Google Store Gadget that relies on Google Spreadsheets as the database in an attempt to make it easier for people to set up electronic shop on the world wide web with little effort and no cost (assuming you have SOME sort of presence on the ‘Net).  While this is definitely cheaper and somewhat easier to implement than most ecommerce solutions, it is not as easy as some anticipated it would (or could) be.

However, it is a great example of something they’ve been telling programmers for some time: use Google Spreadsheets as datasources. This example uses an engine (spreadsheets) that most computer users are familiar with to replace complicated databases for a rather simple solution.

After playing with it a bit I figured why not create a 3 step guide (more or less) to set this up.

 

  1. Create Google Checkout account for client (http://checkout.google.com/sell/)
    1. Save the Merchant ID for later use:
      image
  2. Create a spreadsheet in Google Docs (preferably in customer’s account). You can copy the sample template Google provides.
    1. Using "Share" pulldown on the top right corner of the spreadsheet header, you need to "Publish To The Web"
      image
    2. In the pop-up box check "Automatically republish when changes are made" and then click "Start Publishing"
      image
  3. Create and embed the required code into your website
    1. Into any website that accepts raw HTML - 
      1. Select the store configuration tool below for the desired size:
        1. Store Configuration Tool – LARGE
        2. Store Configuration Tool – SMALL
        3. Store Configuration Tool – TINY
      2. In the store configuration tool, enter the entire URL of your inventory spreadsheet (including the "?key=" portion) intot he "Data Source URL" field
      3. Enter the customer’s Merchant ID (from Step 1)
      4. In the store configuration tool, click "Preview Changes" to see a preview.
      5. Make any desired customizations
      6. When you like what you see, click "Get the Code" button
      7. Copy the code snippet
      8. Paste the code snippet for your gadget into your page
    2. Into Google Sites - 
      1. Sign in to Google Sites
      2. Choose the page you’d like to add your gadget to
      3. Click the "Edit Page" button
      4. To add your gadget:
        1. Chose "More gadgets…" from the "Insert" drop-down menu
        2. At the "Add a gadget to your page" prompt, select "Add gadget by URL" in the bottom left-hand side of the screen
        3. Enter the URL for the desired gadget:
          1. Large Store – http://checkout.google.com/seller/gsg/beta2/large-store.xml
          2. Small Gadget – http://checkout.google.com/seller/gsg/beta2/small-store.xml
          3. Tiny Gadget – http://checkout.google.com/seller/gsg/beta2/tiny-store.xml
        4. In the store configuration tool, enter the entire URL of your inventory spreadsheet (including the "?key=" portion) into the "Data Source URL" field
        5. Enter the customer’s Merchant ID (from Step 1)
        6. Click "Save" and you are done.
    3. Blogger, in a blog post - 
      1. Select the store configuration tool below for the desired size:
        1. Store Configuration Tool – LARGE
        2. Store Configuration Tool – SMALL
        3. Store Configuration Tool – TINY
      2. In the store configuration tool, enter the entire URL of your inventory spreadsheet (including the "?key=" portion) intot he "Data Source URL" field
      3. Enter the customer’s Merchant ID (from Step 1)
      4. In the store configuration tool, click "Preview Changes" to see a preview.
      5. Make any desired customizations
      6. When you like what you see, click "Get the Code" button
      7. Copy the code snippet
      8. From Blogger, create a new blog entry or edit an existing entry
      9. Click on "Edit HTML" and paste the code snippet for your gadget.
    4. Blogger, in a side bar - 
      1. Visit Blogger
      2. Select the "Edit Layout" section for your blog
      3. Click on "Add a Gadget"
      4. In the prompt, choose "Add your own" (at the bottom)
      5. Enter the URL for your desired gadget and click "Add by URL"
        1. Large Store – http://checkout.google.com/seller/gsg/beta2/large-store.xml
        2. Small Gadget – http://checkout.google.com/seller/gsg/beta2/small-store.xml
        3. Tiny Gadget – http://checkout.google.com/seller/gsg/beta2/tiny-store.xml
      6. In the store configuration tool, enter the entire URL of your inventory spreadsheet (including the "?key=" portion) into the "Data Source URL" field
      7. Enter the customer’s Merchant ID (from Step 1)
      8. Click "Save" and you are done.
      9. TIP: After adding the gadget, you can move your gadget around to different parts of your blog using the "Layout" section in your Blogger Account.
    5. iGoogle - 
      1. Go to iGoogle and click on "Add Stuff…" and in left column, click on "Add feed or gadget"
      2. Enter one of the following URLs and click "Add"
        1. Large Store – http://checkout.google.com/seller/gsg/beta2/large-store.xml
        2. Small Gadget – http://checkout.google.com/seller/gsg/beta2/small-store.xml
        3. Tiny Gadget – http://checkout.google.com/seller/gsg/beta2/tiny-store.xml
      3. Go back to your iGoogle page
      4. On your gadget, click the settings drop down and choose "Edit Settings"
      5. In the store configuration tool, enter the entire URL of your inventory spreadsheet (including the "?key=" portion) into the "Data Source URL" field
      6. Enter the customer’s Merchant ID (from Step 1)
      7. Click "Save" and you are done.

    That’s all there is to it! It took me 5 minutes to set up the following store: http://exhibita.com/shopping-cart.aspx. It took me a lot longer to write this up than to actually do it! If your needs are simple but you’d like to categorize your solutions better, you can create multiple pages that link to multiple spreadsheets (or potentially pages within a single spreadsheet) and just place the appropriate code on each page. The nice thing is that products placed into a cart on one page will follow you around to all the other pages just like in a real shopping cart.

    Of course this isn’t a proper replacement for a full-fledged ecommerce solution like AspDotNetStorefront but it certiainly will help a lot of people to integrate fairly single shopping carts into their blogs and websites.

    Running into problems? Try the Google Checkout store gadget forum

    We’d love to hear from you if you’ve implemented a Google Checkout Gadget; use the comments below to contribute to the ongoing conversation.

    Michael Gibbs
    Stalk Me...
    Latest posts by Michael Gibbs (see all)