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 your theme. These are sorted by theme below.

Select the following theme or template below for a visual example of how the Upsell popup appears on your storefront and steps that you can follow to apply the custom template into your theme.

Note The CSS templates included below are not compatible with Cart Drawer Widget, In-Checkout Widget or After Checkout offers via Bold Cashier, only on Product Page Pop-up and Cart Page Pop-up offers.

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

Brooklyn Classic Example

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select css in the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-modal__content {
    box-shadow: 1px 1px 10px 2px rgba(235, 235, 235, 0.5);
    padding: 2.5rem 3.5rem 1rem;
}
.bold-upsell__intro-heading {
    text-transform: none;
    letter-spacing: 0.05rem;
    margin: 0 0 17.5px;
    font-family:"Old Standard TT",serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    word-wrap: break-word;
    font-family: Old Standard TT;
    font-size: 27px;
    letter-spacing: 0.03em;
    text-align: left;
    color: #3D3F41;
}
.bold-upsell__intro-content{
font-family: Arapey,serif;
font-size: 1.4em;
}
.bold-upsell__products-list {

}
.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus,
.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
    user-select: none;
    appearance: none;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #1f2021;
    background-color: #1f2021;
    color: #fff;
    font-family: Montserrat,sans-serif;;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
}

.bold-upsell__button--secondary,
.bold-upsell__button--secondary:link,
.bold-upsell__button--secondary:visited,
.bold-upsell__button--secondary:hover,
.bold-upsell__button--secondary:active,
.bold-upsell__button--secondary:focus {
    color: #a56600;
    text-decoration: none;
    background: transparent;
    font-family: Montserrat,sans-serif;;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125em;
}
    }
a.bold-upsell__button.bold-upsell__button--primary {
    width: fit-content;
    display: inline;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 1.2em;
  font-family: Arapey,serif;
  font-style: normal;
  font-weight: 400;
  color: #1f2021);
  line-height: 1.3;
}
.bold-product__variant-selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
    line-height: 1.8;
    padding-right: 28px;
    text-indent: 0.01px;
    cursor: pointer;
    padding-top: 11px;
    padding-left: 15px;
    padding-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.3);
    background-color: transparent;
    max-width: 100%;
    border-radius: 2px;
    font-family: Montserrat,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1em;
    width: 55%;
    display: inline;
    float: left;
    margin: 10px 0px;
}
.bold-product__pricing {
    justify-content: normal;
}
.bold-product__price, .bold-product__description, .bold-product-review{
    font-family: Montserrat,sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.8);
    font-size: 180%;
}
.bold-product__title {
    font-family: Montserrat,sans-serif;
    font-style: italic;
    font-size: 1.6em;
    font-family: Arapey,serif;  
    color: rgba(0, 0, 0, 0.8);
    justify-content: left;  
}
.bold-control-group__item {
    display: inline-block;
    width: 40%;
}
#bold-modal-first__window .bold-product__quantity-field {
    margin: 10px 0px;
    text-transform: capitalize;
}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Brooklyn Playful

Brooklyn Playful Example

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select css in the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-modal__content {
    box-shadow: 1px 1px 10px 2px rgba(235, 235, 235, 0.5);
    padding: 2.5rem 3.5rem 1rem;
}
.bold-upsell {
    background: #BDE9F2;
}
.bold-modal__footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(189,233,242, 0.3);
}
.bold-upsell__intro-heading {
    text-transform: none;
    letter-spacing: 0.05rem;
    margin: 0 0 17.5px;
    font-family: Quicksand,sans-serif;
    font-weight: bold;
    font-style: normal;
    line-height: 1.5;
    word-wrap: break-word;
    font-size: 27px;
    letter-spacing: 0.03em;
    text-align: left;
    color: #321863;
}
.bold-upsell__intro-content{
font-size: 1.3em;
}
.bold-upsell__products-list {

}
.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus,
.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {
    line-height: 1.4;
    padding: 12px 30px;
    white-space: normal;
    margin-top: 0;
    min-height: 44px;
    user-select: none;
    appearance: none;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #7737bd;
    color: #fff;
    font-family: Roboto,sans-serif;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
}

