Custom Upsell Template Styles

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

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