The Checkout Manager allows you to set the button style for each button in your checkout pages. You can choose between four styles:

• CSS: quick loading and can be customized using the Global Checkout Button styles or by uploading a custom CSS and editing the attributes for primary and secondary button classes (see 3 figure 1).
• HTML: uses the web browser default style for form buttons; quick loading but not very appealing to shoppers (see 1 figure 1).
• Text link: quick loading but may not be prominent enough visually for critical primary buttons such as "Place Order" and "Checkout" (not shown).
• Image: allows you to match the look of your site and get the shopper's attention with custom buttons; may cause problems if the file size is too large to be fast loading or if the image fails to load (see 2 figure 1).

Your custom checkout pages contain various buttons that perform actions such as allowing a buyer to navigate through your checkout flow or edit the information on checkout pages. All buttons are grouped into two categories: primary or secondary. This grouping allows you to edit buttons that perform similar actions and apply a consistent style to all buttons in that category.

Primary Buttons—main buttons that help user navigate through your checkout pages:

• Checkout—appears on the shopping cart page and takes user to shipping page.
• Continue—appears on shipping and billing pages and takes shopper to next step.
• Keep Shopping—appears on the shopping cart page and returns the shopper to the product page for the item last added to the cart.
• Place Order—appears on the order confirmation page or on the one-page checkout to complete the checkout process.

Secondary Buttons—auxiliary buttons that allow editing of checkout information:

• Update Quantity—appears in shopping cart section and allows shopper to update item quantities.
• Edit—appears in shipping and billing section of order review page and allows shopper to return to edit this information.
• Apply—appears in shipping calculator and coupon section and allows shopper to update their zip/postal code or apply a coupon to their order.

To customize individual button styles:

1. From the Checkout Manager main page, click the "Visual Customization" link.
2. Click "Configurable Styles".
3. Click the "Checkout Buttons" tab.
4. Select the button you wish to edit and click the "Edit" button.
5. Edit the name to appear on the button—25 characters maximum (if applicable, does not apply to image button style).
6. Select a button style option:
   • CSS: uses CSS to define a button; the style properties are set in the Checkout Buttons section of the Global Styles tab.
   • HTML: uses the default browser style for form buttons.
   • Text link: creates a text link; the style is set in the Text Links section of the Global Styles tab.
   • Image: uses an image you upload for the button (maximum 175 width x 25 height, maximum file size 1.5KB).
7. Click "Save" when finished or click "Preview" to save and view your changes.
8. Repeat steps 4-7 for any additional buttons you wish to edit.
9. Return to the Store Manager and publish your order setting changes when ready.

See Also

• Customizing Global Button Styles