.bold-upsell__button--secondary,
.bold-upsell__button--secondary:link,
.bold-upsell__button--secondary:visited,
.bold-upsell__button--secondary:hover,
.bold-upsell__button--secondary:active,
.bold-upsell__button--secondary:focus {
    background-color: #fff;
    border: 1px solid #7737bd;
    color: #7737bd;
    padding: 12px 30px;
    text-decoration: none;
    font-family: Roboto,sans-serif;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125em;
}
    }
a.bold-upsell__button.bold-upsell__button--primary {
    width: fit-content;
    display: inline;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 1.2em;
  font-size: calc(var(--font-size-base) * 1px);
  font-family: var(--font-stack-body);
  font-style: var(--font-style-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  line-height: 1.5;
}
.bold-product__variant-selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
    line-height: 1.8;
    padding-right: 28px;
    text-indent: 0.01px;
    cursor: pointer;
    padding-top: 11px;
    padding-left: 15px;
    padding-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.3);
    background-color: transparent;
    max-width: 100%;
    border-radius: 2px;
    font-family: Roboto,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1em;
    margin: 10px 0px;
    color: #7737bd;
    text-transform: uppercase;
}
.bold-product__pricing {
    justify-content: normal;
}
.bold-product__price, .bold-product__description, .bold-product-review{
    font-family: Roboto,sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.8);
    font-size: 150%;
}
.bold-product__title {
    font-family: Quicksand,sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1.8em;
    color: rgba(0, 0, 0, 0.8);
    justify-content: left;  
    letter-spacing: 0.02em;
    text-align: left;
}
.bold-product {
    background-color: rgba(255,255,255, 1);
}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Debut

Debut Example

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select css in the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-modal__content {
    box-shadow: 1px 1px 10px 2px rgba(235, 235, 235, 0.5);
    padding: 0.2rem 1.5rem 1rem;
}
.bold-upsell__intro-heading {
    font-size: calc(((var(--font-h1-desktop))/ (var(--font-size-base))) * 1em);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 17.5px;
    font-family: var(--font-stack-header);
    font-style: var(--font-style-header);
    font-weight: var(--font-weight-header);
    line-height: 1.2;
    word-wrap: break-word;
}
.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus,
.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {
    display: block;
    width: 100%;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
    user-select: none;
    appearance: none;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 2px;
    background-color: var(--color-btn-primary);
    color: var(--color-btn-primary-text);
    font-family: var(--font-stack-header);
    font-style: var(--font-style-header);
    font-weight: var(--font-weight-header);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
}
a.bold-upsell__button.bold-upsell__button--primary {
    width: fit-content;
    display: inline;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: calc(var(--font-size-base) * 1px);
  font-family: var(--font-stack-body);
  font-style: var(--font-style-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  line-height: 1.5;
}
.bold-product__variant-selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--svg-select-icon);
    background-repeat: no-repeat;
    background-position: right 10px center;
    line-height: 1.8;
    padding-right: 28px;
    text-indent: 0.01px;
    cursor: pointer;
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 8px;
    border: 1px solid var(--color-border-form);
    background-color: var(--color-text-field);
    max-width: 100%;
    border-radius: 2px;
}
/* --------------- */
/* Horizontal Mode */
/* This section will render the upsell items horizontally. Un-comment this if you want to use this mode. */
/* --------------- */
/* .bold-upsell__intro, .bold-upsell__intro-content {
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}
.bold-upsell__intro-heading {
  text-align: center;
}
.bold-modal__btn-close {
    margin-right: 2em;
}
.bold-upsell__products-list .bold-grid__column {
    width: 100%;
}
.bold-grid__column--half .bold-product .bold-product__image, .bold-grid__column--third .bold-product .bold-product__image {
    width: 63%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 15%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.bold-grid__column--half .bold-product .bold-product__image-container, .bold-grid__column--third .bold-product .bold-product__image-container {
    max-height: 300px;
    max-width: 300px;
    width: 100%;
    height: 0;
    padding-bottom: 71%;
    position: absolute;
    margin: 0 auto;
}
.bold-product__title {
    height: 4em !important;
    width: 25em;
}
.bold-product__info, .bold-product__variants, .bold-product__actions {
    width: 85%;
    display: inline-block;
    padding-left: 31%;
    margin-left: 25%;
    margin: 0 0;
    line-height: 1.25em;
}
.bold-product__pricing {
    margin: .5em 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 40%;
} */

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Impulse

