Custom Upsell Template Styles

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 offers.

We have created some custom Upsell templates using CSS to allow you to simply copy and paste the code into your theme. These are sorted by theme below.

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

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Brooklyn Playful

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Debut

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Impulse

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Prestige

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Turbo

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

CSS Design Inspirations

Customizable Banner

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Clean

Setup

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

1. From Shopify's admin, select Online Store.
2. Select ... next to your theme.
3. Select Edit code.
4. Under Assets, select Add a new asset.
5. Select Create a blank file.
6. Select css in the Extension dropdown.
7. Enter bold-customas the Asset file.
8. Select Done.

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Centered Alignment

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.

Branded Buttons & Borders

Setup

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

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

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

9. Select Save.
10. Under Layout, select theme.liquid.
11. Copy and paste this code directly under the {{ content_for_header }}:

    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

12. Select Save.