Basic CSS Styling for Bold Upsell

Follow

Bold Upsell can customize the look and feel of the window that displays on your storefront with CSS (Cascading Style Sheets). We're going to explain some CSS functions, what they do and how you can apply them in your store to beautify the look of your Product Upsell window.

Note: Your CSS styling is in Upsell's admin under Settings -> Upsell Settings -> Custom Design.

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, 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, underline are all types of final declarations).

For example, if you want 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.

For example, to set the text colour 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. Another great resource is Solo Learn.

Making a simple adjustment to the colour 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

In the example we have shown here, the background colour is #182E49 which is a hexadecimal colour code for a dark navy blue colour. You can pick out these hexadecimal colour 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 colour of text fields within the window, use the "color" declaration:

Product Title

The styling for this section of the window looks like this:

.bold-product_title {
   color: #F8FF00;
}

For more information on CSS colour properties visit W3 Schools - CSS Colours.

By default, Product 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/colour of the font on the storefront. Font and text style properties allow you to adjust these:

Fonts

In this example, I have both a colour 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 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

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

Below we've created a diagram to showcase some of the most common class selectors used to style the Upsell window:

Selectors

Legend

  1. .bold-modal__window - The main selector that targets the entire window.
  2. .bold-upsell__into - 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 "_ _" = "__".

Next Steps:

Blog Posts:

1 out of 1 found this helpful

Comments

0 comments

Article is closed for comments.