Impulse Example

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select cssin the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-upsell__intro-heading {
  font-size: calc(var(--typeHeaderSize)*0.85);
  font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback);
  font-weight: var(--typeHeaderWeight);
  letter-spacing: var(--typeHeaderSpacing);
  line-height: var(--typeHeaderLineHeight);
  margin: 0 0 15px;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.bold-upsell__intro-content {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 0;
    text-align: left;
    font-weight: var(--typeBaseWeight);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
    font-size: var(--typeBaseSize);
    font-family: var(--typeBasePrimary),var(--typeBaseFallback);
    font-size: calc(var(--typeBaseSize)*0.85);
    letter-spacing: var(--typeBaseSpacing);
    line-height: var(--typeBaseLineHeight);
    margin: 0px 0px 5px 0px;
}
.bold-product__button, .bold-product__button:link, .bold-product__button:visited, .bold_product__button:hover, .bold_product__button:active, .bold_product__button:focus,
.bold-upsell__button--primary:link, .bold-upsell__button--primary:visited, .bold-upsell__button--primary:hover, .bold-upsell__button--primary:active, .bold-upsell__button--primary:focus {
    line-height: 1.42;
    text-decoration: none;
    text-align: center;
    white-space: normal;
    font-size: max(calc(var(--typeBaseSize) - 4px), 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    display: inline-block;
    padding: 11px 20px;
    margin: 0;
    width: auto;
    min-width: 90px;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: var(--buttonRadius);
    color: var(--colorBtnPrimaryText);
    background: var(--colorBtnPrimary);
    border: none;
    display: inline-block;
    text-rendering: optimizeSpeed;
    font-family: var(--typeBasePrimary),var(--typeBaseFallback);
    -webkit-writing-mode: horizontal-tb !important;
    word-spacing: normal;
    text-indent: 0px;
    text-shadow: none;
    font: 400 13.3333px Arial;
}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Prestige

Prestige Example

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select cssin the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-upsell__intro-heading {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    color: var(--heading-color);
    transition: color 0.2s ease-in-out;
    margin-bottom: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 2em;
}
.bold-product__title_content {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    color: var(--heading-color);
    transition: color 0.2s ease-in-out;
    margin-bottom: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 1em;
}
.bold-upsell__intro {
    margin: 0px 0px 5px 0px;
    font-size: 1.10em;
    font-weight: inherit;
    font-family: var(--text-font-family);
    font-style: var(--text-font-style);
    color: var(--text-color);
    line-height: 1.65;
}
.bold-product__button, .bold-product__button:link, .bold-product__button:visited, .bold_product__button:hover, .bold_product__button:active, .bold_product__button:focus,
.bold-upsell__button--primary:link, .bold-upsell__button--primary:visited, .bold-upsell__button--primary:hover, .bold-upsell__button--primary:active, .bold-upsell__button--primary:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--button-background);
    text-decoration: none;
    color: white;
    background-color: black;
    -webkit-appearance: button;
    cursor: pointer;
    position: relative;
    padding: 14px 28px;
    line-height: normal;
    border: 1px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
    text-align: center;
    letter-spacing: 0.2em;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 1;
    -webkit-tap-highlight-color: initial;
}
.bold-upsell__button--primary:link, .bold-upsell__button--primary:visited, .bold-upsell__button--primary:hover, .bold-upsell__button--primary:active, .bold-upsell__button--primary:focus {
    width: fit-content;
    display: inline-flex;
}
.bold-product__price.current_price {
    line-height: 1.3;
    color: var(--text-color-light);
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    transition: color 0.2s ease-in-out;
    letter-spacing: 0.2em;
    display: inline-block;
    font-size: 1.25em;
}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Turbo

