Please let us know how this article can be improved.
Choose all that apply.*
Report a bad link
Out of date (instructions or screenshots)
Missing detail
Other
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.
Jun 20, 2024
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.
On the Configurable CSS page, click the Checkout Buttons tab.
Select the button you wish to edit then click the Edit button.
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.
Click the Save button when finished or click Save & Preview to save and preview your changes.
Repeat steps 6-8 for any additional buttons you wish to edit.
Return to Store Manager and publish your Order Settings.