All Collections
Express Checkout
Change how the Express Checkout button looks
Change how the Express Checkout button looks

How to set colors, text, effects, and icons for your Express Checkout button.

Vikrant Sant avatar
Written by Vikrant Sant
Updated over a week ago

Basic settings

1. Button options

Customize various button options such as text, button background color, button font color, and corner radius.

2. Icons

Choose a custom icon to fit your need or none at all. Our current options are: lock, baseball, arrow, mountain, bag, shopping cart, and no icon.

3. Hover effect

Choose an effect for the button between a fade out or no effect. You can hover over the options to view them. You can also toggle displaying payment methods below the Express Checkout Button.

PeachPay can also automatically match the font style of a webpage. Toggling this will disable the current PeachPay font-family, font-size, font-weight, and transformation-text and use the styles of the website.

4. Preview

Use the preview to see what your changes to the Express Checkout button will look like as you edit it.

Button display by pages: Product page

5. Product page

PeachPay can be enabled on product pages for easy checkout.

You can customize the width of the button with 220px as the default.

6. Alignment

Set the alignment of PeachPay on the product page. The example below shows the left alignment option on a product page.

7. Position

Choose to place PeachPay before the Add to Cart button or after it. The example below shows a before Add to Cart position.

Button display by pages: Cart page

8. Cart page

PeachPay can be toggled on and off in the shoppers cart. On will show PeachPay like in the example below, off will not show PeachPay.

The width of the button can be customized defaulting at 220px.

Alignment can also be customized. The example below shows a full alignment.

9. Button display by pages: Checkout page

PeachPay can also be toggled on and off on the checkout page.

The width of the button can be customized with the default size as 320px.

You can use the Header text section. The text will display above the PeachPay checkout area as shown below.

The same can be done for the Additional text section which is also shown below.

10. Button display by pages: Mini/sidebar cart

Enable or disable PeachPay in the mini and/or sidebar cart.

Video: Product, cart, checkout, and mini cart buttons

Button display by pages: Floating button

11. Appearance

PeachPay can also take the form as a persistent floating button under appearance it can be toggled on and off.

You can select a custom icon, icon size, and button size.

The preview window will show you what your changes to the floating button look like.

12. Position

The floating button can take a variety of positions depending on the settings the default is a bottom gap and side gap of 45px each. You have the option to choose between placing the button on the bottom left or bottom right of the page.

The example below shows off the floating button on a webpage and what the button looks like when clicked on.

Video: Floating button

Did this answer your question?