Skip to main content

Create and Customize Your Checkout

With the Phoenix Checkout Builder, you can visually design and manage your checkout page without writing code. The builder gives you full control to add components, configure logic, apply your brand styles, and preview how your checkout looks on both desktop and mobile.

By creating your checkout in Phoenix, you can quickly launch conversion-optimized pages that match your brand and customer flow while minimizing development time and cost.

Use Cases​

Launching a New Store or Campaign

Imagine you are launching a new online store or running a seasonal campaign. Instead of coding a new checkout page, you can create one in minutes using Phoenix’s prebuilt templates. This lets you maintain visual consistency while testing multiple versions for conversion performance.

Custom Checkout for VIP Customers

If your brand has loyalty or VIP tiers, you can create checkout pages tailored to specific audiences. For example, add exclusive components, modify pricing or discounts, and apply personalized branding for that segment, all managed through the builder.

A/B Testing Different Layouts

You can duplicate a checkout page, change its layout or logic, and run both versions to measure which performs better. With Phoenix’s draft and publish options, you can test quickly without affecting your live checkout.

Prerequisites​

Before you begin, ensure that you have:

  • An active Phoenix merchant account

  • A connected store (Shopify, WooCommerce, or BigCommerce)

  • A configured payment gateway (Stripe or NMI)

  • Your logo, brand colors, and text assets ready

Access the Checkout Builder​

Before customizing your checkout, you first need to access the Phoenix Checkout Builder. This is where you create and manage all checkout pages for each of your stores.

To access the builder:

  1. Log in to your Phoenix Dashboard.

  2. From the left panel, go to Stores.

  3. Select your store.

  4. Click the Checkout tab.

Here you’ll see a list of all checkout pages with details like name, template, status, and tags. Each checkout can be in Published or Draft mode.

Note

Create draft pages to safely test layouts, logic, or design before publishing them live.

Create a New Checkout Page​

You can create a new checkout page directly from your Phoenix Dashboard. Each page can be a Checkout, Thank You, or Post Upsell type, and can use any of the templates available in your account.

To create a new page:

  1. At the bottom of the list, click Add Page.

  2. A window titled Add Checkout opens. Fill in the following fields:

    • Name: Enter a descriptive name for your page (for example, VIP Checkout or Summer Promo).

    • Page Type: Choose the type of page you want to create:

      • Checkout: The main checkout page where customers complete their purchase.

      • Thank You: The confirmation page shown after successful payment.

      • Post Upsells: A follow-up offer page shown after checkout.

    • Checkout Type: Select how you want your checkout to be hosted:

      • Standard Checkout: Uses Phoenix’s hosted environment and automatically connects to your linked store.

      • Self Hosted: Allows you to embed the checkout on your own domain for more control over hosting and customization.

    • Select Template: Pick one of the available templates as your starting layout. You can customize it later in the builder.

    • Tags: Add tags to organize or identify your pages.

  3. Click Add to create the page. The page is automatically saved as a Draft and appears in the checkout list.

To open it in the builder:

  1. Locate your new draft page in the list.

  2. Click the Edit icon under the Actions column. The Checkout Builder Editor opens, where your selected template loads and the sidebar displays all available components for customization.

    Note

    Every new checkout page is saved as a draft by default. You must click Edit to begin customizing it before publishing it live.

Customize Checkout Components​

Once your template is loaded, you can personalize the design and functionality of your checkout. Phoenix provides a library of drag-and-drop components organized by type.

Components TypeComponents Available
BlocksColumns, Flex, Grid, Container, Divider, Accordion
TextText Field, Text Editor
ButtonsConfirm Purchase, Apple Pay, Google Pay, PayPal, Return Button
FormsContact Info, Shipping Form, Billing Form, Payment
Checkout ElementsCart, Order Details, Promo Code, Terms, Customer Reviews, VIP Component
OtherImage Uploader, Timer, Footer, Social Icons

To customize your checkout:

  1. Click a component to open its settings on the right.

  2. Drag and drop new components into your layout.

  3. Adjust the text, color, alignment, or behavior.

  4. Reorder or delete components as needed.

    Checkout on Different Devices

    Some visual settings like spacing or padding must be configured separately for desktop, tablet, and mobile. Always preview your design on each device type.

Add Logo and Branding​

Consistent branding helps your checkout look professional and builds customer trust. You can apply your brand identity using components and visual settings available in the builder.

To display your logo:

  1. From the Components panel, drag and drop an Image Uploader or a Simple Page Header into your layout.

  2. Click the component to open its settings panel.

  3. Select Image.

  4. Upload your logo image or paste a logo URL.

  5. Click Done to save the image.

  6. Adjust alignment, size, and margins as needed. We recommend using a logo size of 200 × 60 px.

To apply your brand colors and typography:

  1. Open the Global Settings panel.

  2. Set your Theme Color and Background Color to match your brand palette.

  3. Choose your preferred Font Family for all text elements.

  4. Optionally, adjust the Error Color to fit your brand’s tone.

    Info

    Phoenix automatically applies your theme and background colors across all components to maintain a consistent appearance throughout your checkout page.

You can also enhance your brand presence by adding other components, such as Footer, Social Media Icon, or Text Banner, from the Other category.

Info

Global Settings also include advanced options like adding custom CSS, inserting tracking scripts, or defining meta details such as the favicon and page title. For detailed configuration, see Configure Advanced Settings in Phoenix Checkout.

Configure Logic and Interactions​

Phoenix lets you define rules and actions for key checkout components such as buttons and checkboxes. This ensures your checkout behaves as expected before customers proceed to payment.

To configure button and checkbox logic:

  1. Click the Agree & Continue or Confirm Purchase button in your layout.

  2. In the settings panel, open the Button Configuration section.

  3. Define how the button should behave depending on the checkbox status:

    • Button Title: Example: AGREE & CONTINUE →

    • Button Text (Subtitle): Example: TRY IT RISK FREE! 30-DAY MONEY-BACK GUARANTEE!

    • Font Size: 24 for title, 14 for subtitle

    • Font Weight: 700 for title, 400 for subtitle

    • Text and Hover Color: Customize as needed (default: #ffffff)

  4. Configure the logic for what happens when the button is clicked while the checkbox is unselected. You can choose one of the following behaviors:

    • Switch status of checkbox to selected
    • Send error message
    • Allow payment to be processed
    • Auto select checkbox
    Example

    You can make the PAY NOW button active only after the user selects the “Agree to Terms” checkbox. If the box is unchecked, you can display an error message or auto-select it for smoother checkout flow.

Publish and Test Your Checkout​

Once your checkout page is fully customized, you can save, preview, and publish it to test the experience before going live.

To finalize your checkout:

  1. At the top-right corner of the builder, choose one of the following options:

    • Publish: Makes your checkout live and available to customers in your connected store.

    • Save Draft: Keeps your checkout in draft mode so you can continue editing later without affecting your live version.

    • Save Template: Saves your current layout and settings as a reusable template for future checkouts.

  2. To preview your checkout before publishing, click the eye icon (View Page) at the top-right of the builder.

    This opens a live preview of your checkout page where you can test the full flow.

  3. Review how your checkout behaves on both desktop and mobile. Ensure that buttons, forms, and payment actions work as expected.

  4. Optionally, run a test transaction to validate the full checkout process and confirm that your payment gateway is working correctly.

With your checkout fully created and customized, you’re now ready to offer a seamless, branded purchasing experience that builds trust and drives conversions.

To continue building, configuring, and optimizing your checkout experience in Phoenix, explore these related guides: