Customize Checkout Upsell

Overview of customizing the appearance of the Checkout upsell at the checkout page.

Remember to add the "BOGOS Checkout Upsell" block in your theme editor so the upsell widget can appear at checkout. Here’s how. If you need assistance, feel free to contact our customer support.

1. General

There are 2 widget layouts to choose from for displaying upsell products:

  • Carousel: Displays upsell products in a scrollable horizontal format.

  • Stack: Displays upsell products in a vertical list.

1.2 Widget position

To reposition the widget on your checkout page, go to your theme editor and make edits:

  • Add: On the left, click "Add app block" in any section to insert the upsell widget where you want.

  • Move: Drag and drop the block (you just added) within the section, or click on "This is the placeholder of Checkout Upsell" and use the Move Up/Move Down icons.

  • Delete: Click on "This is the placeholder of Checkout Upsell" and select the red Delete icon to remove the widget.

1.3 Widget elements

  • Activate upsell message: Turn this on to display a message at the top of your upsell widget.

  • Activate compare-at-price: Turn this on to display the original price of the upsell product before the discount is applied.

2. Widget info

  • Upsell message: Customize the message displayed at the top of the upsell widget.

  • Button text: Choose the text for the button that customers will click to add the upsell product to their checkout summary.

3. Color

The color options are kept simple to match Shopify's checkout style. You can customize these 3 colors:

  • Button Style: The button to add the upsell product to the checkout summary.

  • Background Color: The background color of the upsell widget.

  • Price Color: The discounted price that the customer will pay.

If you select "Accent Color" for the price, BOGOS will sync the price color with the accent color set in your checkout theme.

To change it, click at the blue sentence “Setting your store accent color here” to be redirected to your theme editor and then adjust the accent color you want.

Changing the accent color will also update other elements that use it at your checkout.

Last updated

Was this helpful?