Prepare to elevate your Add-Ons Widget! In the sections below, we'll provide essential CSS code snippets that will boost the visual appeal of your Addon widget, significantly improving the user experience on your platform!

Where to Add 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 Product Add-Ons 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.

Now let's dive into the code!

CSS Styling Snippets For Bundle Widgets

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

*Important Terms

Selector/Element
This is what you're styling. .primary-title is the selector. It specifies what you're targeting to make changes to.
Using #rebuy-widget-XXXXX with .primary-title means you're targeting the primary title of the widget. #rebuy-widget-XXXX .primary-title { }

When using #rebuy-widget-XXXXX Replace the XXXXX with the widget id number.
Without adding this or not replacing the XXXXX your code will either apply to every single widget or not work at all.
You can locate your widget's ID next to the widget title in the settings.
How to Locate Your Widget's ID Number
Properties
These specify the styling modifications to the element’s selector and are placed within curly brackets following the selector.
For example, #rebuy-widget-12345 { background: #ffffff; } , background: is the property, and you assign it a value.
Here, background: #ffffff; sets the background color of Widget #12345 to white using the color hex #ffffff.
*Ensure a semicolon ; follows every property-value pair in your CSS.

Comment Code
Comments are enclosed in /* and */ in CSS. This is used to add notes or explanations. Comment code does not run as code. They are helpful for reminding yourself or informing others about what a specific part of the code is for.

We recommend including the comment code alongside the code to maintain organization.

Sometimes an !important tag can be used to guarantee your style applies when it's being overridden by other theme styles. It's not always required but is included in this guide's code for precaution.

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

Background Color

In this section, you'll learn how to customize the background colors of different parts of your Addon widget. By modifying the CSS, you can tailor the visual appearance of each layer to match your store's design.

The image below illustrates the distinct background layers:

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

Replace XXXXX with the widget's ID number.
Replace yourColorHex with the #hex number of the color you want to use.

/* Widget Main Background */
#rebuy-widget-XXXXX {
  background: #yourColorHex;
} 

/* Widget Content Background */
#rebuy-widget-XXXXX .rebuy-widget-content {
  background: #yourColorHex;
}

Styling Tip: Use this as a base to set more styling properties like background color, padding, or borders.

*Important!

Replace the XXXXX with the widget id number.

Replace yourColorHex with the #hex number of the color you want to use. *Keep the # before the Hex number. For example: #000000;

Styling Titles, Prices & More

The CSS code below lets you customize various visual elements of your Addon Widget, such as colors, text alignment, and fonts for the widget title, product titles, pricing, and more! You can modify the code to style different components of the widget.

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

Replace XXXXX with the widget's ID number.
Replace yourColorHex with the #hex number of the color you want to use.

CSS For Titles:

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

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

/* Widget PRODUCT TITLES: */ 
#rebuy-widget-XXXXX .rebuy-addon__item-product-title {
  color: #yourColorHex;
  font-size: 16px;
  font-weight: bold;
}


/* LEARN MORE LINKS: */ 
#rebuy-widget-XXXXX .rebuy-addon__item-learn-more-link {
  color: #yourColorHex;
}

/* Product Variant Text in Select Box: */
#rebuy-widget-XXXXX .rebuy-select {  
  color: #yourColorHex;
}

Styling Tip: Use this as a base to set more styling properties; e.g., the font-family: property changes the font of the text.

CSS for Prices:

/* Addon Widget PRODUCT PRICE: */ 
#rebuy-widget-XXXXX .rebuy-product-price .rebuy-money {  
  color: #yourColorHex;
}

/* Addon Widget TOTAL PRICE Text Label: */ 
#rebuy-widget-XXXXX .rebuy-addon__subtotal-label {
  color: #yourColorHex;
}

/* Addon Widget TOTAL PRICE AMOUNT: */ 
#rebuy-widget-XXXXX .rebuy-addon__subtotal-value .rebuy-money {
  color: #yourColorHex;
}

/* Addon Widget TOTAL PRICE: SALE Price */ 
#rebuy-widget-XXXXX .rebuy-addon__subtotal-value .rebuy-money.sale {
  color: #yourColorHex;
}

/* Addon Widget TOTAL PRICE: Slash/out-Compare at Price */ 
#rebuy-widget-XXXXX .rebuy-addon__subtotal-value .compare-at {
  color: #yourColorHex;
}

Adjust or Omit any of these properties as needed to fit your design requirements.

replace yourColorHex with the #hex number of the color you want to use.
Ensure to replace XXXXX with the actual widget ID to apply these styles.
For a wider range of unique CSS properties, explore further at: w3schools.com

Addon Checkboxes

Change the colors of the Bundle Widget's Checkboxes using the code below.

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

Replace XXXXX with the widget's ID number.
Replace yourColorHex with the #hex number of the color you want to use.

