Controlling the Widget's Location

The shopping cart's default behavior is to appear in the top-right corner of the browser window. Please note that, by default, the cart is attached to the browser window and not to your web page. As such, the shopping cart widget will remain in the top-right corner of the window even if the user scrolls down the page.

To attach the shipping cart widget to a particular location on your web page, add id="googlecart-widget" to a <div> tag where you want the shopping cart to appear. (You can also insert a new <div> tag on the page that will contain the shopping cart.)

<div id="googlecart-widget"></div>

Please note that modifying the widget's location will not change the appearance of the widget itself. (The CSS and JavaScript customizations do let you change the widget's appearance.)

The shopping cart widget expands and collapses to display the products in the cart. When collapsed, the cart is 290 pixels wide and 29 pixels high. Clicking on the cart's top bar triggers the cart to expand and display its contents. The images below show the standard top bar for the shopping cart as well as the expanded shopping cart:

Shopping cart's top bar (collapsed cart)

Expanded cart

Changing the appearance of the widget's top bar

Note: This section is only relevant to your shopping cart implementation if you want to replace the standard top bar of the shopping cart to a top bar of your own design.

As noted earlier, you can use CSS customizations to change the appearance of the widget's top bar. However, you also have the option of creating a link or icon that can be clicked to display the shopping cart contents. This option allows you to completely replace the default top bar with a top bar of your own design.

To identify an element on your page that can be clicked to expand or collapse the shopping cart, add id="googlecart-widget-control" to a <div> tag that surrounds that element. This change prevents the standard shopping cart top bar from displaying and instead enables a user to expand or collapse the shopping cart by clicking on the element that you have designated.

For example, in the page pictured below, the user can click the underlined words View cart to expand and collapse the shopping cart.

Customized shopping cart top bar (collapsed cart)

Customized shopping cart top bar (expanded cart)

The HTML snippet below displays the "View cart" link in the example:

<div id="googlecart-widget-control" googlecart-widget-control-align="left"
     style="text-decoration:underline;height:30px">View cart</div>

Guidelines for customizing the shopping cart's top bar

The following guidelines explain how to insert a customized icon or link that will expand and collapse the shopping cart. The guidelines also explain how to dynamically display the number of items in the shopping cart or the total cost of those items.

• The googlecart-widget-control ID must be assigned to a <div> element. If the user clicks another type of element, such as an image, to expand or collapse the cart, enclose that element inside a <div> tag.

  <div id="googlecart-widget-control">
    <img src="my_custom_shopping_cart_top_bar.jpg">
  </div>
  

• By default, when the shopping cart expands to display its contents, the contents appear right-aligned beneath the custom header. You can adjust the alignment by adding the googlecart-widget-control-align element to the same <div> tag that has the googlecart-widget-control ID. Valid attribute values are left, center and right. (In the example above, the shopping cart contents are left-aligned.)

  <div id="googlecart-widget-control" googlecart-widget-control-align="left"
       style="height:30px"><img src="my_custom_add_to_cart.jpg"></div>
  

• To ensure proper display across different browsers, define either the width or height of the element with the googlecart-widget-control ID.

• You can include an item count or cart subtotal by adding elements with the IDs googlecart-item-count and googlecart-subtotal anywhere on your page. As a customer adds items to the shopping cart, these values will dynamically update to reflect the most up-to-date figures. For example, in the image below, the shopping cart's top bar displays the number of items and total cost in parentheses:

  

  The HTML snippet below shows how the item count and subtotal are inserted:

  <div id="googlecart-widget-control" googlecart-widget-control-align="left"
       style="text-decoration:underline;height:30px">
       View cart (<span id="googlecart-item-count"></span> - 
                  <span id="googlecart-subtotal"></span>)
  </div>