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.

1. General

1. Widget layouts: 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. Images alignment: Control how the product image is positioned inside the widget (top, center, bottom).

2. Border radius: Control how rounded the corners of your widget appear.

3. Widget position:

To reposition the widget on your checkout page, go to your theme editor and make edits the block "BOGOS Checkout Upsell".

For more details, read our [Adjust BOGOS Block].

2. Widget info

• 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.

• 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.