Let’s get started.

Pre-requisites –

There are few Pre-requisites like –

• You need to create a Snapchat ADs account.. Haven’t Setup yet? – follow the steps here
• Next, you need to get the Snapchat ID, follow the steps here.
• Copy the Snapchat ID, you will need to paste it in the CartFlows Settings

Steps to Add Snapchat Pixel ID in the CartFlows Settings –

Step 1: From your WordPress dashboard, go to CartFlows > Settings > Integrations

Step 2: Scroll down to the Snapchat Pixel Settings and enable the option – Enable for CartFlows pages.

Step 3: Now, you will see a field to insert the Snapchat pixel ID. You can paste your Snapchat ID there.

After adding the pixel ID you can enable the option to add the Snapchat Tracking code to enable the Snapchat Tracking Code on the whole website.

Step 4: Next, you can enable the Events which CartFlows provides, they are –

• Begin Checkout
• Add To Cart
• Add Payment Info
• Purchase
• Subscribe
• Optin Lead

Step 5: Just Save the Changes and you have successfully added Snapchat Pixel for the CartFlows.

Let see how to configure this feature for your website. Before we start using this feature, there are few pre-requisites that you want to have and they are as follows:

Pre-requisites –

There are few Pre-requisites like –

• You need to create a Pinterest Business account.. Haven’t Setup yet? – follow the steps here
• Next, you need to get the Pinterest Tag ID, follow the steps here.
• Copy the Pinterest Tag ID, you will need to paste it in the CartFlows Settings

Steps to Add Pinterest Tag ID in the CartFlows Settings –

Step 1: From your WordPress dashboard, go to CartFlows > Settings > Integrations

Step 2: Scroll down to the Pinterest Tag Settings and enable the option – Enable Pinterest Tag for CartFlows pages.

Step 3: Now, you will see a field to insert the Pinterest Tag ID. You can paste your Pinterest Tag ID there.

Enabling the above option adds the Pinterest Tracking code on the CartFlows Steps and the next toggle option will enable the Pinterest Tracking Code on the whole website.

Step 4: Enable the concent notice.

This concent notice is a required option from the Pinterest before start to track the events on the website. If this, option is enabled then it will display a short and simple notice on the frontend for the users.

Step 5: Next, you can enable the Events which CartFlows provides, they are –

• Begin Checkout
• Add To Cart
• Add Payment Info
• Purchase
• Signup
• Optin Lead

Step 6: Just Save the Changes and you have successfully added Pinterest Tag for the CartFlows.

In the latest release of CartFlows version 2.0.11 and CartFlows PRO 2.0.9 we have introduced a native support for TikTok Pixel Events. This feature allows you to seamlessly track TikTok ads and events for improved campaign performance.

Let see how to configure this feature for your website. Before we start using this feature, there are few pre-requisites that you want to have and they are as follows:

Pre-requisites –

There are few Pre-requisites like –

• You need to create a TikTok Ads Manager account.. Haven’t Setup yet? – follow the steps here
• Next, you need to get the Google Analytics ID, follow the steps here.
• Copy the TikTok Pixel ID, you will need to paste it in the CartFlows Settings

Steps to Add TikTok Pixel ID in the CartFlows Settings –

Step 1: From your WordPress dashboard, go to CartFlows > Settings > Integrations

Step 2: Scroll down to the TikTok pixel Settings and enable the option – Enable TikTok pixel Tracking

Enabling the above option adds the TikTok Tracking code on the CartFlows Steps and the next toggle option will enable the TikTok Tracking Code on the whole website.

Step 3: Now, you will see a field to insert the TikTok pixel ID. You can paste your TikTok Pixel ID there.

Step 4: Next, you can enable the Events which CartFlows provides, they are –

• Begin Checkout
• Add To Cart
• Add Payment Info
• Purchase
• Optin Lead

Step 5: Just Save the Changes and you have successfully added TikTok Pixel ID for the CartFlows.

Frequently Answered Questions

Q. How to Test or Verify the Working of TikTok Pixel Support?

