CartFlows Order Bump Positions and Styles

CartFlows lets you add an Order Bump to your checkout page, a one-click add-on offer shown right next to the customer’s order. You can control both where the offer appears on the page and how it looks, without touching any code.

This guide walks through the four available positions and the five visual styles, so you can choose the combination that fits your checkout page best.

How Order Bump Placement Works

Every Order Bump has two layout settings that work independently of each other.

• Position decides where on the checkout page the Order Bump appears, relative to the billing form, the order summary, and the payment section.
• Order Bump Skin decides how the offer card itself is laid out: where the checkbox sits, whether there’s a checkbox at all, and how the image, title, and price are arranged.

Because these two settings are separate, you can pair any style with any position, and each Order Bump on a checkout step can have its own combination.

How to Set the Order Bump Position

Step 1. From your WordPress admin, go to CartFlows → Funnels and open the funnel that contains the checkout step you want to update.

Step 2. Click the checkout step settings (gear icon), then open Order Bumps from the left sidebar.

Step 3. Click the gear icon next to the Order Bump you want to update, or add a new one.

Step 4. Click the Styles tab.

Step 5. Under Layout, click the Position dropdown.

Step 6. Choose one of the four positions:

• Before Checkout — appears at the very top of the checkout page, above the billing details form.
• After Customer Details — appears once the billing and shipping fields end, before the order summary.
• After Order Details — appears after the cart and order summary section. This is the default placement.
• After Payment Details — appears near the bottom of the page, after the payment method options.

Step 7. Click Save Settings.

Here’s what Before Checkout looks like on the live checkout page. The Order Bump sits above the billing form, right below the express payment buttons:

How to Change the Order Bump Style

Step 1. With the Order Bump’s Styles tab still open, find Order Bump Skin under Layout.

Step 2. Click the dropdown and choose from Style 1 through Style 5. The preview above updates immediately so you can compare them.

Style 1 places the checkbox in its own row at the top, with the product image, title, and price in a card below it.

Style 2 puts the offer title at the top, followed by the product image and price, with the checkbox in its own row at the bottom.

Style 3 condenses everything into a single row. The checkbox, product image, title, and price all sit side by side.

Style 4 uses the same compact row as Style 3, but replaces the checkbox with an Add link. Customers accept the offer by clicking Add instead of ticking a box.

Style 5 shows the product image on the left, with the title, price, and checkbox stacked together on the right.

Step 3. Once you’ve picked a style, use the Width dropdown to set the Order Bump to 50% or 100% of the checkout column.

Step 4. Click Save Settings.

Frequently Asked Questions