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 five 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 five positions:

• Above customer details — appears at the very top of the checkout page, above the billing details form.
• Below customer details — appears once the billing and shipping fields end.
• Above order summary — appears directly above the order summary, before the products and total.
• Below order summary — appears after the order summary. This is the default placement.
• Below payment gateways — appears near the bottom of the page, after the payment method options.

Step 7. Click Save Settings.

Here’s what Above customer details 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, click Order Bump Skin under Layout. The Choose a skin panel opens.

Step 2. Each skin is shown with a live preview and a short description, and the one you are using is marked Applied. Click a skin to apply it. This only changes the layout, so you can switch back anytime.

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