=> For testing the working of TikTok Pixel on your Checkout Page with Google Chrome Browser, you will need to have the following Google Extension – TikTok Pixel Helper.

Key Features of Bricks Builder Integration

• Enhanced Design Flexibility:
  Customize funnel layouts directly without the need for additional tools.
  
• Dynamic Content Tags:
  Display relevant product information throughout your funnels using dynamic tags.
  
• Pre-Configured Options:
  Utilize ready-made design options for upsell and downsell steps to streamline the setup process.
  

These features enable you to create high-converting, branded sales funnels in WordPress with ease.

How to Enable Bricks Builder for CartFlows

To start using Bricks Builder with CartFlows, follow these steps to enable it as your default editor:

1. Access CartFlows Settings:
   From your WordPress dashboard, navigate to CartFlows > Settings.
   
2. Enable Bricks Builder:
   
   • In the General tab, locate the Builder Settings section.
     
   • Select Bricks Builder as your default page builder for CartFlows.
     
3. Save Changes:
   Click Save to apply your settings.

After these steps, Bricks Builder will be available as the primary editor for designing CartFlows steps. You can now customize each step of your funnel using Bricks Builder’s robust tools.

CartFlows Widgets for Bricks Builder

With Bricks Builder enabled, you have access to dedicated CartFlows widgets to customize each part of your funnel:

• Opt-in Step:
  Design a customized opt-in page for lead collection by adding dynamic fields and engaging elements.
  
• Checkout Step:
  Create a branded checkout experience by incorporating custom elements and interactive features.
  
• Thank You Step:
  Personalize your Thank You page with tailored messages, suggested next steps, or additional product recommendations.
  
• Upsell and Downsell Steps:
  Use dedicated widgets to build upsell and downsell pages. Customize accept/reject buttons and display relevant product information to create a seamless user experience.

Dynamic Content Tags

The integration introduces dynamic content tags, letting you insert personalized data within each funnel step. Examples include:

• Product Information:
  
  • Product Title: Displays the name of the product.
    
  • Product Description: Provides detailed product information.
    
  • Product Price: Shows the current product pricing.
    
  • Product Quantity: Indicates the number of products, which is useful for bundles.
    
  • Product Variation: Displays options such as size or color.
    
• Next-Step Button:
  Guides users to the subsequent step in the funnel with a clear call-to-action.
  
• Accept/Reject Buttons:
  Particularly useful in upsell and downsell scenarios, these buttons allow users to quickly respond to offers.

Using these dynamic tags, you can tailor the checkout experience to each user, enhancing both functionality and personalization.

Fixed Layout Options for Upsell and Downsell Steps

CartFlows offers pre-configured layouts for upsell and downsell pages within Bricks Builder. These fixed layouts are designed for quick setup and consistency, ensuring your additional offers are presented in an optimized and cohesive manner.

Frequently Asked Questions

Who can benefit from using Bricks Builder with CartFlows?

This integration is ideal for WordPress users, agencies, and e-commerce owners aiming to add custom design elements and dynamic content to their sales funnels without requiring extensive coding knowledge.

Do I need technical experience to set this up?

Basic knowledge of WordPress is recommended. However, the setup process is designed to be user-friendly—particularly for those familiar with visual page builders.

Can I switch back to my original page builder after enabling Bricks Builder?

Yes, you can switch builders through CartFlows settings. Please note that designs specific to Bricks Builder may not carry over if you switch to another page builder.

What is OttoKit?

OttoKit is an automation platform designed to connect different apps and streamline tasks by setting up automated workflows (or “triggers”) based on specific events or actions.

Visit OttoKit website: https://ottokit.com/.

How to use OttoKit Integration?

Step 1: In your CartFlows dashboard, find a new menu option labeled ‘Automation’.

Step 2: If you do not have ‘OttoKit’ installed already, you can install ‘OttoKit’ from the ‘Automations’ tab or If you already have ‘OttoKit’ installed, you will see the option to ‘Create Workflow’.

