Overview
Once a Bold Upsell offer has been created on your store, you can begin adjusting the styling!
Changing the design of Bold Upsell's popup modal is important to help match with your brand and theme style. This could also help increase the effectiveness of your Upsell and Cross-Sell offers that appear to your customers!
We have created Custom Upsell Templates using CSS style coding that will allow you to simply copy and paste into Bold Upsell's admin. These will be sorted by theme!
Note: The CSS templates included below are not compatible with After Checkout offers via Bold Cashier, only on Add to Cart and Before Checkout offers.
Select the following theme or template below for a visual example of how the upsell popup will appear on your storefront and steps that you can follow to apply the custom template into Bold Upsell.
Pro-Tip
Making adjustments to Bold Upsell requires knowledge of CSS. If you are not comfortable with adding CSS code, one of our partners could complete one of these customizations or a similar customization as a paid customization on your store. Please visit HeyCarson via this form.
CSS by Theme
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Brooklyn Classic code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Brooklyn Playful code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Debut code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Impulse code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Prestige code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Turbo code into the Custom HTML/css input box.
- Select Save.
CSS Design Inspirations
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Customizable Banner code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Clean code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Centered Alignment code into the Custom HTML/css input box.
- Select Save.
Setup
To apply this template on your store, please follow these steps:
- From the homepage of Bold Upsell's admin, select Settings.
- Select Upsell Settings.
- In the Custom Design section, copy and paste the Branded Buttons & Borders code into the Custom HTML/css input box.
- Select Save.