Customize Checkout Upsell
Overview of customizing the appearance of the Checkout upsell at the checkout page.
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?