Custom Upsell Template Styles

This guide provides a few custom Upsell templates to help you quickly style the the Product Page Pop-up and Cart Page Pop-up offers. These templates are sorted by theme and allow you to simply copy and paste the CSS code into your theme files for a new look.

Pro-Tip: For even more control over the look and style of your Upsell pop-ups, try our Advanced Pop-Up Modal Customization tool.

Alert: 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 Storetasker.

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.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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;
}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click 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.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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);
}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

Debut

Debut Example

Setup

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

From Shopify's admin, select Online Store.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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%;
} */

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

Impulse

Impulse Example

Setup

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

From Shopify's admin, select Online Store.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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;
}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

Prestige

Prestige Example

Setup

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

From Shopify's admin, select Online Store.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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;
}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

Turbo

Turbo Example

Setup

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

From Shopify's admin, select Online Store.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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;
}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

CSS Design Inspirations

Clean

Solid Background

Setup

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

From Shopify's admin, select Online Store.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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 {}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

Centered Alignment

Branded Header

Setup

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

From Shopify's admin, select Online Store.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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 {}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click 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.
Click the three dots (...) next to your theme, and select Edit code.
Expand the Assets folder.
Click on the New File icon.

Name the file bold-custom.css.

.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 {}

Click Save.
Expand the Layout folder, and open theme.liquid.
Copy and paste this code directly under the {{ content_for_header }}:
```
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
```
Click Save.

CSS by Theme

Brooklyn Classic

Setup

Brooklyn Playful

Setup

Debut

Setup

Impulse

Setup

Prestige

Setup

Turbo

Setup

CSS Design Inspirations

Clean

Setup

Centered Alignment

Setup

Branded Buttons & Borders

Setup

Related articles

Was this page helpful?