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-titleis the selector. It specifies what you're targeting to make changes to.
Using#rebuy-widget-XXXXXwith .primary-titlemeans you're targeting the primary title of the widget.#rebuy-widget-XXXX .primary-title { }
When using#rebuy-widget-XXXXXReplace theXXXXXwith the widget id number.
Without adding this or not replacing theXXXXXyour 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.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
!importanttag 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
XXXXXwith the widget's ID number.Replace
yourColorHexwith 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
XXXXXwith the widget id number.
Replace
yourColorHexwith 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
XXXXXwith the widget's ID number.Replace
yourColorHexwith 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
yourColorHexwith the #hex number of the color you want to use.Ensure to replace
XXXXXwith 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
XXXXXwith the widget's ID number.Replace
yourColorHexwith 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.
/* 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
XXXXXwith the widget's ID number.Replace the
border-radiuswith 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
XXXXXwith 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
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:
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.
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