Enhance your Rebuy Rebuy Cart Cross-Sell Widget with custom CSS to match your store's design and improve user experience. Below are some examples and tips for applying custom styles.

Pro Tip: Test Before You Edit!

Before making any changes, it's recommended to create a duplicate copy of your Live Smart Cart to test on first! You can view the changes in your Smart Cart copy using Rebuy Preview Mode

Using Rebuy preview mode

Where to Place CSS Styling Code For Widgets?

You have the ability to simply place CSS styling code directly within a Specific Widget’s Settings.

Log in to Your Rebuy Dashboard:
- Open your web browser and go to the Rebuy login page.
- Enter your credentials (username and password) and click "Log in".
Navigate to the Widgets Tab:
- Once logged in, locate the sidebar on the left side of your Rebuy Dashboard.
- Click on the "Widgets" tab. This will take you to the Widgets Dashboard where you can manage all your widgets.
Select your Cart Cross-Sell Widget:
- In the Widgets Dashboard, find the list of your active widgets and find the Add-On Widget you wish to update.
Access the Widget Settings:
- After clicking the widget, you will be directed to the settings page for that specific widget.
- Here, you can customize various aspects of the widget, including its appearance and behavior.
Add Custom CSS:
- Within the widget settings, look for an option or section labeled "Styles".
- Click on this section to open a text box where you can input your CSS code.

CSS Key Terms

Here are some important terms about the main components of CSS code that you should know before adding CSS code to your Cart Cross-Sell Widgets.

Element Selector

These define what you’re styling. Identifying the correct selector can be the most challenging part when working with CSS, especially since Rebuy has it's own unique Elements. But don’t worry! A list of Rebuy's Element Selectors will be provided, along with common CSS snippets that you can copy and paste.

Example

.rebuy-product-title This selector targets the Product Title element in the Cart Cross-Sell Widget, allowing you to style the product titles.

The selectors for Cart Cross-Sell Widget elements are predefined. See the full list here:

Cart Cross-Sell Element List

Target Individual Widgets:

To style a specific widget, use its unique ID number. We’ll use 1234 as an example, but each Rebuy widget you create will have its own specific ID number.

e.g. #rebuy-widget-159427

Combine Selectors

By using the Widget ID selector alongside other selectors, you can precisely style elements for a particular widget.

This ensures that any CSS rules applied inside the curly braces { } will only affect the .rebuy-product-title element(s) within that specific widget, without impacting other widgets or elements on the page.

Example

#rebuy-widget-1234 .rebuy-product-title { 
   color: #ff0000;
}

This is useful for applying unique styles or behaviors to elements within individual widgets.

Property

CSS properties are used to define the styles applied to elements. Each property controls a specific aspect of the element’s appearance, such as color, size, spacing, or layout. For instance, color: property changes the text color, and font-size: changes the size of the text.

Properties must always be written inside curly braces { } following a CSS selector, and each property is followed by a value, separated by a colon.

#rebuy-widget-12345 .rebuy-button {
   background: #yourColorHex; /* Background color */
   color: #yourColorHex; /* Text color */
   border: 2px solid #yourColorHex; /* Border size, style, color */
   font-size: 16px; /* Font size */
}

For a comprehensive reference on CSS properties, visit W3Schools CSS Reference.

Value

These are the specific values assigned to properties. For example, color: #ff0000; changes the text color to Red by using the color hexadecimal value #ff0000

e.g. #rebuy-widget-1234 .rebuy-product-title { color: #ff0000; }

Every property must have a value! And make sure to follow every property-value pair with a semicolon ; in your CSS.

#rebuy-widget-12345 .rebuy-button {
   property: value; 
   property: value;
   property: value;  
}

Comment Lines

Comment code is used to add notes or explanations. It does not execute as part of the code. Comments are helpful for reminding yourself and informing others about the purpose of the code.

Comment Lines: Enhance Clarity and Documentation!

highly recommended for clarity and documentation!

