Bold Upsell CSS Styling Guide

Select one of the links below to be brought to that section of the article.

 


 

Customize the Upsell Window

To adjust the placement of the elements in the Upsell window, please follow these steps:

  1. From Shopify's admin, select Online Store, then ActionsEdit code.
  2. Under "Snippets", select Add a new snippet.
  3. Enter bold-custom-upsell-template as the snippet name.
  4. Select Create snippet.
  5. Copy and paste the following code into the snippet: bold-custom-upsell-template.liquid
  6. 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 will need to be removed in order for your changes to be pushed to the storefront.

    Adjust the coding

  7. Select Save.
  8. Under "Layout", select theme.liquid.
  9. Find the </body> tag and paste the following code above that line:
    {% include "bold-custom-upsell-template" %}

    Paste Include

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

  11. 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: 

Jump to a CSS Styling section: 


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:

Colours Example #1

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:

Colours Example #2

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 will pull 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:

Fonts Example

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 will change 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.

Borders Example

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:

Selectors Example

  1. .bold-modal__window - The main selector that targets the entire window.
  2. .bold-upsell__intro - This targets the text above the order window including the intro heading and intro text.
  3. .bold-upsell__intro-heading - Targets the window heading (CROSS-SELL TEST).
  4. .bold-upsell__intro p - Targets the intro paragraph (This is a test of our Cross-Sell functionality...).
  5. .bold-upsell__products-list - Targets the total lighter area containing the product image and all options.
  6. .bold-product__title - Targets the product title (Carpentry Screws).
  7. .bold-product__pricing - Targets the total pricing area.
  8. .bold-product__actions - Targets the window action (Add to Cart).
  9. .bold-product__price.current_price.money - Targets the current price ($0.04 CAD).
  10. .bold-product__price--deleted - Targets the old price ($0.05 CAD).
  11. .bold-upsell__button--primary - Targets the Continue button.
  12. .bold-upsell__button--secondary - Targets the No Thanks button.

Note: The underscores located in the above class selectors are double underscores "_ _" = "__".

Was this article helpful?
0 out of 0 found this helpful