Turbo Example

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select css in the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus,
.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {
    min-height: 44px;
    margin-bottom: 0;
    height: 100%;
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0px;
    background: #03a196;
    color: #ffffff;
    border: 1px solid #03a196;
    padding: 0 20px;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
    vertical-align: top;
    font-family: Oswald, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    transition: all 0.2s linear;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 0;
}
.bold-upsell__intro-heading {
    font-family: Oswald, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 2em;
    text-transform: uppercase;
    line-height: 1.5;
    color: #333333;
    display: block;
    letter-spacing: .1em;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 auto 15px;
    clear: both;
    padding-top: .5em;
}
.bold-upsell__intro-content {
    margin: 0px 0px .25em 0px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    text-transform: none;
    color: #333333;
    line-height: 1.6em;
    overflow: auto;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
    overflow-wrap: anywhere;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.bold-product__title_content {
    display: block;
    text-align: left;
    margin-bottom: 0.25em;
    font-weight: bold;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-size: 1em;
    text-transform: none;
    color: #333333;
    line-height: 1.6em;
    overflow: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
    overflow-wrap: anywhere;
}
.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {
    width: fit-content;
}
.bold-upsell__button--secondary {
    vertical-align: -webkit-baseline-middle;
    font-weight: 800;
    text-transform: uppercase;
}
.bold-product {
    border-color: #000;
    box-shadow: 0px 0px 0px 2px #fff;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}
.bold-product__variant-selector {
    border-color: darkgrey;
    box-shadow: 0px 0px 0px 2px #fff;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}
.bold-modal__window {
  border-radius: 0px;
}
.bold-modal__btn-close {
  top: 1em;
  right: 1em;
}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

CSS Design Inspirations

Modern

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select css in the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

:root {
--color__white: #fff;
-color__text-subdued: #5a6163;
-color__ui-green: #72ae5c;
--color__primary: #ce181e;
-color__primary-dark: #ce181e;
--color__water: #f0f2f2;
}
.bold-modal__window {
max-width: 640px;
padding: 0 !important;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.25);
}
.bold-modal__btn-close svg g {
fill: var(--color__white);
}
.bold-modal__slider {
padding: 24px 32px;
}
.bold-modal__content {
padding: 0;
margin: 0;
}
.bold-modal__footer {
margin: 0;
padding: 16px 24px;
border: 0;
background: var(--color__water);
}
.bold-grid {
display: flex;
flex-wrap: wrap;
}
.bold-grid__column {
float: none;
width: 100%;
padding: 0;
margin-bottom: 8px;
}
.bold-grid_column .bold-product_title_content::after {
content: "";
display: block;
text-align: left;
font-size: 14px;
font-weight: 400;
opacity: .8;
font-style: italic;
}
.bold-grid__column:nth-child(1) {
order: 3;
}
.bold-grid_column:nth-child(1) .bold-product_title_content::after {
content: "";
}
.bold-grid__column:nth-child(2) {
order: 2;
}
.bold-grid_column:nth-child(2) .bold-product_title_content::after {
content: "";
}
.bold-grid__column:nth-child(3) {
order: 1;
}
.bold-grid_column:nth-child(3) .bold-product_title_content::after {
content: "";
}
.bold-grid:last-child {
margin-bottom: 0 !important;
}
.bold-product {
display: flex;
align-items: center;
justify-content: flex-start;
background: var(--color__water);
border: 0;
}
.bold-product__image {
position: relative !important;
top: 0 !important;
left: 0 !important;
transform: none !important;
}
.bold-product__image-container {
max-height: 56px !important;
max-width: 56px !important;
width: 100% !important;
height: auto !important;
padding-bottom: 0 !important;
margin: 0 !important;
order: 1;
}
.bold-product__details {
order: 2;
flex-grow: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.bold-product-upsell__actions {
order: 3;
}
.bold-product__title {
justify-content: flex-start;
font-size: 16px;
color: var(-color__text-subdued);
text-align: left;
}
.bold-product__info {
width: 100%;
margin: 0;
}
.bold-product__info * {
color: var(-color__text-subdued);
}
.bold-product__price {
font-size: 16px;
font-weight: 600;
color: var(-color__text-subdued);
}
.bold-product__actions {
margin: 0;
}
.bold-product .add-to-cart {
width: 80px;
border: 0;
font-size: 0;
background: var(--color__primary);
border-radius: 4px;
font-weight: 700;
transition: background .3s ease-in-out;
}
.bold-product .add-to-cart::after {
content: "Add";
font-size: 14px;
color: var(--color__white);
}
.bold-product .add-to-cart:hover {
background: var(-color__primary-dark) !important;
}
.bold-product .add-to-cartadded=true {
background: var(-color__ui-green) !important;
}
.bold-product .add-to-cartadded=true::after {
content: "Added" !important;
}
.bold-upsell__button--primary {
border: 0;
background: var(--color__primary);
border-radius: 4px;
padding: 12px 24px;
color: #fff !important; 
font-weight: 700;
font-size: 16px;
transition: background .3s ease-in-out;
}
.bold-upsell__button--primary:hover {
color: var(--color__white);
background: var(-color__primary-dark) !important;
}
.bold-upsell__button--secondary {
color: var(-color__text-subdued);
font-style: italic;
opacity: .8;
font-style: 14px;
}
#bold-modal__title {
padding: 0px 24px 24px;
background: url("https://cdn.shopify.com/s/files/1/0015/3511/5316/files/how-to-tie-skates-101.jpg?v=1565064505");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
position: relative;
}
#bold-modal_title .bold-upsell_intro {
position: relative;
z-index: 5;
}
#bold-modal__title h1 {
color: var(--color__white);
font-weight: 700;
}
#bold-modal__title p {
color: var(--color__white) !important;
opacity: .85;
line-height: 1.5;
font-size: 14px;
margin-top: 8px;
}
#bold-modal__title::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.175) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.bold-product__variants {
width: 115px;
margin-left: 12px;
}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Clean

