Getting started

A single paragraph guide to shopping cart integration

The Google Checkout shopping cart is a new Google Checkout feature that allows you to add a shopping cart to your website quickly and easily.


Here is how you get up and running:
  1. If you don't have Google Checkout merchant account sign up now, than come back to this page.
  2. Follow this link to enable unsigned carts.
  3. Follow this link to generate code for 'add to cart' buttons.
  4. Add the generated code to a webpage. See if it works.
    • Note that you get two snippets of code generated, the second snippet (the one starting with <script> ....) can be added anywhere on the page (preferably right before the closing </body> tag) but only once per page.
  5. If you are having trouble, ask the forum for help, include the link to the page you edited...


Just a bit more technical guide to shopping cart integration


This Getting Started document is intended to give you a quick outline of what is required to get up and running with the cart.
For more information, please see the Reference Documentation as well as the Customizing UI and the Configuring shipping documents.

Step 1 - Merchant account setup


Before you can use the cart, you'll need to ensure that your merchant account is set up to accept unsigned xml cart posts. To do this, follow the instructions on this page.

Step 2 - Include the Google Checkout shopping cart Javascript


Adding the cart to your web store is easy. All you'll need to do is copy and paste a small Javascript snippet on every page on your site that you plan to use the cart.

Place this snippet of code as the last child of the <body> tag (i.e. directly above the </body> tag) of your HTML page.

<script id="googlecart-script"
   type="text/javascript"
   currency="USD"
   src="http://checkout.google.com/seller/gsc/v2_2/cart.js?mid=MERCHANT_ID"></script>

Make sure to replace MERCHANT_ID with your actual merchant ID (?).

Note for UK merchants in the snippet above replace currency="USD" with currency="GBP".

Step 3 - Annotate your pages with Google Checkout shopping cart keywords


Next, you'll need to annotate your website so that the shopping cart can understand what products are on each page and find information related to these products. The best way to show you what we mean is by example. Let's say one of your web pages is selling a baseball bat. Your annotated HTML may look something like this:

<div class="product">
   <img class="product-image" src="baseball_bat.jpg"/>
   <span class="product-title">Baseball Bat</span>
   Price: <span class="product-price">$9.99</span>
   Shipping: <span class="product-shipping">$4.99</span>
   <span role="button" tabindex="0" class="googlecart-add">Add to Cart</span>
</div>

Pay particular attention to the bold portions of the code above. This portion of the code tells the cart where to look to find the product image, title, and price. Don't forget to surround product-image, product-title, and product-price within an element which contains class="product", or the cart won't know where to look. 

Also notice the class="googlecart-add" on the <span> tag. This tells the cart which element should be the clickable element to add the item to the cart. If you'd like to use the "Add to cart" button image from Google, simply replace the last line with:

<div  role="button" alt="Add to cart" tabindex="0" class="googlecart-add-button"></div>

The following attributes allow keyboard access to the add-to-cart buttons:
role="button" alt="Add to cart" tabindex="0"
By including them you are making your store accessible to people with disabilities. 

Please note you are not limited to <div> or <span> tags. You can use any html tag, including <input> tags. Also note that you can easily include several products on a single web page. Here is an example that uses a <table> tag that contains multiple products:

<table>
  <tr class="product">
    <td><img class="product-image" src="widget1.jpg"></td>
    <td class="product-title">Great Widget #1</td>
    <td class="product-price">$33.00</td>
    <td>
      Shipping: <span class="product-shipping">$3.99</span>
    </td>
    <td><a class="googlecart-add">Add to Cart</a></td>
  </tr>
  <tr class="product">
    <td><img class="product-image" src="widget2.jpg"></td>
    <td class="product-title">Great Widget #2</td>
    <td class="product-price">$14.00</td>
    <td>
      Shipping: <span class="product-shipping">$4.99</span>
    </td>
    <td><a class="googlecart-add">Add to Cart</a></td>
  </tr>
</table>

Step 3a - Custom attributes

Do you have additional product attributes that you'd like to define for each product? For example, do you have various sizes or colors for the products you sell? For each piece of information you want to appear in the shopping cart, simply add the following: class="product-attr-xxx" where xxx is a short (one or two words, no spaces) description of the purpose of the tag. For example, to allow the customer to select the size of your product add a <select> tag annotated by product-attr-size:

<div class="product">
  ...
  <select class="product-attr-size">
    <option value="large">large</option>
    <option value="small">small</option>
  </select>
  ...
</div>

You can use all <input> tags, including hidden tags and <textarea> tags in a similar fashion.

For more information on available annotations and how the annotation value is computed for different tags, see the section called "basic markup" in the Reference documentation.

That's it... You're Done!


You have successfully added the Google Checkout shopping cart to your store. Of course, Google Checkout would greatly appreciate your early feedback. Please contact us by posting on the cart developers forum.

Enjoy!

The Google Checkout Team