Code comments in CSS are enclosed within /* and */

Example:

/* Changes the primary title color */
#rebuy-widget-1234 .rebuy-product-title { color: #ff5733; }

Common Styling Snippets For Cart Cross-Sell Widgets

First are some Important terms to know before placing CSS code into your Widget's Custom CSS Settings:

*Important

Place CSS styling code directly in your Widget’s Settings -> Styles -> Custom CSS BOX

When using #rebuy-widget-12345 Replace the 12345 with your widget id number. Without this change, your code will not work.

How to Locate Your Widget's ID Number

Now let's explore some commonly used CSS Code that you can easily copy, paste, and modify for improving your Addons Widget.

Changing Background Colors

For the Cart Cross-Sell Widget, there are two main parts where you might want to change the background color.

The Smart Cart's Widget Recommendations Section

This section explains how to customize the background color of the ENTIRE Recommendations Section in the Smart Cart.

In the image above, the highlighted area within the red outline indicates the section where Cart Cross-Sell Widget's live in.

Customizing this can help in either blending the Cart Cross-Sell Widget's background with the rest of the cart or creating a contrasting look for emphasis. Like in the example below:

Paste this code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace yourColorHex with the #hex number of the color you want to use.

/* Smart Cart’s Widget Recommendations Container */
.rebuy-cart__flyout-recommendations {  
    background: #yourColorHex !important;
}

Styling Tip: You can add styling properties properties such as padding, borders, and more to customize the appearance of your widget.

Widget Background

This section explains how to customize the background color of the Cart Cross-Sell Widget inside the Recommendations Container in the Smart Cart. The provided code example illustrates how to set the background color for both the entire Smart Cart's Recommendation's Section and the Cart Cross-Sell Widget(s) within it.

To target the main container of a specific widget and customize its background color, you can use the following CSS code.

Be sure to replace 12345 with the actual widget ID and #yourColorHex with your desired #hex color code.

/* Background color for the Cart Cross-Sell Widget */
#rebuy-widget-12345 {
  background: #yourColorHex;
}

Example:

In the image, the sections are visually distinguished using different colors, a light gray for the Smart Cart's Recommendations Section and a light purple for the Cart Cross-Sell widget.

Add additional styling properties such as padding, borders, and more!

Fun Styling Tip: Give the background a color gradient, e.g.

background: linear-gradient(90deg, rgba(78, 84, 200, 0.8), rgba(143, 68, 232, 0.8), rgba(242, 118, 201, 0.8), rgba(240, 161, 84, 0.8));

Additional Elements

Widget’s Inner Content Background

Modify the Cart Cross-Sell Widget's inner content background

/* Cart Cross-Sell Widget's Inner Content Background */
#rebuy-widget-12345 .rebuy-widget-content {
  background: #yourColorHex;
  padding: 20px;
}

Use this code as a base to set additional styling properties like padding, borders, etc.

Widget Product Blocks

Target each product block within the Cart Cross-Sell Widget

/* Each Product Block within the Cart Cross-Sell Widget */
#rebuy-widget-12345 .rebuy-product-block {
  background: #yourColorHex;
  padding: 10px;
}

Remember to replace 12345 with your widget’s ID, and #yourColorHex with your desired #hex color code.

Widget Titles

This code will help you easily customize the appearance of your Cart Cross-Sell Widget Titles to match your brand’s style.

Paste this code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change the amount of the font-size property value as needed.

/* Widget Super Title: */ 
#rebuy-widget-12345 .super-title {
color: #yourColorHex !important;
font-size: 20px !important;
text-align: center !important;
font-weight: bold !important; 
}

/* Widget Primary Title: */ 
#rebuy-widget-12345 .primary-title {
color: #yourColorHex !important;
font-size: 20px !important;
text-align: center !important;
font-weight: bold !important; 
}

Styling Tip: Add additional styling properties such as padding, borders, and more!

Buttons