#rebuy-widget-XXXXX .rebuy-checkbox:checked {
  color: #yourColorHex;
  background: #yourColorHex;
  border-color: #yourColorHex;
}

Fix Checkboxes for Add-on widgets

Sometimes, the checkboxes in Addon widgets may appear distorted due to conflicts with Shopify theme code.

For example:

If you encounter this issue, adding the following CSS snippet can help correct the appearance of the checkboxes.

Place this CSS styling code directly within your Rebuy Theme Settings.

Rebuy Dashboard -> Settings -> THEMES -> Inside the Custom CSS Text Box

/* Fix Checkboxes for Addon & Bundle widgets */ 
.rebuy-checkbox {
appearance: none !important;
-webkit-appearance: none !important;
padding: 0 0 0 15px !important;
}

.rebuy-checkbox:checked:before {
appearance: none !important;
-webkit-appearance: none !important;
display: inherit !important;
}

**After placing the above CSS:*

Images

There are various ways to target the Addon Widget Images, so the method you choose will depend on your specific goals. In this example, we'll target the product image itself and give it round edges to match the theme by using the border-radius: property.

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

Replace XXXXX with the widget's ID number.
Replace the border-radius with the desired px amount.
For a wider range of unique CSS properties, explore further at: w3schools.com

/* Rounded Images: */ 
#rebuy-widget-XXXXX img { border-radius: 10px; }

Add-on Widget Layout: Horizontal Grid

To display the addon widget items in a horizontal grid layout, use the following CSS code.

Place CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

Replace XXXXX with the widget's ID number.
This will arrange the items in two equal columns. Adjust as needed

#rebuy-widget-XXXXX .rebuy-addon__items {
  display: grid;
  grid-template-columns: 50% 50% !important;	
}

More Widget Elements You Can Style

Here's a compilation of all the Widget CSS Selectors for enhancing the visual appeal and applying style modifications to Addon Widgets. Some of these selectors are also applicable across various widget types. While most selectors are universal to all widget types, specific selectors unique to certain widget types are noted in the accompanying code comments.

Widget CSS Selectors List

You can add your CSS properties inside the brackets to customize the appearance of each element. Inspect the elements in your specific widget implementation to ensure the class names and structures align with this list.

/* Rebuy's Standard Widget CSS Selectors */ 
#rebuy-widget-XXXX .rebuy-widget { }
#rebuy-widget-XXXX .rebuy-widget-container { }
#rebuy-widget-XXXX .rebuy-widget-content { }
#rebuy-widget-XXXX .rebuy-modal-close { }
#rebuy-widget-XXXX .rebuy-timer { }
#rebuy-widget-XXXX .rebuy-timer-title { }
#rebuy-widget-XXXX .rebuy-timer-minutes { }
#rebuy-widget-XXXX .rebuy-timer-seconds { }
#rebuy-widget-XXXX .super-title { }
#rebuy-widget-XXXX .primary-title { }
#rebuy-widget-XXXX .description { }
#rebuy-widget-XXXX .rebuy-product-grid { }
#rebuy-widget-XXXX .rebuy-product-block { }
#rebuy-widget-XXXX .rebuy-product-media { }
#rebuy-widget-XXXX .rebuy-product-image { }
#rebuy-widget-XXXX .rebuy-product-info { }
#rebuy-widget-XXXX .rebuy-product-title { }
#rebuy-widget-XXXX .rebuy-variant-title { }
#rebuy-widget-XXXX .rebuy-product-review { }
#rebuy-widget-XXXX .rebuy-star-rating { }
#rebuy-widget-XXXX .rebuy-star-rating-value { }
#rebuy-widget-XXXX .rebuy-star-rating-background { }
#rebuy-widget-XXXX .rebuy-star-rating-foreground { }
#rebuy-widget-XXXX .rebuy-review-count { }
#rebuy-widget-XXXX .rebuy-product-price { }
#rebuy-widget-XXXX .rebuy-money { }
#rebuy-widget-XXXX .sale { }
#rebuy-widget-XXXX .compare-at { }
#rebuy-widget-XXXX .rebuy-product-description { }
#rebuy-widget-XXXX .rebuy-product-options { }
#rebuy-widget-XXXX .rebuy-select { }
#rebuy-widget-XXXX .rebuy-color-swatches { }
#rebuy-widget-XXXX .rebuy-color-swatch { }
#rebuy-widget-XXXX .rebuy-color-input { }
#rebuy-widget-XXXX .rebuy-color-label { }
#rebuy-widget-XXXX .rebuy-size-swatches { }
#rebuy-widget-XXXX .rebuy-size-swatch { }
#rebuy-widget-XXXX .rebuy-size-input { }
#rebuy-widget-XXXX .rebuy-size-label { }
#rebuy-widget-XXXX .rebuy-product-actions { }
#rebuy-widget-XXXX .subscription-checkbox { }
#rebuy-widget-XXXX .rebuy-checkbox-label { }
#rebuy-widget-XXXX .checkbox-input { }
#rebuy-widget-XXXX .checkbox-label { }
#rebuy-widget-XXXX .subscription-frequency { }
#rebuy-widget-XXXX .product-quantity { }
#rebuy-widget-XXXX .rebuy-select-wrapper { }
#rebuy-widget-XXXX .rebuy-label { }
#rebuy-widget-XXXX .rebuy-button { }
#rebuy-widget-XXXX .rebuy-modal-actions { }
#rebuy-widget-XXXX .powered-by-rebuy { }
#rebuy-widget-XXXX .decline { }