To create workflows specific to individual funnel steps (like checkout, upsell, or downsell), follow these steps:

Step 1: Open the funnel editing page, and locate the ‘Automation’ option within the options menu for the checkout, upsell, or downsell step.

Step 2: Click ‘Automation’ to open a dedicated OttoKit window where you can set up workflows specifically for that step.

Pro tip: The created Workflows will also show up independently in your OttoKit account. Any changes you make will be reflected on both your CartFlows dashboard and the OttoKit account.

Example: Add users who declined the upsell into Google Sheets

Create an automation workflow in OttoKit by selecting ‘CartFlows’ as the app and choosing ‘Upsell Declined’ as the event.

Connect OttoKit to CartFlows. If you need help with this, refer to this article: https://ottokit.com/docs/connect-suretriggers-with-wordpress-plugins/ and Connect OttoKit with WordPress.

In the Configure tab, select your funnel and the upsell step.

Go to the Test tab, click ‘Fetch Data’ to check the connection, and then click ‘Save.’

For the next step, choose the action app by searching for or selecting it; in this example, we’re using Google Sheets.

Connect Google Sheets, and choose the event type—’Add New Row’ in this case. Then, select your spreadsheet and worksheet.

Test the connection by clicking ‘Test Action.’

Once done, activate the workflow. Now, each time a user declines the upsell, their information will automatically be added to your Google Sheets.

By adding your Google Ads Conversion ID and Label, you can connect your website activity with your Google Ads campaigns and gain better insights into performance.

Prerequisites

Before setting up Google Ads Pixel tracking in CartFlows, make sure to complete the following steps:

• Create a Google Ads Manager account.
  Not done yet? You can follow the official steps here.
• Generate your Google Ads Conversion ID and Conversion Label from your Google Ads account.
  You will need to paste these into the CartFlows settings panel.

How to Set Up Google Ads Pixel in CartFlows

Step 1: Access CartFlows Settings

From your WordPress dashboard, go to
CartFlows > Settings > Integrations

Step 2: Enable Google Ads Pixel Tracking

Scroll down to the Google Ads Pixel Settings section and toggle the option
Enable Google Ads pixel Tracking.

Step 3: Add Your Conversion ID & Label

Once enabled, fields will appear where you can paste your
Google Ads Conversion ID and Google Ads Conversion Label.

Step 4: Enable Event Tracking

CartFlows provides support for multiple tracking events. You can enable the ones you want to track:

• Begin Checkout
• Add To Cart
• View Content
• Add Payment Info
• Purchase
• Opt-in Lead

How to Verify the Tracking Setup

To confirm that your pixel is working correctly, use the Google Tag Assistant browser extension. It validates the implementation of your Google Ads conversion tags and tracking codes on any page of your site.

Frequently Asked Questions

This documentation will walk you through downloading, importing, and using Divi templates within CartFlows.

Step 1: Download the Divi Templates

You can download the available Divi templates as a zip file from the following link: Divi Templates Zip.
After downloading, extract the zip file and choose the specific funnel or step JSON file you want to import.

Step 2: Import the Templates into CartFlows

2.1 – Set the Page Builder Option

Go to CartFlows > Settings > General and set the Page Builder option to Other.

2.2 – Access the Funnels Page

Navigate to CartFlows > Funnels and click the Import button at the top of the screen.

2.3 – Select the Template JSON File

From the extracted zip folder, locate the desired Divi template .json file and select it.

2.4 – Complete the Import

Click Import to upload and apply the template. Once imported, the funnel will appear in your Funnels list.

2.5 – Edit with Divi

You can now begin customizing the imported funnel using the Divi Builder to match your brand and layout preferences.

Frequently Asked Questions

1. I’m unable to edit CartFlows pages using Divi. What should I do?
Ensure that the CartFlows step type are enabled for editing in the Divi Builder. This allows Divi to properly render and edit CartFlows steps.

2. Where can I find CartFlows page shortcodes?
Set the Page Builder option to Other. Then, go to the funnel step’s Settings > Design tab to view the shortcode for that step.