Style the buttons within the Cart Cross-Sell Widget to help make the Cart Cross-Sell Widget buttons more engaging and visually appealing, encouraging additional purchases.

Paste this code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.

/* Cart Cross-Sell Widget add to cart Buttons */
#rebuy-widget-12345 .rebuy-button {
   background: #yourColorHex; /* Background color */
   color: #yourColorHex; /* Text color */
   border: 2px solid #yourColorHex; /* Border size, style and color */
   font-size: 16px; /* Font size */
}

Styling Tip: Add more styling properties such as padding, borders, and more!

Additional Elements

Widget Custom Templates

The CSS class .rebuy-product-actions is used within Rebuy widgets to wrap various interactive elements related to product actions, such as subscription options, frequency selection, and adding items to the cart.

/* Cart Cross Sell Widget Product Actions */
#rebuy-widget-12345 .rebuy-product-actions { }

    /* Subscription Options */
    .subscription-checkbox {
        /* Styles for the subscription checkbox wrapper */
    }

    .rebuy-checkbox-label {
        /* Styles for the checkbox label */
    }

    .checkbox-input {
        /* Styles for the checkbox input */
    }

    .checkbox-label {
        /* Styles for the checkbox label text */
    }

    /* Subscription Frequency */
    .subscription-frequency {
        /* Styles for the subscription frequency wrapper */
    }

    .rebuy-select {
        /* Styles for the select dropdown */
    }

    /* Product Quantity */
    .product-quantity {
        /* Styles for the product quantity wrapper */
    }

    .rebuy-select-wrapper {
        /* Styles for the select wrapper */
    }

    .rebuy-label {
        /* Styles for the label */
    }

    /* Buttons */
    .rebuy-button {
        /* Styles for general buttons */
    }

    .rebuy-button.decline {
        /* Styles for the decline button */
    }

Product Blocks

To customize the appearance of the products returned in your Cart Cross-Sell Widget, you can use the following custom CSS.

Below are some of the different elements you can customize within the Cart Cross-Sell Widget's Product Block.

Product Titles

To customize the appearance of the products returned in your Cart Cross-Sell Widget, you can use the following custom CSS.

/* Product Title: */
#rebuy-widget-12345 .rebuy-product-title {
  color: #yourColorHex;
  font-size: 20px;
  text-align: center;
  font-weight: 400;
}

Paste this code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change the amount of the font-size property value as needed.
Styling Tip: Add more unique styling properties

Product Prices

To customize the appearance of the product's price in your Cart Cross-Sell Widget, you can use the following custom CSS.

Paste this code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change or Remove the other properties below as needed.

/* Product Price: */
#rebuy-widget-12345 .rebuy-money {
  color: #yourColorHex;
  font-size: 14px;
  font-weight: bold; 
}

/* Compare-at Price: */
#rebuy-widget-12345 .compare-at {
  color: #9a9a9a;
  font-size: 14px;
  text-decoration: line-through !important;
}

/* Sale Price: */
#rebuy-widget-12345 .sale {
  color: #yourColorHex;
  font-size: 14px;
}

Product Images

There are various ways to target the Cart Cross-Sell Widget's product images, so the method you choose will depend on your specific goals.

Paste this code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change or Remove the other properties below as needed.

/* Product Image: */
#rebuy-widget-12345 .rebuy-product-image {
  border: 2px solid #yourColorHex !important;
  border-radius: 5px !important;
  padding: 10px !important;
}

Styling Tip: Add Rounded Edges and More!

Give product images rounded edges using the border-radius: property.

Add more styling properties such as padding, borders, and more!

Product Review Stars

To customize the color of the product's review stars in your Cart Cross-Sell Widget, you can use the following custom CSS.

Paste code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change or Remove the other properties below as needed.

/* Product Review Stars: */
#rebuy-widget-12345 .rebuy-star-rating {
  color: #yourColorHex !important;
  width: 80px;
  height: 16px;
}

Additional Product Block Elements

Paste code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change or Remove the other properties: value; below as needed.

Product Description

/* Widget: */
#rebuy-widget-12345 .rebuy-widget { }

/* Widget Container: */
#rebuy-widget-12345 .rebuy-widget-container { }

/* Widget Content: */
#rebuy-widget-12345 .rebuy-widget-content { }

/* Product Grid: */
#rebuy-widget-12345 .rebuy-product-grid { }

/* Product Block: */
#rebuy-widget-12345 .rebuy-product-block { }

/* Product Media: */
#rebuy-widget-12345 .rebuy-product-media { }

/* Product Image: */
#rebuy-widget-12345 .rebuy-product-image { }

/* Product Info: */
#rebuy-widget-12345 .rebuy-product-info { }

/* Product Title: */
#rebuy-widget-12345 .rebuy-product-title { }

/* Variant Title: */
#rebuy-widget-12345 .rebuy-variant-title { }

/* Product Review: */
#rebuy-widget-12345 .rebuy-product-review { }

/* Star Rating: */
#rebuy-widget-12345 .rebuy-star-rating { }

/* Star Rating Value: */
#rebuy-widget-12345 .rebuy-star-rating-value { }

/* Star Rating Background: */
#rebuy-widget-12345 .rebuy-star-rating-background { }

/* Star Rating Foreground: */
#rebuy-widget-12345 .rebuy-star-rating-foreground { }

/* Review Count: */
#rebuy-widget-12345 .rebuy-review-count { }

/* Product Price: */
#rebuy-widget-12345 .rebuy-product-price { }

/* Money: */
#rebuy-widget-12345 .rebuy-money { }

/* Sale Price: */
#rebuy-widget-12345 .sale { }

/* Compare At Price: */
#rebuy-widget-12345 .compare-at { }

/* Product Description: */
#rebuy-widget-12345 .rebuy-product-description { }

/* Product Options: */
#rebuy-widget-12345 .rebuy-product-options { }

/* Select: */
#rebuy-widget-12345 .rebuy-select { }

/* Color Swatches: */
#rebuy-widget-12345 .rebuy-color-swatches { }

/* Color Swatch: */
#rebuy-widget-12345 .rebuy-color-swatch { }

/* Color Input: */
#rebuy-widget-12345 .rebuy-color-input { }

/* Color Label: */
#rebuy-widget-12345 .rebuy-color-label { }

/* Size Swatches: */
#rebuy-widget-12345 .rebuy-size-swatches { }

/* Size Swatch: */
#rebuy-widget-12345 .rebuy-size-swatch { }

/* Size Input: */
#rebuy-widget-12345 .rebuy-size-input { }

/* Size Label: */
#rebuy-widget-12345 .rebuy-size-label { }

/* Product Actions: */
#rebuy-widget-12345 .rebuy-product-actions { }

/* Subscription Checkbox: */
#rebuy-widget-12345 .subscription-checkbox { }

/* Checkbox Label: */
#rebuy-widget-12345 .rebuy-checkbox-label { }

/* Checkbox Input: */
#rebuy-widget-12345 .checkbox-input { }

/* Checkbox Label: */
#rebuy-widget-12345 .checkbox-label { }

/* Subscription Frequency: */
#rebuy-widget-12345 .subscription-frequency { }

/* Product Quantity: */
#rebuy-widget-12345 .product-quantity { }

/* Select Wrapper: */
#rebuy-widget-12345 .rebuy-select-wrapper { }

/* Label: */
#rebuy-widget-12345 .rebuy-label { }

/* Button: */
#rebuy-widget-12345 .rebuy-button { }

/* Modal Actions: */
#rebuy-widget-12345 .rebuy-modal-actions { }

/* Powered by Rebuy: */
#rebuy-widget-12345 .powered-by-rebuy { }

/* Decline Button: */
#rebuy-widget-12345 .decline { }

Responsive CSS Styling for Different Screen Sizes

As a merchant, you want to ensure that your online store looks and functions seamlessly across all devices. Applying specific CSS styling for different screen sizes allows you to create an optimized user experience for both mobile and desktop users. This customization helps improve navigation, enhance visual appeal, and ensure that important elements are prominently displayed, ultimately leading to better customer engagement and higher conversion rates.

Mobile-Only Styling

To apply styling specifically for mobile phone devices, follow these steps:

IMPORTANT!

When applying Mobile specific styles to Rebuy widgets, you need to enclose your widget-specific CSS inside the curly braces of media query block

@media only screen and (max-width: 480px) { // PLACE CODE HERE }

This ensures that the styles are only applied when the specified screen size conditions are met.

Here is an example of CSS for mobile-only styling:

@media only screen and (max-width: 480px) { } specifies that the styles inside this block will only apply to screens that are 480 pixels wide or smaller.

/* Mobile Phone Devices: */
@media only screen and (max-width: 480px) {
   /* Product Title: */
   #rebuy-widget-12345 .rebuy-product-title {
      color: #yourColorHex;
      font-size: 20px;
   }
}

Paste code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change or Add/Remove the other properties below as needed.

Desktop-Only Styling

To apply styling specifically for desktop devices, follow these steps:

Here is an example of CSS for Desktop-only styling:

@media only screen and (min-width: 1024px) { } specifies that the styles inside this block will only apply to screens that are 1024px pixels wide or larger.

/* Mobile Phone Devices: */
@media only screen and (min-width: 1024px) {
   /* Product Title: */
   #rebuy-widget-12345 .rebuy-product-title {
      color: #yourColorHex;
      font-size: 20px;
   }
}

Paste code directly in your Widget’s Settings -> Styles -> Custom CSS

Replace 12345 with your widget’s ID Number
Replace yourColorHex with the #hex number of the color you want to use.
Change or Add/Remove the other properties below as needed.

Full CSS Selector List of Cross-Sell Widget Elements You Can Style

Here’s a comprehensive list of all the CSS selectors available for the Recommended Widget Template. You can use these selectors to enhance the visual appeal and apply style modifications to your widgets. These selectors are applicable across various widget types, and specific selectors unique to certain widget types are noted in the accompanying comments.

For up to date information on our custom templates, please visit out developer hub. Custom templates are updated from time to time, so if you encounter odd behavior, please check back to see when the latest update to the template was.

Widget Custom Templates

Cross-Sell Widget Selectors

/* Widget */
#rebuy-widget-12345 .rebuy-widget { }

/* Widget Container */
#rebuy-widget-12345 .rebuy-widget-container { }

/* Widget Content */
#rebuy-widget-12345 .rebuy-widget-content { }

/* Modal Close Button */
#rebuy-widget-12345 .rebuy-modal-close { }

/* Timer */
#rebuy-widget-12345 .rebuy-timer { }

/* Timer Title */
#rebuy-widget-12345 .rebuy-timer-title { }

/* Timer Minutes */
#rebuy-widget-12345 .rebuy-timer-minutes { }

/* Timer Seconds */
#rebuy-widget-12345 .rebuy-timer-seconds { }

/* Super Title */
#rebuy-widget-12345 .super-title { }

/* Primary Title */
#rebuy-widget-12345 .primary-title { }

/* Description */
#rebuy-widget-12345 .description { }

/* Product Grid */
#rebuy-widget-12345 .rebuy-product-grid { }

/* Product Block */
#rebuy-widget-12345 .rebuy-product-block { }

/* Product Media */
#rebuy-widget-12345 .rebuy-product-media { }

/* Product Image */
#rebuy-widget-12345 .rebuy-product-image { }

/* Product Info */
#rebuy-widget-12345 .rebuy-product-info { }

/* Product Title */
#rebuy-widget-12345 .rebuy-product-title { }

/* Variant Title */
#rebuy-widget-12345 .rebuy-variant-title { }

/* Product Review */
#rebuy-widget-12345 .rebuy-product-review { }

/* Star Rating */
#rebuy-widget-12345 .rebuy-star-rating { }

/* Star Rating Value */
#rebuy-widget-12345 .rebuy-star-rating-value { }

/* Star Rating Background */
#rebuy-widget-12345 .rebuy-star-rating-background { }

/* Star Rating Foreground */
#rebuy-widget-12345 .rebuy-star-rating-foreground { }

/* Review Count */
#rebuy-widget-12345 .rebuy-review-count { }

/* Product Price */
#rebuy-widget-12345 .rebuy-product-price { }

/* Money */
#rebuy-widget-12345 .rebuy-money { }

/* Sale Price */
#rebuy-widget-12345 .sale { }

/* Compare At Price */
#rebuy-widget-12345 .compare-at { }

/* Product Description */
#rebuy-widget-12345 .rebuy-product-description { }

/* Product Options */
#rebuy-widget-12345 .rebuy-product-options { }

/* Select */
#rebuy-widget-12345 .rebuy-select { }

/* Color Swatches */
#rebuy-widget-12345 .rebuy-color-swatches { }

/* Color Swatch */
#rebuy-widget-12345 .rebuy-color-swatch { }

/* Color Input */
#rebuy-widget-12345 .rebuy-color-input { }

/* Color Label */
#rebuy-widget-12345 .rebuy-color-label { }

/* Size Swatches */
#rebuy-widget-12345 .rebuy-size-swatches { }

/* Size Swatch */
#rebuy-widget-12345 .rebuy-size-swatch { }

/* Size Input */
#rebuy-widget-12345 .rebuy-size-input { }

/* Size Label */
#rebuy-widget-12345 .rebuy-size-label { }

/* Product Actions */
#rebuy-widget-12345 .rebuy-product-actions { }

/* Subscription Checkbox */
#rebuy-widget-12345 .subscription-checkbox { }

/* Checkbox Label */
#rebuy-widget-12345 .rebuy-checkbox-label { }

/* Checkbox Input */
#rebuy-widget-12345 .checkbox-input { }

/* Checkbox Label */
#rebuy-widget-12345 .checkbox-label { }

/* Subscription Frequency */
#rebuy-widget-12345 .subscription-frequency { }

/* Product Quantity */
#rebuy-widget-12345 .product-quantity { }

/* Select Wrapper */
#rebuy-widget-12345 .rebuy-select-wrapper { }

/* Label */
#rebuy-widget-12345 .rebuy-label { }

/* Button */
#rebuy-widget-12345 .rebuy-button { }

/* Modal Actions */
#rebuy-widget-12345 .rebuy-modal-actions { }

/* Powered by Rebuy */
#rebuy-widget-12345 .powered-by-rebuy { }

/* Decline Button */
#rebuy-widget-12345 .decline { }

Rebuy Support Policy for Customizations

At Rebuy, we are committed to providing exceptional support for features and functionalities within the standard Rebuy package. However, our support services do not extend to third-party plugins or customizations beyond the scope of Rebuy.

SUPPORT POLICY

Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy.

Unsupported items include, but are not limited to:

Custom template modifications/troubleshooting
Headless configurations/troubleshooting
Native cart configurations/troubleshooting
Custom CSS/Javascript
Custom scripts
Third-party integrations

Please refer to our policy page Please be mindful of this when proceeding.

Get matched with the right Service Partner

If you don’t have access to a developer, we can connect you with our partner team to discuss your project and explore options for one of our accredited experts to assist you.

Find the perfect partner for your project or let us introduce you to one of our trusted partners for free. You can book a consultation here:

Meet Our Partners

Enhance Widget Styling Using Custom CSS Code

CSS Tricks for Customizing the Legacy Smart Cart

Customize the Dynamic Bundle Widget

Customize the Product Add-Ons Widget

CSS Tricks for Customizing Smart Cart 2.0