---
url: >-
  https://acquirer-api-docs-v4-en.pingpongx.com/en/notes/saas/Shopify/checkoutCustomize/index.md
description: >-
  The custom checkout feature is suitable for e-commerce and virtual merchants,
  especially small and medium-sized merchants with brand style requirements. By
  unifying the interaction style of product browsing, ordering, and payment
  processes, it significantly enhances user experience and improves conversion
  rates. Supports different styles for different websites, including colors,
  styles, and font sizes. Not supported for merchants who have already used API
  or customized checkout styles.
---
## Custom Checkout

Applicable scenarios: E-commerce/virtual merchants with brand style requirements; or other small and medium-sized merchants with style requirements for checkout pages/ embedded checkouts.

Effect: Significantly improve user experience, from product browsing-ordering-payment
Unify the overall process interaction style, to some extent improve conversion rate.

Limitations: Not supported for merchants who have already used API to define checkout styles, not supported for merchants who have customized personalized checkouts. Does not support modifying styles for Shopify embedded checkout.

Timing: Real-time effect

Advantages: Can set different checkout styles for different websites. Rich granularity including colors, styles, font sizes, etc.

## Operation Process

### Step 2.1 Open top navigation bar

Open top navigation bar Website Management---Website Management

![](/v4/checkout/media/checkoutCustomize/image1.png)

### Step 2.2 Select Website

Locate the website that has completed review, click the "More" button on the right------"Edit Checkout Style"
![](/v4/checkout/media/checkoutCustomize/image2.png)

### Step 2.3 Edit Web Page Tab (Optional)

![](/v4/checkout/media/checkoutCustomize/image3.png)

### Step 2.4 Set Style (Optional)

Select appearance style and upload brand logo background color

![](/v4/checkout/media/checkoutCustomize/image4.png)

### Step 2.5 Select Tab Bar Background Color (Optional)

![](/v4/checkout/media/checkoutCustomize/image5.png)

### Step 2.6 Select Tab Bar Background Color (Optional)

Recommended not to modify.

![](/v4/checkout/media/checkoutCustomize/image6.png)