Solid Background

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select cssin the Extension dropdown.
Enter bold-customas the Asset file.
Select Done.

.bold-modal {
font-family: "ff-meta-web-pro-condensed",sans-serif;
}

.bold-modal__window {}

.bold-modal__btn-close {}

.bold-modal__btn-close:hover {}

.bold-modal__header {}

.bold-modal__content {
background-color: #f3f5f6;
padding: 20px;
margin: -30px -30px 0;
}

.bold-modal_header .bold-modal_content {}

.bold-modal__content:last-child {}

.bold-modal__footer {
background: #f3f5f6;
border: 0;
padding: 0 20px 20px;
}

/* Showing and Hiding the Modal */
div.bold-modal--is-showing {}

div.bold-modal--is-showing .bold-modal {}

/* Transitions and Animations */
.bold-modal--animated {}

.bold-modal--animated .bold-modal__window {}

div.bold-modal-is-showing .bold-modal-animated {}

div.bold-modal-is-showing .bold-modal-animated .bold-modal__window {}

@media only screen and (min-width: 499px) {
.bold-modal {}

.bold-modal__window {}

.bold-modal--animated {}

.bold-modal--animated .bold-modal__window {}
}

@media only screen and (min-width: 879px) {
.bold-modal__window {}
}

/* bold.grid.css */
.bold-grid {}

.bold-grid:after {}

.bold-grid__column {
padding: 0 !important;
}

.bold-grid .bold-grid__column:nth-child(2),
.bold-grid .bold-grid__column:nth-child(3){
margin-left: -1px;
}

@media only screen and (min-width: 499px) {
.bold-grid__column {}

.bold-grid__column--half,
.bold-grid__column--third,
.bold-grid__column--quarter {}

.bold-grid__column--third:first-child {}
}

@media only screen and (min-width: 599px) {
.bold-grid__column--third,
.bold-grid__column--third:first-child {}
}

@media only screen and (min-width: 739px) {
.bold-grid__column--quarter {}
}
/* bold.grid.css */

/* bold.product.css */
.bold-product {
border-color: #e1e3e4;
}

.bold-product__image-container {
order: 1;
}

.bold-product__image {}

.bold-product__control {}

.bold-product__variant-selector {}
/* bold.product.css */

/* bold.upsell.css */
.bold-upsell {}

.bold-upsell__intro {}

.bold-upsell__products-list {}

.bold-upsell_products-list .bold-grid_column {}

.bold-upsell__actions {}

.bold-upsell__button {}
/* bold.upsell.css */

/* =============================================================================
MODAL STYLES
============================================================================= */
.bold-modal {}

.bold-modal__window {

}

.bold-modal__header {}

.bold-modal__footer {}

/* =============================================================================
UPSELL STYLES
============================================================================= */
.bold-upsell {}

.bold-upsell__intro {
outline: 0;
}

.bold-upsell__intro-heading {
font-size: 28px;
line-height: 1.43;
font-weight: 400;
}

.bold-upsell__intro-content {
font-size: 14px;
margin-bottom: 20px !important;
}

.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {}

.bold-upsell__button--primary {
font-size: 15px;
padding: 15px;
font-weight: 600;
background: #fff;
min-width: 175px;
text-align: center;
border-color: #e1e3e4;
}

.bold-upsell__button--primary:hover {}

