Search Help:  
 
Enter keywords to search help.

Customizing Global Checkout button styles

Checkout Manager allows you to set global styles for your checkout buttons. This allows you to quickly set up styles for your primary and secondary checkout buttons. You can choose between default HTML form buttons or use custom CSS buttons where you select the font type and font color as well as button background color. If you want even greater control, you can customize individual checkout buttons including uploading your own images or switching to text links. You can also use a custom CSS file to have more control over the design of checkout buttons.

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 (see "P" figure 1)
  • 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 (see "S" figure 1)
  • 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.
Figure 1: Shopping cart page showing examples of two primary (Checkout and Keep Shopping) and one secondary button (Update). Note the "Keep Shopping" button has been individually customized to use an image (Continue Shopping) instead of the primary button style as with the "Checkout" button.

To edit the global button style for primary or secondary buttons:

  1. From the Checkout Manager main page, click the "Visual Customization" link.
  2. Select the "Configurable Styles" option.
  3. Scroll down to the "Checkout Buttons" area of the Global Styles tab.
  4. Select or enter options for the elements you wish to customize:
    • Default—displays standard HTML form buttons
    • CSS—allows you to select colors and font type (a preview of the button style appears below these fields)
      • Button Font:
        • Type: select a font type for use in the button.
        • Color: enter a hexadecimal color value (for example #0000FF for blue) or click the color picker link to select a color from a limited palette of colors for the font appearing in the button.
      • Button Background: enter a hexadecimal color value (for example #0000FF for blue) or click the color picker link to select a color from a limited palette of colors for the background of the button.
  5. Click "Save" when finished or click "Preview" to save and view your changes.
  6. Return to the Store Manager and publish your order setting changes when ready.

See Also


Was this article helpful?

Yes   No
Click to contact Customer Care for further assistance.