Custom Upsell Template Styles

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

Brooklyn Classic Example

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Brooklyn Classic code into the Custom HTML/css input box.
  4. Select Save.

Brooklyn Playful Example

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Brooklyn Playful code into the Custom HTML/css input box.
  4. Select Save.

Debut Example

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Debut code into the Custom HTML/css input box.
  4. Select Save.

Impulse Example

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Impulse code into the Custom HTML/css input box.
  4. Select Save.

Prestige Example

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Prestige code into the Custom HTML/css input box.
  4. Select Save.

Turbo Example

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Turbo code into the Custom HTML/css input box.
  4. Select Save.

 


 

CSS Design Inspirations

Modern

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Customizable Banner code into the Custom HTML/css input box.
  4. Select Save.

Solid Background

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Clean code into the Custom HTML/css input box.
  4. Select Save.

Branded Header

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Centered Alignment code into the Custom HTML/css input box.
  4. Select Save.

Orange Border and Buttons

 


 

Setup

To apply this template on your store, please follow these steps:

  1. From the homepage of Bold Upsell's admin, select Settings.
  2. Select Upsell Settings.
  3. In the Custom Design section, copy and paste the Branded Buttons & Borders code into the Custom HTML/css input box.
  4. Select Save.
Was this article helpful?
0 out of 0 found this helpful