.bold-upsell__button--primary:active {}

.bold-upsell__button--secondary {}

/* =============================================================================
PRODUCT STYLES
============================================================================= */
.bold-product {
display: flex;
flex-wrap: wrap;
padding: 15px;
background: #fff;
}

.bold-product.bold-grid {}

.bold-product__info,
.bold-product__variants,
.bold-product__actions {}

.bold-product__pricing {
float: left;
margin: 9px 0;
max-width: calc(100% - 80px);
text-align: left;
}

.bold-product__title {
font-weight: 600;
align-items: flex-start;
text-align: left;
font-size: 15px;
line-height: 21px;
}

.bold-product__description {}

.bold-product__price {
font-family: "Courier New", Courier, monospace;
font-weight: 300;
font-size: 20px;
color: #000;
letter-spacing: -1px;
}

.bold-product__price--deleted {
opacity: 1;
color: #677279;
font-size: 60%;
}

.bold-product__control {}

.bold-product__quantity-field {
margin: 0 !important;
height: 44px;
padding: 0 10px;
font-family: "Courier New", Courier, monospace;
letter-spacing: -1px;
}

.bold-product__variant-selector {}

.bold-product__actions {
order: 3;
width: 100%;
}

.bold-product__details {
order: 1;
}

.qty_container {
float: right;
max-width: 80px;
}

.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus {
border: 0;
background: #ee302c;
color: #fff;
font-size: 15px;
font-weight: 800;
border-radius: 0;
}

.bold-product__button:hover {
opacity: 0.8;
}

.bold-product__button:active {}

/* =============================================================================
THIRD PARTY APPS STYLES
============================================================================= */

#bold-upsell-modal-window .yotpo {}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Centered Alignment

Branded Header

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select cssin the Extension dropdown.
Enter bold-custom as the Asset file.
Select Done.

.bold-modal {
font-family: "p22-underground", sans-serif;
}

.bold-modal__window {}

.bold-modal__btn-close {}

.bold-modal__btn-close:hover {}

.bold-modal__header {}

.bold-modal__content {
background-color: #fff;
padding: 60px 60px 0;
margin: -30px -30px 0;
}

.bold-modal_header .bold-modal_content {}

.bold-modal__content:last-child {}

.bold-modal__footer {
background: #fff;
border: 0;
padding: 0 0 60px;
text-align: center;
}

/* Showing and Hiding the Modal */
div.bold-modal--is-showing {}

div.bold-modal--is-showing .bold-modal {}

/* Transitions and Animations */
.bold-modal--animated {}

.bold-modal--animated .bold-modal__window {}

div.bold-modal-is-showing .bold-modal-animated {}

div.bold-modal-is-showing .bold-modal-animated .bold-modal__window {}

@media only screen and (min-width: 499px) {
.bold-modal {}

.bold-modal__window {}

.bold-modal--animated {}

.bold-modal--animated .bold-modal__window {}
}

@media only screen and (min-width: 879px) {
.bold-modal__window {}
}

/* bold.grid.css */
.bold-grid {}

.bold-grid:after {}

.bold-grid__column {}

.bold-grid .bold-grid__column:nth-child(2),
.bold-grid .bold-grid__column:nth-child(3){
margin-left: -1px;
}

@media only screen and (min-width: 499px) {
.bold-grid__column {}

.bold-grid__column--half,
.bold-grid__column--third,
.bold-grid__column--quarter {}

.bold-grid__column--third:first-child {}
}

@media only screen and (min-width: 599px) {
.bold-grid__column--third,
.bold-grid__column--third:first-child {}
}

@media only screen and (min-width: 739px) {
.bold-grid__column--quarter {}
}
/* bold.grid.css */

/* bold.product.css */
.bold-product {
border-color: #e1e3e4;
}

.bold-product__image-container {
order: 1;
}

.bold-product__image {}

.bold-product__control {}

.bold-product__variant-selector {}
/* bold.product.css */

/* bold.upsell.css */
.bold-upsell {}

.bold-upsell__intro {}

.bold-upsell__products-list {}

.bold-upsell_products-list .bold-grid_column {}

.bold-upsell__actions {}

.bold-upsell__button {}
/* bold.upsell.css */

/* =============================================================================
MODAL STYLES
============================================================================= */
.bold-modal {}

.bold-modal__window {

}

