Checkmark

Thank you for your feedback

Customize individual checkout buttons and links

Learn how you can edit the visual style of certain elements in your shopping cart, shipping, billing, and other ordering pages.

Article ID: SLN19033

The Checkout & Registration 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.
  • HTML - uses the web browser default style for form buttons; quick loading but not very appealing to shoppers.
  • 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.

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.

Customize individual button styles

  1. Sign in to your My Services page.
  2. Click the Store link.
    The Store link is under Control Panels
  3. Go to Checkout & Registration Manager.
    The Checkout & Registration Manager link is under Order Settings
  4. Go to Visual Customization.
    The Visual Customization link.
  5. On the Configurable CSS page, click the Checkout Buttons tab.
    The Checkout Buttons tab
  6. Select the button you wish to edit then click the Edit button.
    Select the button you wish to edit
  7. In the Customize Checkout Buttons and Links section:
    • Edit the name in the Button Label field to appear on the button - 25 characters maximum (if applicable, does not apply to image button style).
    • 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 se t 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).
        Note: If Image is selected, click the Browse and Upload buttons to upload your image.
    The Customize Checkout Buttons and Links section
  8. Click the Save button when finished or click Save & Preview to save and preview your changes.
    The Save & Preview and Save buttons
  9. Repeat steps 6-8 for any additional buttons you wish to edit.
  10. Return to Store Manager and publish your Order Settings.
    The Publish Order Settings link.

See Also: