CSS Styling (Coding Styling Options)

Overview

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 on your store to beautify the look of your Upsell window.

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

Bold Upsell also gives you the flexibility to manipulate and adjust the location of all the elements in the Upsell window. 

For steps on adjusting the elements within the Upsell window and applying CSS styling for the classes in the Upsell window, please see each section below: 

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.
  2. Select Actions.
  3. Select Edit code.
  4. Under "Snippets", select Add a new snippet.
  5. Enter bold-custom-upsell-template as the snippet name.
  6. Select Create snippet.
  7. Copy and paste the following code into the snippet: bold-custom-upsell-template.liquid

    Paste the code

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

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

    Paste Include

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

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

The 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).

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 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 we have shown here, 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, I have 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