Skip to main content
All CollectionsWidgetsProduct PageDynamic Bundles
Customize the Dynamic Bundle Widget
Customize the Dynamic Bundle Widget

Simple Tricks for Impactful Bundle Designs Using Custom CSS Code

Tom Eschler avatar
Written by Tom Eschler
Updated over a week ago

Get ready to take your Rebuy Dynamic Bundle Widgets to the next level! In the following sections, we’ll share common CSS code snippets designed to enhance the visual appeal of your bundle widget, making your platform's user experience truly stand out!

Haven't created your Dynamic Bundle Widget yet? Refer to our guide on how to do this at How To Create A Dynamic Bundle Widget

Where to Add CSS Styling Code For Bundle Widgets?

Enhancing the visual appeal and functionality of your widgets in Rebuy can be achieved by directly placing CSS styling code within a specific widget’s settings. This guide will walk you through the process of styling your Dynamic Bundle Widget with custom CSS.

Step-by-Step Guide

  1. 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".

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

  3. Select the Dynamic Bundle Widget:

    • In the Widgets Dashboard, find the list of your active widgets and find the dynamic bundle you wish to update.

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

  5. 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 explore how to use CSS code to make changes.

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 XXXX your code will either apply to every single widget or not work at all.
    ​

    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're 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.
    ​

Example of CSS Selectors used for customizing Bundle Widget Elements:

Now let's explore some commonly used techniques that you can easily copy, paste, and modify to apply CSS for improving your Bundle Widget.

Bundle Background Color

In this section, you'll learn how to customize the background colors of different parts of your bundle 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

/* 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;

Product Titles, Prices & Other Text

The CSS code below lets you customize various visual elements of your bundle widget, such as colors, text alignment, and fonts for the widget title, product titles, pricing, and more. You can modify these snippets 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.

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

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


#rebuy-widget-XXXXX .rebuy-product-label {
  color: #yourColorHex !important;
  font-family: "Helvetica"; 
  font-size: 20px !important;
}

/* Widget Product Titles: */ 
#rebuy-widget-XXXXX .rebuy-product-title {
  color: #yourColorHex !important;
  font-family: "Helvetica"; 
  font-size: 20px !important;
}

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

/* Widget Product Regular Price */ 
#rebuy-widget-XXXXX .rebuy-money {
  color: #yourColorHex;
}

/* Widget Product SALE Price */ 
#rebuy-widget-XXXXX .rebuy-money.sale {
  color: #yourColorHex !important;
}

/* Product slash/out Compare at Price */ 
#rebuy-widget-XXXXX .compare-at {
  color: #yourColorHex !important;
}

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.

  • font-family: property changes the font of the text. While Rebuy typically uses the default font from your theme, you can specify a different font through CSS if necessary. The code block below will use Font "Helvetica" as an example.
    By default Rebuy's widget's will be the font used in your Shopify Theme - If you don't need font changes leave out font-family:

  • For a wider range of unique CSS properties, explore further at: w3schools.com

Adjust Widget Sizing: Width

Modify the width of a Widget using the code below. To center the widget on the page, set the margin to auto. You can alter the width percentage to fit your needs; the default setting is width: 100%.

Be sure to substitute XXXXX with the widget's ID number.

/* Change widget width - change the percentage as needed. */
#rebuy-widget-XXXXX {
   margin: auto !important;
   width: 70% !important; 
}

*Be aware that adjusting the width of a widget can impact other aspects of it's layout and appearance. In some cases, using margin: or padding: is best.

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

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

Styling Tip: replace yourColorHex with the #hex number of the color you want to use.

*After placing CSS:

Fix Checkboxes for Bundle/Addon widgets

Sometimes, the checkboxes in Bundle and 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 CSS styling code directly within a Widget’s Settings -> Styles -> Custom CSS

/* Fix Checkboxes for 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 CSS:

Remove "+" Icon's Between Images

Plus + icons by default will appear between the bundles product images. Using this code will remove them:

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

.rebuy-bundle__image-divider {
   display: none !important;
}

*After placing CSS:

Bundle Images

There are various ways to target the Bundle 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 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.

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

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

*After placing CSS:

Single Row Images For Mobile View

By default, Bundle Images will stack as columns when shrunk down to mobile devices. We can use this CSS to have the images in a single row.

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

Replace XXXXX with the widget's ID number.

/* Display Bundle Images in a Single Row for Mobile View */
@media only screen and (max-width: 600px) {
 .rebuy-bundle__image-divider {
      display: none !important;
   }
  #rebuy-widget-XXXXX.widget-type-dynamic-bundle .rebuy-bundle__images {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
    overflow-x: auto !important;
   }
}

*Keep in mind that this will affect the sizing of your images on mobile devices. Mobile phones have limited space, so larger bundles may cause your layout to break!

*After placing CSS:

More Widget Elements You Can Style

Here's a compilation of all the Bundle Widget CSS Selectors for enhancing the visual appeal and applying style modifications to Bundles. 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

Related Articles
Enhance Widget Styling Using Custom CSS Code
CSS Tricks for Customizing the Legacy Smart Cart
Customize the Product Add-Ons Widget
Custom Style the Cart Cross-Sell Widget
CSS Tricks for Customizing Smart Cart 2.0
Did this answer your question?