This feature leverages Google’s Places API to provide accurate address suggestions based on user input. It reduces manual typing and improves checkout speed, especially on mobile devices.

Note: Some address components may be missing in certain suggestions, depending on what data is returned by Google. This is a known limitation of the API. Here is an actual demonstration from Google.

What Is Google Address Autocomplete?

Google Address Autocomplete is a service provided by Google’s Places API. It predicts and suggests address entries as users begin typing, using real-time location data.

In CartFlows, we’ve integrated this API to auto-fill billing and shipping fields with just a single selection—making your checkout process faster and more convenient.

How to Enable Google Address Autocomplete

Step 1: Get Your Google API Key

First, set up your Google account and generate an API key. Follow this guide for step-by-step instructions.

Step 2: Add the API Key to CartFlows

1. Navigate to CartFlows → Settings → Integrations.
2. Click the Google Address Autocomplete tab.
3. Paste your API key and save the changes.

Step 3: Enable on Specific Checkout Pages

1. Edit the Checkout step where you want this feature enabled.
2. Click the Settings icon (gear icon).
3. Open the Checkout Form tab.
4. Scroll to the Form Settings section and toggle on the Enable Google Address Autocomplete option.

Once enabled, your customers will benefit from a faster, smarter checkout form.

These blocks are designed to streamline the funnel-building process and are categorized into blocks available in both the Free and Pro versions.

Available Blocks

You’ll find dedicated blocks for each CartFlows funnel step:

• Next Step Button / Link Block
• Opt-in Form Block
• Checkout Form Block
• Upsell & Downsell Offer Blocks (includes variations and Accept/Reject options)
• Order Review Block (for Thank You page)

Note: Each block only appears within its relevant funnel step in the editor. For example, the Next Step Button block will only show when editing a Landing Page.

Step-Wise Breakdown of Blocks & Settings

1. Landing Page – Next Step Button Block

This block allows you to guide users to the next funnel step.

• General Tab: Adjust alignment, add icons, and customize text.
• Style Tab: Modify block and text colors, padding, margins, and icon styles.
• Content Tab: Customize font size, typography, and content styling.
• Advanced Tab: Add custom links or apply custom CSS for further control.

2. Opt-in Page – Opt-in Form Block

Use this block to collect lead information.

• General Tab: Control the primary color and global typography.
• Input Field Tab: Style input fields including color, alignment, and typography.
• Submit Button Tab: Customize the appearance of the submit button.
• Additional Tab: Add custom CSS to personalize the design.

3. Checkout Page – Checkout Form Block

Designed to handle everything from product details to payments.

• Layout Tab: Choose between One-Column, Two-Column, or Two-Step layouts.
• Global Tab: Set global colors and typography for the entire form.
• Heading Tab: Style headings within the checkout form.
• Input Fields Tab: Adjust the look and feel of form fields.
• Button Tab: Design checkout and continue buttons.
• Payment Section Tab: Control the design of the payment methods section.
• Success/Error Messages Tab: Style messages that appear after submission.
• Product Options Tab: Customize how product variations are displayed.
• Order Bump Tab: Style and manage the Order Bump layout.
• Additional Tab: Add custom CSS for advanced tweaks.

4 & 5. Upsell & Downsell Pages – Offer Blocks

These pages support product variations and feature dynamic Offer Blocks for streamlined offer handling.

Available blocks for the Upsell & Downsell Pages :

• Offer Accept/Reject Button
• Offer Accept/Reject Link
• Offer Product Title
• Offer Product Price
• Offer Product Description
• Product Variations
• Quantity Selector

All content is dynamically rendered based on the offered product.

6. Thank You Page – Order Review Block

This block is used to display post-purchase information and order details.

• General Tab: Show or hide order review sections.
• Spacing Tab: Adjust spacing between headings and sections.
• Heading Tab: Style the heading text and typography.
• Section Tab: Customize the text, colors, and fonts for each section.
• Order Review Tab: Manage order item styling.
• Downloads Tab: Display and style downloadable product info (if available).
• Order Details Tab: Customize text and design for order metadata.
• Customer Details Tab: Style billing and shipping details.
• Additional Tab: Add custom CSS as needed.