.bold-modal__header {}

.bold-modal__footer {}

/* =============================================================================
UPSELL STYLES
============================================================================= */
.bold-upsell {}

.bold-upsell__intro {
outline: 0;
color: #223b4c;
text-align: center;
}

.bold-upsell__intro-heading {
font-size: 32px;
line-height: 38px;
font-weight: 400;
max-width: 400px;
margin: 0 auto;
}

.bold-upsell__intro-content {
font-size: 18px;
line-height: 24px;
margin-bottom: 20px !important;
max-width: 300px;
margin: 5px auto 0 !important;
}

.bold-upsell__button {
margin: 0 15px;
}

.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {}

.bold-upsell__button--primary {
font-size: 15px;
padding: 0;
font-weight: 600;
background: #fff;
border: 0;
}

.bold-upsell__button--primary:hover {}

.bold-upsell__button--primary:active {}

.bold-upsell__button--secondary {
margin: 0;
}

/* =============================================================================
PRODUCT STYLES
============================================================================= */
.bold-product {
background: none;
display: flex;
flex-wrap: wrap;
padding: 15px;
border: 0;
}

.bold-product.bold-grid {}

.bold-product__info {
margin-bottom: 0;
}

.bold-product__info,
.bold-product__variants,
.bold-product__actions {}

.bold-product__pricing {
margin: 2px 0 0;
}

.bold-product__title {
font-weight: 600;
align-items: flex-start;
text-align: center;
font-size: 19px;
line-height: 23px;
color: #223b4c;
}

.bold-product__description {}

.bold-product__price {
font-family: "p22-underground", sans-serif;
font-weight: 400;
font-size: 14px;
color: #223b4c;
}

.bold-product__price--deleted {
opacity: 1;
color: #677279;
font-size: 60%;
}

.bold-product__control {}

.bold-product__quantity-field {}

.bold-product__variant-selector {}

.bold-product__actions {
order: 3;
width: 100%;
}

.bold-product__details {
order: 1;
width: 100%;
}

.qty_container {}

.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus {
display: inline-block;
border: 1px solid #092d65;
background: #092d65;
color: #fff;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 10px 25px 7px;
border-radius: 4px;
transition: all 0.2s;
}

.bold-product__button:hover {
background: #fff;
color: #092d65;
}

.bold-product__button:active {}

/* =============================================================================
THIRD PARTY APPS STYLES
============================================================================= */

#bold-upsell-modal-window .yotpo {}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Branded Buttons & Borders

Orange Border and Buttons

Setup

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

From Shopify's admin, select Online Store.
Select ... next to your theme.
Select Edit code.
Under "Assets", select Add a new asset.
Select Create a blank file.
Select cssin the Extension dropdown.
Enter bold-customas the Asset file.
Select Done.

.bold-modal {
font-family: "trade-gothic-next", sans-serif;
}

.bold-modal__window {
border-radius: 0;
border: 5px solid #e78e34;
}

.bold-modal__btn-close {}

.bold-modal__btn-close:hover {}

.bold-modal__header {}

.bold-modal__content {
background-color: #fff;
padding: 30px 30px 0;
margin: -30px -30px 0;
}

.bold-modal_header .bold-modal_content {}

.bold-modal__content:last-child {}

.bold-modal__footer {
background: #fff;
border: 0;
padding: 0 0 30px;
text-align: center;
}

/* Showing and Hiding the Modal */
div.bold-modal--is-showing {}

div.bold-modal--is-showing .bold-modal {}

/* Transitions and Animations */
.bold-modal--animated {}

.bold-modal--animated .bold-modal__window {}

div.bold-modal-is-showing .bold-modal-animated {}

div.bold-modal-is-showing .bold-modal-animated .bold-modal__window {}

@media only screen and (min-width: 499px) {
.bold-modal {}

.bold-modal__window {}

.bold-modal--animated {}

.bold-modal--animated .bold-modal__window {}
}

@media only screen and (min-width: 879px) {
.bold-modal__window {}
}

/* bold.grid.css */
.bold-grid {}

.bold-grid:after {}

.bold-grid__column {}

.bold-grid .bold-grid__column:nth-child(2),
.bold-grid .bold-grid__column:nth-child(3){
margin-left: -1px;
}

