Customizing Upsell with CSS allows you to have greater control over the customizations. This article shows you how you can customize the Upsell window by applying your own CSS Styling and outlines some common Upsell CSS selectors.
Note: If you require assistance with adding custom CSS code to Bold Upsell, you can reach out to one of our partners such as Storetasker for a paid customization.
Customize the Upsell Window
To adjust the placement of the elements in the Upsell window, please follow these steps:
- From Shopify's admin, select Online Store, then Actions > Edit code.
- Under Snippets, select Add a new snippet.
- Enter bold-custom-upsell-template as the snippet name.
- Select Create snippet.
-
<script> window.BOLD.upsell = window.BOLD.upsell || {}; window.BOLD.upsell.templates = window.BOLD.upsell.templates || {}; {% comment %} Note: Uncomment to customize the "upsellSingleProduct" template {% raw %} window.BOLD.upsell.templates['upsellSingleProduct'] = `<article id="prod_id_{{product.id}}_{{key}}" class="bold-product bold-grid offer_id_{{product.upsell_offer_settings.offer_id}}"> <div class="bold-product__image-container bold-grid__column bold-grid__column--half"> <img src="" alt="" class="bold-product__image" /> </div> <div class="bold-product__details bold-grid__column bold-grid__column--half"> <div class="bold-product__above_content_button_container"> <div class="bold-product__actions bold-product-options__actions" style="display: none;"> <a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a> </div> <div class="bold-product__actions bold-product-upsell__actions"> <a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a> </div> </div> <div class="bold-product__info"> <div class="bold-product-review"> <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div> </div> <div class="bold-product__title">{{product.title}}</div> <div class="bold-product__description">{{product.description}}</div> </div> <div class="bold-product__pricing"> <div class="bold-product__price"><del class="bold-product__price--deleted money"></del></div> <div class="bold-product__price current_price money"></div> <div class="bold-product__price additional_price"></div> <div class="bold-product__message limit_disclaimer" style="display: none;">{{product.upsell_offer_settings.disclaimer_text}}</div> </div> <div class='variant_info_container'></div> <div class="qty_container"> <div class="bold-control-group__item bold-product__quantity qty_input_container" style="display:none;"> <input type="number" class="bold-product__control bold-product__quantity-field qty_input" placeholder="{{language_settings.qty_text}}: 1" min="1" > </div> </div> <div class="bold-product__below_content_button_container"> <div class="bold-product__actions bold-product-options__actions" style="display: none;"> <a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a> </div> <div class="bold-product__actions bold-product-upsell__actions"> <a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a> </div> </div> </div> </article>`; {% endraw %} {% endcomment %} {% comment %} Note: Uncomment to customize the "upsellThreeOrMoreProducts" template {% raw %} window.BOLD.upsell.templates['upsellThreeOrMoreProducts'] = `<div class="bold-grid__column bold-grid__column--third"> <article id="prod_id_{{product.id}}_{{key}}" class="bold-product offer_id_{{product.upsell_offer_settings.offer_id}}"> <div class="bold-product__image-container"> <img src="" alt="" class="bold-product__image" /> </div> <div class="bold-product__actions bold-product-options__actions" style="display: none;"> <a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a> </div> <div class="bold-product__actions bold-product-upsell__actions"> <a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a> </div> <div class="bold-product__details"> <div class="bold-product__info"> <div class="bold-product-review"> <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div> </div> <div class="bold-product__title"> <div class="bold-product__title_content"> {{product.title}} </div> </div> <div class="bold-product__description">{{product.description}}</div> </div> <div class="bold-product__pricing"> <div class="bold-product__price"><del class="bold-product__price--deleted money"></del></div> <div class="bold-product__price current_price money"></div> <div class="bold-product__price additional_price"></div> <div class="bold-product__message limit_disclaimer" style="display: none;">{{product.upsell_offer_settings.disclaimer_text}}</div> </div> <div class="variant_info_container"></div> <div class="qty_container"> <div class="bold-control-group__item bold-product__quantity qty_input_container" style="display: none;"> <input type="number" class="bold-product__control bold-product__quantity-field qty_input" placeholder="{{language_settings.qty_text}}: 1" min="1" > </div> </div> </div> </article> </div>`; {% endraw %} {% endcomment %} {% comment %} Note: Uncomment to customize the "upsellTwoProducts" template {% raw %} window.BOLD.upsell.templates['upsellTwoProducts'] = `<div class="bold-grid__column bold-grid__column--half"> <article id="prod_id_{{product.id}}_{{key}}" class="bold-product offer_id_{{product.upsell_offer_settings.offer_id}}"> <div class="bold-product__image-container"> <img src="" alt="" class="bold-product__image" /> </div> <div class="bold-product__actions bold-product-options__actions" style="display: none;"> <a href="#add-to-cart" class="bold_options_btn bold-product__control bold-product__button bold-product__button--primary">{{language_settings.customize_options_text}}</a> </div> <div class="bold-product__actions bold-product-upsell__actions"> <a href="#add-to-cart" data-bold-component-id="" class="add-to-cart bold-product__control bold-product__button bold-product__button--primary standard_primary" added="false">{{language_settings.addtocart_button_text}}</a> </div> <div class="bold-product__details"> <div class="bold-product__info"> <div class="bold-product-review"> <div class="yotpo bottomLine" data-product-id="{{ product.id }}"></div> </div> <div class="bold-product__title">{{{product.title}}}</div> <div class="bold-product__description">{{{product.description}}}</div> </div> <div class="bold-product__pricing"> <div class="bold-product__price"><del class="bold-product__price--deleted money"></del></div> <div class="bold-product__price current_price money"></div> <div class="bold-product__price additional_price"></div> <div class="bold-product__message limit_disclaimer" style="display: none;">{{product.upsell_offer_settings.disclaimer_text}}</div> </div> <div class="variant_info_container"></div> <div class="qty_container"> <div class="bold-control-group__item bold-product__quantity qty_input_container" style="display:none;"> <input type="number" class="bold-product__control bold-product__quantity-field qty_input" placeholder="{{language_settings.qty_text}}: 1" min="1" > </div> </div> </div> </article> </div>`; {% endraw %} {% endcomment %} </script> - Adjust the snippet accordingly.
Note: This is where you will adjust the placement of certain elements in the window. The comments around each section of the template need to be removed in order for your changes to be pushed to the storefront.
- Select Save.
- Under Layout, select theme.liquid.
- Find the </body> tag and paste the following code above that line:
{% include "bold-custom-upsell-template" %} - Select Save.
Note: Additional CSS styling may be required to have these elements display correctly in the upsell window. Please see the CSS Styling steps below for more information on where and how to style the modal.
- Test Bold Upsell to see how the app now displays on your storefront.
CSS Styling
After customizing the Upsell modal, you may find that the button colors, as well as the text within the Upsell window does not match your theme's colors and styles.
Please see each section below for more information on how to make some common changes in the Upsell window:
Basics
CSS requires three properties for the desired styling to apply correctly:
- A Class or ID selector - The most common ones regarding our Upsell window are at the bottom of this page.
- The initial declaration - The type of change you want to apply to the class or ID (ex: background-color, color, and text-decoration, are all types of initial declarations).
- The final declaration - The style of the change you want to apply to the class or ID (ex: grey, blue, and underline are all types of final declarations).
Example
If you wanted to add a grey background to the class .bold_modal, the CSS would look like this:
.bold__modal {
background-color: grey;
}The curly brackets are part of the declaration block, and this allows you to add multiple styling rules to a single class (or ID) without having to write the class over and over again.
Example
To set the text color to black for our .bold_modal class, we add this to the declaration block like this:
.bold__modal {
background-color: grey;
color: black;
}You can find much more detailed information on CSS and its styling rules at W3 Schools - CSS.
Colors
Making a simple adjustment to the color scheme of your Upsell window can make a difference in how your customers perceive it. By default, the window displays as white on the background.
This can be easily adjusted using the background-color property:
In the example above, the background color is #182E49, which is a hexadecimal color code for a dark navy-blue color. You can pick out these hexadecimal color codes using an online selector tool like HTML Color Codes.
The CSS code looks like this:
.bold-modal__window {
background-color: #182E49;
}If we want to adjust the color of text fields within the window, use the color declaration:
The styling for this section of the window looks like this:
.bold-product__title {
color: #F8FF00;
}For more information on CSS color properties visit W3 Schools - CSS Colors.
Font/Text
By default, Bold Upsell pulls most of the font styling information from your site's theme into its window. It may not be ideal depending on the type/size/color of the font on the storefront. Font and text style properties allow you to adjust these:
In this example, there is both a color rule and font-size specified to allow this text area to show the way it is. The CSS styling for this would be:
.bold-product__price.current_price.money {
color: darkgreen;
font-size: 24px;
}Note: Sometimes for CSS rules to apply only to certain areas, the class selector used to identify this styling needs to be very specific. For example, in the demonstration above, using just .bold-product__price as our class selector would result in the red $0.05 text to show as dark green and 24 pixels large.
A few other text and font editing properties:
- font-weight - Allows you to bold or thin the text within an element. The font-weight property accepts normal, bold, bolder, lighter, or values of 100 up to 900 (i.e. font-weight: bold;).
- text-align - Adjusts where the text aligns within an element. The text-align value can be center, left or right to change the positioning of the text (i.e. text-align: center;).
- text-decoration - Beautifies your text display with line styling. This declaration can use none, underline, line-through, and overline (i.e. text-decoration: none;).
- text-transform - Change the style of the letters in a specific element. You can use none, capitalize, uppercase, and lowercase. Capitalize will uppercase the first letter of each word in the class/ID whereas uppercase and lowercase changes every letter of the element to that style (i.e. text-transform: uppercase;).
- letter-spacing - Adjusts the amount of space between the letters in an element. This property takes pixel values (either positive or negative) to create or shrink the spacing between letters (i.e. letter-spacing: 2px;).
For more information on font and text styling properties, check out W3 Schools - Fonts and W3 Schools - Text.
Borders
Borders define areas between elements with boxed-in lines that are solid, dotted, black, white, thick, thin, etc. You can define multiple aspects of the border property without having to make multiple declarations.
Our border declaration is a solid, black border that is 1 pixel in size. The CSS statement looks like this:
.bold-upsell__button--primary {
border: 1px solid black;
}This CSS statement allows you to declare the size, type, and color of the border all with one simple border property. For more information on different border styles and how to apply them, check out W3 Schools - Borders.
Common Upsell Class Selectors
Below we've created a diagram to showcase some of the most common class selectors used to style the Upsell window:
- .bold-modal__window - The main selector that targets the entire window.
- .bold-upsell__intro - This targets the text above the order window including the intro heading and intro text.
- .bold-upsell__intro-heading - Targets the window heading (CROSS-SELL TEST).
- .bold-upsell__intro p - Targets the intro paragraph (This is a test of our Cross-Sell functionality...).
- .bold-upsell__products-list - Targets the total lighter area containing the product image and all options.
- .bold-product__title - Targets the product title (Carpentry Screws).
- .bold-product__pricing - Targets the total pricing area.
- .bold-product__actions - Targets the window action (Add to Cart).
- .bold-product__price.current_price.money - Targets the current price ($0.04 CAD).
- .bold-product__price--deleted - Targets the old price ($0.05 CAD).
- .bold-upsell__button--primary - Targets the Continue button.
- .bold-upsell__button--secondary - Targets the No Thanks button.
Note: The underscores located in the above class selectors are double underscores "_ _" = "__".