Once a Bold Upsell offer has been created on your store, you can adjusting the style with CSS.
Changing the design of Bold Upsell's popup modal is a good way to help align the style with your brand and increase the effectiveness of your Upsell and Cross-Sell offers.
We have created some Custom Upsell Templates using CSS that will allow you to simply copy and paste the code into Bold Upsell's admin. These are sorted by theme below.
Alert
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.