/* Rebuy's Addon Widget CSS Selectors. Unique Selectors Specific for Addon Widgets */ 
#rebuy-widget-XXXX .rebuy-addon { }
#rebuy-widget-XXXX .rebuy-addon__items { }
#rebuy-widget-XXXX .rebuy-addon__item { }
#rebuy-widget-XXXX .rebuy-addon__item-checkbox { }
#rebuy-widget-XXXX .rebuy-addon__item-image { }
#rebuy-widget-XXXX .rebuy-addon__item-info { }
#rebuy-widget-XXXX .rebuy-addon__item-product-title { }
#rebuy-widget-XXXX .rebuy-addon__item-variant-title { }
#rebuy-widget-XXXX .rebuy-addon__item-product-review { }
#rebuy-widget-XXXX .rebuy-addon__item-product-price { }
#rebuy-widget-XXXX .rebuy-addon__item-product-options { }
#rebuy-widget-XXXX .rebuy-addon__item-product-description { }
#rebuy-widget-XXXX .rebuy-addon__item-learn-more { }
#rebuy-widget-XXXX .rebuy-addon__item-learn-more-link { }
#rebuy-widget-XXXX .rebuy-addon__subtotal { }
#rebuy-widget-XXXX .rebuy-addon__subtotal-label { }
#rebuy-widget-XXXX .rebuy-addon__subtotal-value { }

/* Rebuy's Bundle Widget CSS Selectors. Unique Selectors Specific for Bundle Widgets */ 
#rebuy-widget-XXXX .rebuy-bundle { }
#rebuy-widget-XXXX .rebuy-bundle__images { }
#rebuy-widget-XXXX .rebuy-bundle__image { }
#rebuy-widget-XXXX .rebuy-bundle__image-item { }
#rebuy-widget-XXXX .rebuy-bundle__image-divider { }
#rebuy-widget-XXXX .rebuy-bundle__actions { }
#rebuy-widget-XXXX .rebuy-bundle__actions-price { }
#rebuy-widget-XXXX .rebuy-bundle__actions-price-label { }
#rebuy-widget-XXXX .rebuy-bundle__actions-price-value { }
#rebuy-widget-XXXX .rebuy-bundle__actions-buttons { }
#rebuy-widget-XXXX .rebuy-bundle__items { }
#rebuy-widget-XXXX .rebuy-product-checkbox { }
#rebuy-widget-XXXX .rebuy-product-label { }

/* Rebuy's Pre Purchase Widget CSS Selectors. Unique Selectors Specific for Pre Purchase Widgets */ 
#rebuy-widget-XXXX .rebuy-pre-purchase-block { }
#rebuy-widget-XXXX .rebuy-button-container { }
#rebuy-widget-XXXX .rebuy-button--selected { }
#rebuy-widget-XXXX .rebuy-button__remove { }
#rebuy-widget-XXXX .rebuy-button__text { }
#rebuy-widget-XXXX .rebuy-button__upsell-add { }
#rebuy-widget-XXXX .rebuy-button__upsell-remove { }
#rebuy-widget-XXXX .bottom-container { }
#rebuy-widget-XXXX .rebuy-button-actions { }
#rebuy-widget-XXXX .rebuy-pre-purchase-actions { }
#rebuy-widget-XXXX .rebuy-button--mlr-10 { }

/* Rebuy's Thank You Page Widget CSS Selectors. Unique Selectors Specific for Thank You Page Widgets */ 
#rebuy-widget-XXXX .rebuy-thank-you-block { }

Learn More Styling Properties

For a wider range of unique CSS properties, explore further at:

W3SCHOOLS

How to identify which Rebuy widget Elements you're looking at

A guide for answering the question "which widget element is this?" - using your browsers built in developer tools.

Identifying widgets on the store front

Rebuy Support Policy For Customizations

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, and third-party integrations. Proceed with caution if you plan to make any customizations.

Please refer to our Support Policy Page

Common Rebuy CSS Selectors And Changes

Enhance Widget Styling Using Custom CSS Code

CSS Tricks for Customizing Smart Cart

Customize the Dynamic Bundle Widget

Custom Style the Cart Cross-Sell Widget