Basic CSS Styling for Bold Upsell

Follow

Bold Upsell can customize the look and feel of the window that displays in your checkout 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 Upsell offers.

Note: Your CSS styling is in Upsell's admin under Settings > Customization.

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-pu-widget"; the CSS would look like this:

.bold-pu-widget {
   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 color to black for our ".bold-pu-widget" class, we can add this to the declaration block like this:

.bold-pu-widget {
   background-color: grey;
   color: black;
}

You can find much more detailed information on CSS and its styling rules at W3 Schools - CSS.

Making a simple adjustment to the color scheme of your Upsell offers can make a difference in how your customers perceive it. You can pick out hexadecimal color codes using an online selector tool like HTML Color Codes. The CSS code will then look like this:

.bold-pu-widget {
   background-color: #182E49;
}

If we want to adjust the color of text fields within the window, use the "color" declaration.

The coding for a setting a whiteish offer title would look similar to this:

.bold-pu-widget__title {
   color: #F8FF00;
}

For more information on CSS color properties visit W3 Schools - CSS Colors.

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.

The CSS styling to change this information could be:

.bold-pu-widget__price-holder {
   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.

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.

To set a border box that is a solid, black border, and 1 pixel in size, the CSS statement would look like this:

.bold-pu-widget__image-holder {
   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.

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

Big_Upsell_CSS_Screenshot.png

Legend

  1. .bold-pu-widget - The container of the widget component
  2. .bold-pu-widget__offer-expired - The container where you have the title “This offer has expired”
  3. .bold-pu-widget__progress-bar - Targets the expiry timer progress bar
  4. .bold-pu-widget__progress-message - Targets the expiry timer message: “This offer will expire in ...”
  5. .bold-pu-widget__product-section - The container of all products (list of products)
  6. .bold-pu-widget__product - The design definition for each product
  7. .bold-pu-widget__image-holder - The design definition for the product image
  8. .bold-pu-widget__title - The design definition for the product title
  9. .bold-pu-widget__price-holder - The design definition for the product price
  10. .bold-pu-widget__confirm_bar - Targets to the confirmation bar (bar in the end of widget with price and total)
  11. .bold-pu-widget__confirm_bar_text--bold - Targets to the total text
  12. .bold-pu-widget__confirm_bar_price - The design definition for total price
  13. .bold-pu-widget__confirm_bar_text--tax - Target the “+ tax” text on confirmation bar
  14. .bold-pu-widget_confirm - The design definition for the confirm button

Note: Most of the underscores located in the above class selectors are double underscores "_ _" = "__". Class selectors 9 - 14 are used once the customer goes to confirm their additional offer products.

Next Steps:

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.