Checkbox and Terms Component Behavior and Logic

The Checkbox, Confirm Purchase (T&C), and Terms and Conditions components in the Phoenix Checkout Builder let you collect customer confirmation before completing a purchase. You use them to confirm agreement with your store’s terms, subscriptions, or policies, and to define how customers proceed to payment.

You can use these components in three ways:

• Add a standalone Checkbox and link it to a button.

• Use the Confirm Purchase (T&C) button, which includes a built-in checkbox and logic.

• Add a Terms and Conditions component to show text and agreement together.

Differences Between Checkbox and Terms Components

Each component captures customer confirmation but serves a different purpose.The Checkbox gives you flexibility to control placement and logic, while the Terms and Conditions and Confirm Purchase (T&C) options simplify setup with preconfigured behavior.

Component	Description	Common Use
Checkbox	A simple box customers select to confirm an action. You can link it to a button or rule.	Ask customers to agree before continuing.
Terms and Conditions	A component that includes a title, checkbox, and optional dropdown for more information.	Show store terms, policies, or disclosures.
Confirm Purchase (T&C)	A prebuilt button that includes its own checkbox and dynamic label states.	Combine agreement and payment in one step.

Add and Configure the Checkbox

You can add a Checkbox anywhere in your checkout layout.

1. Open your checkout in the Phoenix Checkout Builder.

2. From the left sidebar, go to Other > Checkbox.

3. Drag the component into your layout (usually below the order summary or above the main button).

4. Click the checkbox to open the Settings Panel.

5. Adjust the settings to match your checkout design.

Configuration Options

These options control how the checkbox appears and behaves in your checkout page.

Setting	Description	Example
Required for Payment	Makes the checkbox mandatory before continuing.	Enabled
Required Validation	Displays an error message if not checked.	“Please accept the terms to continue.”
Show Only on VIP	Displays the checkbox only for specific customer segments.	Enabled
Checkbox Color	Sets the box color.	#4f46e5
Default Checked	Determines if it starts selected.	Disabled
Show Header	Displays a short header above the checkbox.	“Before continuing, please confirm:”
Header Content	Optional text that appears above the checkbox.	Store policy note
Content	Text displayed next to the checkbox.	“I agree to the Terms and Conditions.”
Show Dropdown	Adds expandable text under the checkbox.	Enabled
Dropdown Content	Content that expands for longer policy text.	Refund and privacy policy
Show Dropdown Arrow	Displays an arrow for expanding the content.	Yes
Vertical Align	Controls how content is aligned.	Start
Background Color	Defines the background color.	#ffffff
Margin and Padding	Adjust spacing for each device.	Margin top: 20, Padding left: 10

Interaction Tip

Let customers select the checkbox themselves. This approach keeps your checkout transparent and reinforces trust.

Use the Confirm Purchase (T&C) Component

The Confirm Purchase (T&C) component includes its own checkbox and dynamic button states. It’s the simplest way to combine agreement and payment logic in a single element.

1. From the left sidebar, go to Button > Confirm Purchase T&C.

2. Drag the component into your layout.

3. Open the Button Configuration section. The button already includes a built-in checkbox and agreement logic.

4. Edit the text for each state:

   • When unchecked:

     • Title: AGREE & CONTINUE

     • Subtitle: TRY IT RISK FREE! 30-DAY MONEY-BACK GUARANTEE!

   • When checked:

     • Title: PAY NOW

     • Subtitle: TRY IT RISK FREE! 30-DAY MONEY-BACK GUARANTEE!

5. Under If checkbox is unselected and payment button is clicked, choose what happens:

   • Switch checkbox to selected

   • Show validation message

   • Allow payment to process

   • Auto select checkbox

6. Adjust colors, borders, and spacing under Customize Colors and Layout Settings.

7. Select Save draft to apply changes.

8. Click Yes Proceed to confirm changes.

9. Select Preview mode to test the page.

   Design Tip

   Use consistent messaging between checkbox text and button labels so customers understand the action clearly.

Use the Terms and Conditions Component

The Terms and Conditions component combines agreement text, checkbox, and optional expandable details. It’s useful when you want to display policy text directly within the checkout layout.

To add and set it up:

1. In the builder, go to Other > Terms and Conditions.

2. Drag it into your checkout layout.

3. Click to open Settings and edit the following:

   • Header Text

   • Body Text

   • Dropdown Content

4. Adjust the appearance and layout to match your checkout design.

   • Set background color to white or inherit.

   • Modify border width, radius, and color.

   • Adjust padding and margin for spacing.

   • Update checkbox colors or shape as needed.

5. Select Save draft to apply changes.

6. Click Yes Proceed to confirm changes.

7. Select Preview mode to test the component behavior and layout.

Configuration Options

These settings let you customize how the Terms and Conditions component appears and behaves in your checkout layout. Use them to keep your policies visible while maintaining a clean, conversion-friendly design.

Setting	Description	Example
Show Header	Displays a header above the text.	Yes
Header Content	Title for the section.	“Terms and Conditions”
Content	Main summary text.	“By completing this purchase, you agree to our store terms.”
Show Dropdown Arrow	Enables expandable details.	Yes
Dropdown Content	Additional information such as refund or privacy policy.	“Refunds are processed within 30 days.”
Custom Checkbox	Allows styling and color customization for the checkbox.	Enabled
Background Color	Defines the background color of the section.	#ffffff or “Inherit Parent”
Checked Border Color	Color when the box is selected.	#4f46e5
Unchecked Border Color	Color when the box is unselected.	#d1d5db
Checkbox Shape	Defines the form of the checkbox.	Square
Checkbox Size	Size of the checkbox in pixels.	16
Check Mark Color	Color of the check symbol.	#ffffff
Checked Toggle Color	Color inside the checkbox when checked.	#4f46e5
Unchecked Toggle Color	Color inside the checkbox when unselected.	#d1d5db
Vertical Align	Alignment of the element.	Center
Margin and Padding	Spacing around and inside the element.	Margin top: 20, Padding left: 10
Border Color	Outline color for the block.	#e5e7eb
Border Radius	Controls corner rounding.	8
Border Width	Border thickness.	1
Border Style	Border type.	Solid

Layout Tip

The Terms and Conditions component includes a built-in checkbox, so you can focus on customizing its text and layout instead of adding another one.

Use Cases

Checkbox with Standard Button

Use this setup when you want customers to confirm agreement before continuing. Place a Checkbox under the order summary, and a Button (e.g., Agree and Continue) below it. The button becomes active once the box is checked.

Confirm Purchase (T&C)

Use this setup when you want a single button that handles both confirmation and payment. The button automatically updates its label and action once the built-in checkbox is selected.

Terms and Conditions

Use this setup when you want to display your policy text and agreement in one place. The component handles both display and consent without additional configuration.

Use these controls to reinforce trust, meet regulatory requirements, and guide customers confidently through acceptance steps that protect both them and your business.

Related Guides

To continue configuring logic, agreement components, and checkout behavior in Phoenix, review these related guides:

• Create and Customize Your Checkout

• Create a Shopify Standard Checkout with Checkboxes

• Connect Your Checkout to a Store and Gateway

• Change the Image on Your Thank You Page in Phoenix Checkout

• Set Up Conversion Pixels