@media only screen and (min-width: 499px) {
.bold-grid__column {}

.bold-grid__column--half,
.bold-grid__column--third,
.bold-grid__column--quarter {}

.bold-grid__column--third:first-child {}
}

@media only screen and (min-width: 599px) {
.bold-grid__column--third,
.bold-grid__column--third:first-child {}
}

@media only screen and (min-width: 739px) {
.bold-grid__column--quarter {}
}
/* bold.grid.css */

/* bold.product.css */
.bold-product {
border-color: #e1e3e4;
}

.bold-product__image-container {
order: 1;
max-width: 150px !important;
max-height: 150px !important;
padding-bottom: 150px !important;
}

.bold-product__image {}

.bold-product__control {}

.bold-product__variant-selector {}
/* bold.product.css */

/* bold.upsell.css */
.bold-upsell {}

.bold-upsell__intro {}

.bold-upsell__products-list {}

.bold-upsell_products-list .bold-grid_column {}

.bold-upsell__actions {}

.bold-upsell__button {}
/* bold.upsell.css */

/* =============================================================================
MODAL STYLES
============================================================================= */
.bold-modal {}

.bold-modal__window {
border-radius: 0;
}

.bold-modal__header {}

.bold-modal__footer {}

/* =============================================================================
UPSELL STYLES
============================================================================= */
.bold-upsell {}

.bold-upsell__intro {
outline: 0;
color: #000;
text-align: left;
margin: 0;
}

.bold-upsell__intro-heading {
font-family: "trade-gothic-next-compressed", sans-serif;
font-size: 64px;
line-height: 72px;
font-weight: 400;
text-transform: uppercase;
margin: 0 auto;
}

.bold-upsell__intro-content {
font-size: 16px;
line-height: 22px;
margin-bottom: 20px !important;
margin: 0 auto !important;
}

.bold-upsell__button {
margin: 0 15px;
}

.bold-upsell__button--primary:link,
.bold-upsell__button--primary:visited,
.bold-upsell__button--primary:hover,
.bold-upsell__button--primary:active,
.bold-upsell__button--primary:focus {}

.bold-upsell__button--primary {
font-size: 15px;
padding: 0;
font-weight: 600;
background: #fff;
border: 0;
}

.bold-upsell__button--primary:hover {}

.bold-upsell__button--primary:active {}

.bold-upsell__button--secondary {
margin: 0;
}

/* =============================================================================
PRODUCT STYLES
============================================================================= */
.bold-product {
background: none;
display: flex;
flex-wrap: wrap;
padding: 15px;
border: 0;
}

.bold-product.bold-grid {}

.bold-product__info {
margin-bottom: 0;
}

.bold-product__info,
.bold-product__variants,
.bold-product__actions {}

.bold-product__pricing {
margin: 10px 0 0;
}

.bold-product__title {
font-family: "trade-gothic-next-compressed", sans-serif;
font-weight: 600;
align-items: flex-start;
text-align: center;
font-size: 20px;
line-height: 20px;
color: #000;
text-transform: uppercase;
}

.bold-product__description {}

.bold-product__price {
font-size: 16px;
color: #000;
}

.bold-product__price--deleted {
opacity: 1;
color: #677279;
font-size: 80%;
}

.bold-product__control {}

.bold-product__quantity-field {}

.bold-product__variant-selector {}

.bold-product__actions {
order: 3;
width: 100%;
}

.bold-product__details {
order: 1;
width: 100%;
}

.qty_container {}

.bold-product__button,
.bold-product__button:link,
.bold-product__button:visited,
.bold_product__button:hover,
.bold_product__button:active,
.bold_product__button:focus {
display: inline-block;
background: #e78f34;
color: #fff;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
padding: 15px 35px;
transition: all 0.2s;
}

.bold-product__button:hover {
background: #000;
}

.bold-product__button:active {}

/* =============================================================================
THIRD PARTY APPS STYLES
============================================================================= */

#bold-upsell-modal-window .yotpo {}

Select Save.
Under Layout, select theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Select Save.

Custom Upsell Template Styles

CSS by Theme

Brooklyn Classic

Setup

Brooklyn Playful

Setup

Debut

Setup

Impulse

Setup

Prestige

Setup

Turbo

Setup

CSS Design Inspirations

Customizable Banner

Setup

Clean

Setup

Centered Alignment

Setup

Branded Buttons & Borders

Setup