[Archived] - How to Add and Customize Smart Checkout Elements

ClickFunnels Smart Checkout element allows you to sell products directly from your funnel with enhanced features. This article guides you through adding a Smart Checkout to your page and customizing it, including advanced capabilities for even more flexibility and conversion optimization.

Table of Contents

• Requirements
• Adding Smart Checkout Element to Your Page
• Customizing Smart Checkout
• Adding Elements Within Smart Checkout Element
  • Customizing Order Bumps
• Additional Information

---

Requirements

• An active ClickFunnels 2.0 account
• Connect a Payments ai account
• Created Products
• Configure the Shipping feature (for physical products)

---

Adding Smart Checkout Element to Your Page

1. Open the page editor and click Add Element between existing elements.
2. In the menu, select Checkout to add the Smart Checkout.
   

The Checkout (Legacy) element refers to our previous Checkout element; please make sure you select the Checkout element, as shown in the image above.

Back to Top

---

Customizing Smart Checkout

The Smart Checkout element comes with a unique set of settings. To access Smart Checkout settings:

1. Hover over the Checkout element.
2. Click the Settings ⚙ icon.
   

Key customization options include:

• Top Margin: Adjust spacing above the checkout
• Checkout Steps: Set number of steps and preview changes.
• General Styles: Change fonts, colors, and other visual elements
• Contact Form: Customize the contact information section
• Product Select: Modify the product selection area
• Shipping Options: Edit shipping information fields
• Payment Method: Adjust payment input fields
• Order Bumps: Customize upsell offers during checkout
• Buttons: Change button text and styles

To use a pre-designed template:

1. Click the Templates tab in settings.
2. Scroll through options and select your preferred design.
   

Back to Top

---

Adding Elements Within Smart Checkout Element

Smart Checkout allows you to add custom elements directly within the checkout process. This feature enhances your ability to customize the checkout experience for your customers. All elements you add will function the same way within the checkout as they do elsewhere on your pages. Consider your customer journey and strategically place elements that address potential objections or reinforce the value of the purchase.

1. Hover over the Smart Checkout element on your page.
2. Click the Add Element option above or below existing checkout components.

3. Choose from various element types, including text, images, videos, or saved blocks.
   

   You can add elements to most sections of the checkout, except for the billing information area.

Examples of Custom Elements in Checkout:

1. Video testimonial above the payment section.
2. Trust badges near the payment information.
3. Promotional banner at the top of the checkout.
4. Product image gallery next to the order summary.

Customizing Order Bumps

Order Bumps let you offer extra products during checkout. You can now easily change how they look to match your funnel style. With the new customization options, you can edit the product title, description, and even the overall layout of your Order Bump. This means you can make it blend seamlessly with your funnel’s design or stand out to catch your customer’s eye.

1. Find the Order Bump section in the Checkout element.
2. To change the Order Bump title:
   1. Click on the current Order Bump title.
   2. Type your new title directly in the text field.
   3. Use the toolbar to format your text if needed.
      
3. To edit the description:
   1. Click anywhere in the Order Bump description.
   2. Click the REPLACE CONTENT button that appears.
      
   3. Choose elements from the menu to add to your description. Add as many elements as you want.
   4. To start over, delete all elements to return to the original description.

Back to Top

---

Additional Information

• Smart Checkout Guide: Guest and Saved Users View
• Smart Checkout Guide: Upgrade and Downgrade
• How to Create a New Funnel
• How to Create and Manage Products

Back to Top