My favorites | English | Sign in

Google Checkout

Customizing the Shopping Cart Widget's Appearance

Note: This is the latest documentation. The previous version of this page is also available.

This page lets you test CSS customizations for the shopping cart. The top of the page displays a product that can be added to the cart. The form further below lets you enter CSS styles to customize the cart that appears at the top of the page. For example, if you enter background:#ff7878 in the first form field, the shopping cart's top bar will change color to a light shade of red. When you update the form, the page also dynamically updates to display the CSS and JavaScript code that you would need to add to your site to make the cart appear the same way on your site.

Product for Sample Shopping Cart

Google T-Shirt
Price: $12.99
Shipping: $4.99

Add to Cart


Form for CSS Customizations

CSS styles:

 Styles for Title Bar

Title bar:
The top bar of the widget, which appears above the list of items in the cart. Clicking on the top bar toggles the widget to expand or collapse.
Arrow:
The arrow in the top bar of the widget. The arrow points to the right when the cart is collapsed and down when the cart is expanded.
Title:
The message that appears in the header element.
Summary:
The message that appears next to the cart identifying the number of items in the cart.

 Styles for Item Rows

Widget body:
The portion of the widget that is hidden or shown when the user clicks on the widget's top bar. The widget's body includes the entire widget with the exception of the top bar.
Item list:
The list of items in the shopping cart. The widget list includes the entire widget with the exception of the top bar and the footer, which is the row that identifies the cart total and displays the Google Checkout button.
Item row:
A row in the item list that describes an item.
Item row - quantity column:
The column of the item list that displays the quantity of each item in the list.
Item quantity box:
The text box that displays the number of units ordered for an item in the cart.
Item row - details column:
The column of the item list that displays the name and description of the item.
Item name:
The name of an item in the shopping cart. This field displays in the googlecart-widget-details-column.
Short item details :
Custom attribute information that is shorter than 60 characters. This information displays below the item title.
Full item details:
Custom attribute information that is 60 characters or longer. This information displays below the item title. If the item details are 60 characters or longer, the shopping cart displays them in a smaller font than if they are shorter than 60 characters.
Message: Item removed from cart:
A message that displays after the user removes an item from the cart.
Item row - image column:
The column of the item list that displays an image of the item.
Item image:
The item's image.
Item row - price column:
The column of the item list that displays the price of the item.
Item price:
The price of an item in the shopping cart. This value displays in the googlecart-widget-price-column.
Link: Remove item from cart:
A linked message that the user can click to remove an item from a cart.
Link: Return item to cart:
A linked message that appears after a user removes an item from a cart, enabling the user to return the item to the shopping cart.
Message: Cart is empty:
A message that appears indicating that the cart is empty.

 Styles for Footer (Total Row)

CSS code to add to your page:

« Previous
(Controlling the Widget's Location)		 Next »
(Customizing the Shopping Cart Widget's Behavior)