Create a Shopify Standard Checkout with Checkboxes

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.

While the builder offers broad customization options, most new clients start with the "Shopify standard checkout with checkbox" template.

This guide is designed to help you quickly set up and customize this popular template. The template's main advantage is its built-in checkbox component that requires customers to agree to your terms before completing payment. This ensures compliance, protects your business, and maintains a seamless checkout experience. This guide will walk you through the key steps to configure the template and its mandatory checkbox component.

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 Checkout as the main checkout page where customers complete their purchase.

   • Checkout Type: Select Standard Checkout to use Phoenix’s hosted environment and automatically connect to your linked store.

   • Select Template: Pick the New Shopify template. It displays a preset button and a checkbox configuration that match Shopify.

   • 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 Type	Components Available
Blocks	Columns, Flex, Grid, Container, Divider, Accordion
Text	Text Field, Text Editor
Buttons	Confirm Purchase, Apple Pay, Google Pay, PayPal, Return Button
Forms	Contact Info, Shipping Form, Billing Form, Payment
Checkout Elements	Cart, Order Details, Promo Code, Terms, Customer Reviews, VIP Component
Other	Image 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.

Logic and Interactions Configuration

The Shopify Standard Checkout with Checkbox template includes a preconfigured action button and checkbox, so you can customize their behavior and design directly from the builder.

Learn More

For a more detailed view of Logic and Interaction, go to the Checkbox and Terms Components Behavior and Logic page.

Understanding the Default Confirmation Button Configuration

The template includes both the Confirm Purchase button and a Checkbox that controls when the button becomes active. This setup helps you ensure customer confirmation before completing a purchase.

Default Button Settings

These are the default visual settings for the Confirm Purchase button in this template. They follow the Shopify design style for clarity and conversion performance.

Property	Default Value	Description
Button Name	Complete Purchase	Default call to action text.
Font Size	14	Standard readable size across devices.
Font Weight	700	Bold for clear emphasis.
Text Color	#ffffff (White)	Ensures contrast on dark backgrounds.
Hover Color	#000000 (Black)	Changes text color when hovering.
Background Color	#1878b9 (Shopify Blue)	Matches Shopify’s default accent tone.
Border Radius	8px	Gives slightly rounded corners.
Width	Full	Button spans the container width.

These defaults give you a clean, accessible design that fits most store layouts.

How to Customize the Confirmation Button

You can customize any visual or interactive property of the Confirm Purchase button from the Button Configuration panel.

To customize the button:

1. Click the Confirm Purchase button in your layout. The configuration options appear on the right side of the screen under Button Configuration.

2. Adjust the properties as needed to match your brand style.

   Text and Font

   • Edit the Button Name (for example, change Complete Purchase to Pay Now or Place Order).

   • Modify the Font Size and Font Weight to match your brand typography.

   Colors

   • Change the Text Color and Hover Color for better contrast.

   • Update the Background Color to match your brand’s primary color (for example, #4f46e5 for Phoenix purple).

   Spacing and Shape

   • Adjust

   Margins

   and

   Padding

   for each device (desktop, tablet, mobile) to control button spacing.

   Borders and Shadows

   • Use Border Radius to make the button edges rounded or squared.

   • Set the Border Color or add subtle shadows if you want more depth.

   Behavior Options

   • Enable Show Text Only on VIP to make the button text appear exclusively for VIP customers.

   • Ensure the Width is set to Full to span the container evenly across devices.Description for an Accordion.

   Design Tip

   Small color and typography changes can make your checkout feel more aligned with your brand without breaking the Shopify design consistency.

Configure the Checkbox Behavior

The Checkbox component works together with the button to ensure compliance before payment. By default, it’s required for customers to proceed.

Default Checkbox Settings

The default configuration defines how the checkbox appears and interacts with your checkout layout. You can adjust any of these options to match your design or logic requirements.

Property	Default Value	Description
Required for Payment	Enabled	Makes the checkbox mandatory before checkout.
Show Only on VIP	Disabled	Checkbox is visible to all customers by default.
Toggles Style	Standard	Uses the default checkbox visual style.
Checkbox Color	#4f46e5	Default Phoenix accent color.
Default Checked	Disabled	Checkbox starts unchecked by default.
Margin (Top)	20	Adds space above the checkbox.
Background Color	#ffffff (White)	Matches the overall checkout background.
Border Radius	0	Square corners for a clean look.
Border Color	#000000 (Black)	Defines border visibility.
Show Header	Yes	Displays a label above the checkbox.
Header Content	Terms and Conditions	Example header text.
Content	Legal or informational text	Describes what customers agree to.
Show Dropdown Arrow	Yes	Displays an arrow to toggle extra content.
Vertical Align	Center	Aligns checkbox content vertically.

How to edit the checkbox

You can customize both the appearance and behavior of the checkbox from the settings panel. These steps guide you through the main options.

1. Select the Checkbox component in the layout.

2. In the settings panel, toggle Required for Payment on or off depending on whether the box must be checked before completing purchase.

3. Update the Header Content (for example, Agree to Terms and Conditions).

4. Add detailed text in the Content section explaining what the user is agreeing to.

5. Customize colors, margins, or dropdown settings to better fit your page design.

   Best Practice

   Keep your checkbox visible, clear, and easy to read. Avoid hiding legal text behind collapsible sections unless necessary.

How the Interaction Works

When the page loads:

• The Confirm Purchase button is visible but inactive if the checkbox is marked as Required for Payment.

• Once the customer checks the box, the button becomes active and clickable.

• If the customer tries to click the button without checking the box, Phoenix displays an error message or automatically selects the box (depending on your chosen configuration).

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.

Related Guides

For a complete understanding of Phoenix Checkout customization, see these related guides:

• Create and Customize Your Checkout

• Checkbox and Terms Component Behavior and Logic

• Connect Your Checkout to a Store and Gateway

• Change the Image on Your Thank You Page

• Set Up Conversion Pixels