These Gutenberg blocks give you full control over the design of each step, without needing shortcodes. However, if you are using another page builder, you can continue using it with guidance from our dedicated documentation on shortcode placement.

These modules are being introduced by CartFlows and not the Beaver Builder to bring a whole new experience. For which we have divided them into two parts CartFlows free and the CartFlows Pro modules.

In the CartFlows, you will get modules for all the shortcodes that are available in the free as well as Pro version and they are as follows

• Next Step Button/Link Module
• Optin Form module
• Checkout Form Module
• Upsell & Downsell Shortcodes including Product variations and offer accept & reject modules.
• Order Review Module ( Thank you page).

These modules will be found only on their respective pages. That means when you open/edit the landing page in the Beaver Builder editor then you will see the Next Step Button/Link module. Similarly for the rest of the steps/pages.

Let’s see, each module page/step wise and how it’s setting is managed.

Page 1: Landing page and it’s module

• This Page has one module and that is the Next Step Button Module.

# Settings in General Tab: Here you will get the settings to change/add/update/delete the string on the next-step button and you can add an icon as well.

# Settings in Style Tab: There are two tabs one is General & Content in which you will get all the designing options to design the button/link.

#Settings in Typography Tab: In this section you will get all the Typography Options such as Font Size and Font Family etc.

#Settings in Advanced Tab: In this section you will get all the designing option of the section on which the model is displayed.

Page 2: Optin Page and it’s module

• This Page has one module and that is the Optin Form module.

# Settings in Style Tab: In this section you will get the styling options for the form text, field texts and the button texts.

# Settings in Advanced Tab: In this section you will get all the designing option of the section on which the module is displayed.

Page 3: Checkout Page & it’s module

• This page also has one module and various design options for various features. Such as Bump Order, Precheck Offer etc.

# Settings in General Tab: Here in this tab you will get the content setting for Billing & shipping Fields, Bump & pre checkout offer and product options as well as Checkout Layout Options.

# Settings in Style Tab: Here in this section, you can change the styling of the checkout page features including Heading, Input Fields, Buttons, Payment Section & Validation Error messages.

# Settings in Advanced Tab: In this section you will get all the designing options of the section on which the module is displayed.

Page 4 & 5: Upsell & Downsell pages

• As you all know, these pages support variation products as well. That means you can display and sell the variation products from the upsell & downsell pages. 
• By default there are several shortcodes which are available in the backend setting of these pages similarly for the same, we have introduced a Beaver Builder module for it.

# Settings in Style Tab: There are separate styling options for each of the modules.These modules includes

• Offer Yes/No Button: To display the offer accept or reject button.
• Offer Yes/No Link: To display the offer accept or reject links.
• Offer Product Title: Displays the offer product title and dynamically displayed.
• Offer Product Price: Displays the offered product price and dynamically displayed.
• Offer Product Description: To display the product’s description and dynamically displayed.
• Offer Product variation : To display the variation of the product if it is available )
• Offer Product Quantity field : To give option to the user to select the quantity of offered product.

Page 6: Thank you age & it’s module

• Using this module you can design setting as well as you can enable/disable the sections which are displayed in the thank you page order review form

# Settings in the General Tab: From this tab you will be able to change the heading of the thank you shortcode as well as options to enable/disable the sections on the thank you page.

# Settings in the Style Tab: This tab has all the required styling options to change the look and feel as well as the overall appearance of the order review form.

# Settings in Advanced Tab: In this section you will get all the designing options of the section on which the module is displayed.

All of the modules and settings are provided to provide more flexibility while designing the CartFlows pages and to avoid the confusion regarding which shortcode needs to be added and on which page has to be added. 

If you are not using the Beaver Builder Page Builder, and want to use it in the default way i:e using the shortcode then this article will help you to understand the right places of the shortcodes.

Happy Designing!!