How to add order bumps

We'll go into detail on how to add order bumps on your checkouts, helping you increase your average order value.

Order bumps allow your customers to add extra products or services to their purchase with a single click, seamlessly increasing their order value. With Checkout Page, you can easily set up and manage order bumps with variants.

Click here to learn about product variants

This guide is designed as an overview and introduction to adding order bumps to your checkout pages.

Create an order bump

Create an order bump by adding your first or new variant to your page:

1. Click Product from the top menu
2. Click Variants from the left-side menu
3. Click +Add variant to add a new variant that you will use as your order bump

4. Add the variant title (ex. Order bump), the product/service name, a description and image if you'd like, and the price.

5. Click Save

Order bump design

Text alignment

By default, your order bump text is aligned to the left.

You can center-align the text within your order bump in the Layout section.

Add HTML hyperlink to variant options

You can add a hyperlink to the order bump name and/or the variant option description to take your customers to another page of your choosing.

The following is the HTML hyperlink line that you can place in the name or description.

<a href="https://example.com" target="_blank">Click here</a>

Order bump colors

You can set the background color of your order bump so that it stands out on your page:

1. Navigate to Design from the top menu
2. Click Colors from the left-side menu
3. Click Variant background color
4. Choose your preferred color

You can also set the colors of the order bump when it is selected so that the selection is clear to your customers:

1. Navigate to Design from the top menu
2. Click Colors from the left-side menu
3. Click Variant selected background color to set the color when the order bump is selected
4. Click Variant selected border color to set the color when the order bump is selected
5. Choose your preferred colors

Custom CSS

You can add customized designs to your order bump if you'd like it to stand out even more to your customers.

1. Navigate to Design from the top menu
2. Click Custom CSS from the left-side menu
3. Add the CSS code that will achieve your desired design

Below is an example of what the order bump can look like with added CSS.

Click here to learn more about Custom CSS