How to Create an Order Bump
An order bump allows you to offer additional products during checkout. Follow the steps below to set one up using the form builder and a bit of custom CSS.
1. Add a Purchase Form to Your Canvas:
- Drag the Purchase Form element onto the form canvas.
2. Open the Purchase Form Settings:
- Click on the purchase element to bring up the right-hand sidebar.
3. Add Products to the Form:
- In the sidebar, click on Products, then use the dropdown arrow to add products.
4. Add Your Main Product and Order Bump:
- Add at least two products:
- One will be the main product.
- The second (or more) will be the order bump(s).
5. Make the Main Product Required:
- Hover over the first product (main product) in the sidebar.
- Click the gear icon and toggle “Required” to ON.
6. Set the Order Bump Default:
- Click the gear icon on product 2 (the bump).
- Toggle “Selected by Default” if you want it pre-selected.
7. Understand Checkbox Behavior:
- Product 1 is mandatory (cannot be deselected).
- Product 2 is optional, but can be pre-selected.
8. Add Descriptions to Your Products:
- Go to Payments > Products.
- Find the product used as the order bump.
- Enter a Product Name (large font on form) and Description (smaller text).
9. Style the Order Bump with CSS:
- Add the form to your order page.
- Then paste the following CSS code into the page’s code editor:
.purchase_container > div > div:nth-child(2) > div > div > div:nth-child(2), .purchase_container > div > div:nth-child(2) > div > div > div:nth-child(3) {
border: 3px dashed red !important;
border-radius: 10px;
padding: 20px 20px 0px 20px;
background: white;}
