Skip to content

Checkout Button Module

The Checkout Button Module allows you to fully customize the appearance and behavior of the checkout button in your cart drawer. Add trust elements like security icons and payment logos to increase conversion.

Checkout Button Module

Toggle the Checkout Button on or off using the Enable/Disable button. When enabled, your customized checkout button replaces the default button in the cart drawer.


Customize the text displayed on the checkout button.

  • Default: “Secure Checkout”

Common alternatives:

  • “Proceed to Checkout”
  • “Complete Purchase”
  • “Buy Now”

Customize the visual appearance of your checkout button.

Click Change colors to expand the color settings:

  • Background Color: The button’s fill color
  • Text Color: The color of the button text and icons

Control the roundedness of the button corners.

  • Default: 8px
  • Range: 0-80px

Lower values create sharp corners; higher values create rounded buttons.

Control the internal spacing of the button.

  • Default: 14px
  • Range: 0-24px

Higher values create a larger, more prominent button.


Add visual elements to your checkout button.

Display a lock icon before the button text to indicate secure checkout.

  • Default: Enabled
Lock Icon Example

Display an arrow icon when customers hover over the button, indicating the action will proceed forward.

  • Default: Enabled
Arrow Icon on Hover

Enable smooth hover animations for a more polished, interactive experience.

  • Default: Enabled

Add trust signals below the checkout button to increase customer confidence and conversion rates.

Display a reassurance message below the checkout button to increase customer confidence.

  • Default: Enabled
  • Default Text: “Secure checkout powered by industry-leading encryption”

Examples:

  • “30-day money back guarantee”
  • “Free returns • Fast shipping”
  • “Trusted by 10,000+ customers”

Display accepted payment method logos below the button to reassure customers their preferred payment option is available.

  • Default: Enabled

Select which payment logos to display:

Logo Payment Method
Visa Visa
Mastercard Mastercard
Amex American Express
PayPal PayPal
Amazon Amazon Pay
Bitcoin Bitcoin
CB CB (Carte Bancaire)
Cirrus Cirrus
Delta Delta
Direct Debit Direct Debit
Discover Discover
JCB JCB
Klarna Klarna
Maestro Maestro
Solo Solo
Switch Switch
Visa Electron Visa Electron
Western Union Western Union

Add your own payment method logos that aren’t in the default list.

  1. Click Add Payment Logo
  2. Enter the Payment Method Name
  3. Upload a PNG or SVG image

This is useful for regional payment methods or newer providers not yet in the default list.