Skip to main content

Easy CSS Customization for Your Rebuy Bundle Builder

Easy-to-follow CSS snippets to customize your Rebuy Bundle Builder, ensuring it aligns seamlessly with your Shopify theme and brand style.

Tom avatar
Written by Tom
Updated in the last hour

This guide helps you style the Rebuy Bundle Builder widget to seamlessly match your Shopify Theme and Brand. Below are common CSS customizations with corresponding selectors, making styling easy and efficient.

Explore these focused sections to target and customize specific parts of your Bundle Builder:

NOTICE: 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

Where to Add CSS Styling Code?

In the Advanced section of your Bundle Builder's Configuration Settings, you will find a mini code editor that allows complete customization of your Bundle Builder using CSS.

  1. Go to your Bundle Builder Admin, then select the Bundle you want to edit.

  2. In the Settings Panel → Advanced.

  3. Place CSS Code in the CSS Editor Box, click Save.


Bundle Builder Colors

Use the Quick Color Template CSS Code block below to make quick changes to some of the Bundle Builder's main elements.

Example:

Bundle Builder Quick Color Template

Use this code block below as a base template to quickly customize the color scheme of your Bundle Builder widget. Style It Your Way! Add styling properties to match the exact look and feel you’re after.

Where to add CSS Code for Bundle Builder Widgets?

Remember to Replace YourColorHex with your desired Color Hex code.

e.g. color: #424242; for text color and background: #ffffff; for background colors.

/* Bundle Builder's Main background color. */ 
.rebuy-bundle-builder {
background: #YourColorHex !important;
}
/* Bundle Builder STEP Header Sections, background color and text */
.rebuy-bundle-builder__step-header,
.rebuy-bundle-builder__step-header * {
background: #YourColorHex;
color: #YourColorHex;
font-weight: bold;
}
/* Bundle Builder's Product Section - where you add products */
.rebuy-bundle-builder__step-container {
background: #YourColorHex;
}
/* Bundle Builder's "My Bundle" Side Container */
.rebuy-bundle-builder__group-container {
background: #YourColorHex;
}
/* Bundle Builder's Add To Cart Button's */
.rebuy-bundle-builder button.rebuy-button {
color: #YourColorHex; /* Text color */
background: #YourColorHex;
border-color: #YourColorHex;
border-radius: 0px; /* sharp corners (no rounding) */
}
/* Bundle Builder's Progress Bar Color */
.rebuy-bundle-builder__progress-bar-meter-fill {
background: #YourColorHex !important;
}
/* Bundle Builder's Progress Bar Icon color */
.complete .rebuy-bundle-builder__progress-step-icon {
background: #YourColorHex !important;
color: #YourColorHex; /* Text color */
}
/* Bundle Builder's Progress Bar COMPLETED Icon Text color */
.rebuy-bundle-builder__progress-step.complete .rebuy-bundle-builder__progress-step-icon {
color: #YourColorHex; /* Text color */
}

Style It Your Way! Add styling properties to match the exact look and feel you’re after.

Adjust Overall Width:

adjust width amount with caution, best to use the Shopify theme's app block container.

/* Bundle Builder Adjust Overall Width */
.rebuy-bundle-builder__main {
max-width: 1200px; /* adjust width amount with caution */
}

Want to make further adjustments to the elements?


Styling Titles and Descriptions

This section shows how to customize font styles for various text elements in the Bundle Builder widget, including Super Titles, Headers, Descriptions, Step Titles, and Product Titles.

Adjust Title Sizes, Fonts & Colors:

In the font-family property - Replace PlaceholderFont with the actual font you want to use, along with a fallback option. e.g., font-family: "Roboto", sans-serif;

Replace YourColorHex with your desired Color Hex code.

e.g. color: #424242; for text color and background: #ffffff; for background colors.

Where to add CSS Code for Bundle Builder Widgets?

Change Font for Entire Bundle Builder Widget

Apply a global font style across all text elements such as headings, buttons, paragraphs, and dropdowns within the Bundle Builder to keep your typography consistent.

  • In the font-family property - Replace PlaceholderFont with the actual font you want to use, along with a fallback option. This ensures your text displays correctly across different browsers and devices.

  • e.g., font-family: "Roboto", sans-serif;

/* Bundle Builder Change All Fonts */
.rebuy-bundle-builder,
.rebuy-bundle-builder .rebuy-button,
.rebuy-bundle-builder h1,
.rebuy-bundle-builder h2,
.rebuy-bundle-builder h3,
.rebuy-bundle-builder p,
.rebuy-bundle-builder select {
font-family: PlaceholderFont, sans-serif;
}

Bundle Builder Super Title

Style the large, top-level heading that appears above your bundle widget—perfect for branding or callout text.

/* Target Bundle Builder Header Super Title */
.rebuy-bundle-builder__main-header-super-title {
font-size: 36px;
color: #YourColorHex; /* Text color */
font-family: PlaceholderFont, sans-serif;
font-weight: bold;
text-transform: uppercase;
}

Styling Tip! Use text-transform to control text case. Choose from uppercase, lowercase, or capitalize to style how your text appears.

Bundle Builder Main Title

Customize the main header title displayed beneath the super title. Adjust font, color, and sizing to fit your theme.

/* Target Bundle Builder Main Header Title */
.rebuy-bundle-builder__main-header-title {
font-size: 26px;
color: #YourColorHex; /* Text color */
font-family: PlaceholderFont, sans-serif;
}

Bundle Builder Description

Control the styling of the smaller descriptive text below the main title. Great for adding context or messaging.

/* Target Bundle Builder Header Description */
.rebuy-bundle-builder__main-header-description {
font-size: 16px;
color: #YourColorHex; /* Text color */
font-family: PlaceholderFont, sans-serif;
font-style: italic;
}

Use font-style to adjust the angle of your text—choose normal, italic, or oblique to change how it looks.

Step Titles

Apply consistent styles to every step title in your Bundle Builder. Use this to define headings for each bundle step.

/* Bundle Builder ALL STEP Titles */
.rebuy-bundle-builder__step-header-title {
font-size: 24px;
color: #YourColorHex; /* Text color */
font-family: PlaceholderFont, sans-serif;
font-weight: bold;
}

Target and style a specific step’s title by index. Ideal when you want different styles for individual steps. Use 0–7 to match the step number you want to style.

(0 = Step 1, 1 = Step 2, and so on)

/* Bundle Builder Specific STEP Titles: Change number value as needed.
* 0 through 7
*/
.rebuy-bundle-builder__step-container-0 .rebuy-bundle-builder__step-header-title {
color: #YourColorHex; /* Text color */
font-size: 24px;
font-family: PlaceholderFont, sans-serif;
font-weight: bold;
}

Click here to further customize each "Step" in your Bundle Builder

Product Titles

Style the clickable product titles inside each step. Adjust font size and color to ensure they align with your brand.

/* Bundle Builder - Targets Product Titles */
.rebuy-bundle-builder .rebuy-product-title.clickable {
font-size: 16px;
color: #YourColorHex; /* Text color */
font-family: PlaceholderFont, sans-serif;
}

Style It Your Way! Add styling properties to match the exact look and feel you’re after.


Customize Bundle "Step" Containers

Fine-tune the design of each "Step" in your Bundle Builder to match your brand.

Step "Header" Blocks

Customize the Header Blocks for Bundle Builder Steps

Bundle Builder Step Header Block

/* Bundle Builder - Targets Step Header block */
.rebuy-bundle-builder__step-header {
background: #fff !important; /* adjust color hex as needed */
}

Step Header Titles

Customize the Step Title's within the Bundle Builder's Header Blocks. You can customize all step titles at once, or target specific steps individually

Adjusts ALL Step Titles

Apply consistent styles to every step title in your Bundle Builder. Use this to define headings for each bundle step.

/* Bundle Builder ALL STEP Titles */
.rebuy-bundle-builder__step-header-title {
font-size: 24px; color: #424242;
font-family: museo-sans, sans-serif;
font-weight: bold;
}

Adjust SPECIFIC Step Titles

Target and style a specific step’s title by index. Ideal when you want different styles for individual steps. Use 0–7 to match the step number you want to style.

(0 = Step 1, 1 = Step 2, and so on)

/* Bundle Builder Specific STEP Titles
* Change number value as needed: 0 through 7
*/
.rebuy-bundle-builder__step-container-0 .rebuy-bundle-builder__step-header-title {
color: #YourColorHex; /* Text color e.g #ff0000 */
}

Where to add CSS Code for Bundle Builder Widgets?

Style It Your Way! Add styling properties to match the exact look and feel you’re after.

Step's Product Container

Customize the background of the product section within each step of the Bundle Builder.

ALL Step Containers: to style the background across all steps:

 /* Bundle Builder - Targets ALL Step Containers */
.rebuy-bundle-builder__step-container {
background: #fafafa; /* adjust color hex as needed */
}

Specific Step Containers: to style a single step: Change number value as needed.

  • 0 through 7 (using 0-based indexing -> 0 = step 1)

/* Bundle Builder - Target SPECIFIC Step Containers */
rebuy-bundle-builder__step-container-0 {
background: #fafafa; /* adjust color hex as needed */
}

Tip: Update the number at the end of .step-container-0 to style different steps (use 0–7 for 0-based indexing).


Product Elements

Customize the look of product tiles, pricing, images, and buttons within your Bundle Builder.

Use the selector list from the dropdown below to style product blocks, pricing, and action areas within each step, giving you full control over tile layout and visual structure.

Full Product Selector List

Where to add CSS Code for Bundle Builder Widgets?

Enhance Styling! Add styling properties to achieve the desired look and feel!

.rebuy-bundle-builder .rebuy-product-block {}
.rebuy-bundle-builder .rebuy-carousel__slide {}
.rebuy-bundle-builder__step-product {}
.rebuy-bundle-builder .rebuy-product-media {}
.rebuy-bundle-builder .rebuy-product-image {}
.rebuy-bundle-builder .rebuy-product-image.clickable {}
.rebuy-bundle-builder .rebuy-style__hover-transition {}
.rebuy-bundle-builder .rebuy-product-info {}
.rebuy-bundle-builder .rebuy-product-title {}
.rebuy-bundle-builder .rebuy-product-price {}
.rebuy-bundle-builder__product-actions {}
.rebuy-bundle-builder .rebuy-product-actions {}
.rebuy-bundle-builder__product-quantity {}
.rebuy-bundle-builder .rebuy-button {}
.rebuy-bundle-builder .rebuy-money {}
.rebuy-bundle-builder .sale {}
.rebuy-bundle-builder .compare-at {}

Product Images

Customize the appearance of product images in both the main Bundle Builder steps and the “My Bundle” side container.

Style It Your Way! With more Image styling properties.

Product Images in the Bundle Builder Step's Product Block Container

Adjust size and styling of images inside the product block:

/* Bundle Builder Product Images */
.rebuy-bundle-builder__step-product .rebuy-product-image.clickable img {
width: 400px; /* adjust size as needed */
height: 400px; /* adjust size as needed */
border-radius: 10px; /* 0px = sharp corners (no rounding) */
}

"My Bundle" Side Container Images

Control image sizing inside the bundle summary:

/* Bundle Builder - Target Images in the Side Container */
.rebuy-bundle-builder__product-holder-media img {
width: 80px; /* adjust size as needed */
height: 80px; /* adjust size as needed */
object-fit: contain;
}

These styles help ensure your product images look clean and consistent across the entire Bundle Builder experience.


Buttons and Actions

Customize the action buttons in your Bundle Builder, including product-level and bundle-level “Add to Cart” buttons.

Where to add CSS Code for Bundle Builder Widgets?

Replace YourColorHex with your desired Color Hex code.

e.g. color: #424242; for text color and background: #ffffff; for background colors.

Style It Your Way! Add styling properties to match the exact look and feel you’re after.

ALL 'Add to Cart' Buttons

Applies to every button across the widget:

 /* Target all Bundle Builder's Add To Cart Buttons */
.rebuy-bundle-builder button.rebuy-button {
height: 45px; /* adjust as needed */
width: 100%; /* adjust as needed */
color: #YourColorHex; /* Text color e.g #ff0000 */
background: #YourColorHex;
border-color: #YourColorHex;
border-radius: 0px; /* sharp corners (no rounding) */
}

Product-Level “Add to Cart” Buttons

Targets buttons under each product in the step:

/* Bundle Builder - Target Product's Add To Cart Buttons */
.rebuy-bundle-builder__product-actions button.rebuy-button {
color: #YourColorHex; /* Text color */
background: #YourColorHex;
border-color: #YourColorHex;
border-radius: 0px; /* sharp corners (no rounding) */
}

“Add Bundle to Cart” Button (Side Container)

Styles the final action button in the summary panel:

/* Bundle Builder - Target the 'Add Bundle To Cart' Button */
.rebuy-bundle-builder__cta-container button.rebuy-button {
color: #YourColorHex; /* Text color */
background: #YourColorHex;
border-color: #YourColorHex;
border-radius: 0px; /* sharp corners (no rounding) */
}

Quick View Button

If enabled, the Quick View button appears inside the product action area of each item in the Bundle Builder.

/* Bundle Builder - The product'Quick View' Button */
button.rebuy-button.secondary.rebuy-bundle-builder__product-quick-view {
background: #YourColorHex;
color: #YourColorHex;
border: 1px solid #YourColorHex;
border-radius: 0px; /* Adjust for rounded or sharp corners */
font-size: 14px;
font-weight: lighter;
}

Want to customize the Quick View popup modal too?

Click here for styling tips:


"My Bundle" Placeholder Container

Customize the Side by Side Layout's "My Bundle" Container (where products added to the bundle are stored before the customer adds them to the cart)

Replace YourColorHex with your desired Color Hex code.

e.g. color: #424242; for text color and background: #ffffff; for background colors.

Style It Your Way! Add more styling properties properties such as padding, borders, or more to customize the appearance.

Where to add CSS Code for Bundle Builder Widgets?

Change the Background Color for the "My Bundle" Side Container

Update the background color of the right-hand summary area in the side-by-side layout to better match your store’s theme or provide visual contrast.

/* Bundle Builder "My Bundle" Side Container */
.rebuy-bundle-builder__group-container {
background: #YourColorHex;
}

Bundle Builder Progress Bar Color

Customize the progress bar color shown inside the “My Bundle” container to reflect your brand’s primary or accent color. More Bundle Builder Progress Bar elements here.

/* Bundle Builder Progress Bar Meter */
.rebuy-bundle-builder__progress-bar-meter-fill {
background: #YourColorHex !important;
}

Placeholder Product Blocks

Style the blocks that display selected products in the placeholder area. This includes borders, background color, and font styling for product titles and descriptions.

/* Bundle Builder - Target the added bundled product blocks */
.rebuy-bundle-builder__product-holder-data {
border: 1px solid #YourColorHex;
background: YourColorHex;
border-radius: 0px; /* sharp corners (no rounding) */
}

/* Bundle Builder - Product Holder Titles */
.rebuy-bundle-builder__product-holder-detail-title {
font-size: 16px;
color: #YourColorHex; /* Text color */
}

/* Bundle Builder Product Holder description text */
.rebuy-bundle-builder__product-holder-detail-description {
font-size: 16px;
color: #YourColorHex; /* Text color */
}

Placeholder Container Images

Adjust the size of product images shown in the side container to ensure consistency and balance within the layout.

/* Bundle Builder - Target Images in the Side Container */
.rebuy-bundle-builder__product-holder-media img {
width: 400px;
height: 400px;
}

'My Bundle' Side Container 'Add Bundle To Cart' Button

Customize the appearance of the final action button, including background, border, and text color. You can also separately style the pricing text inside the button to make it stand out.

/* Bundle Builder - Target the 'Add Bundle To Cart' Button */
.rebuy-bundle-builder__cta-container button.rebuy-button {
color: #YourColorHex; /* Text color */
background: #YourColorHex;
border-color: #YourColorHex;
border-radius: 0px; /* sharp corners (no rounding) */
}

/* The SALE price text within the 'Add Bundle To Cart' Button */
.rebuy-bundle-builder .rebuy-money.sale {
color: #YourColorHex !important; /* Text color */
}

Use the selector list from the dropdown below to customize other elements of the Side Container:

"My Bundle" Container Element List

Style It Your Way! Add styling properties to match the exact look and feel you’re after.

.compare-at {}
.complete {}
.has-progress {}
.rebuy-bundle-builder__cta-container {}
.rebuy-bundle-builder__group-container {}
.rebuy-bundle-builder__group-container-action {}
.rebuy-bundle-builder__group-container-body {}
.rebuy-bundle-builder__group-container-body-items {}
.rebuy-bundle-builder__group-container-header {}
.rebuy-bundle-builder__group-container-header--left {}
.rebuy-bundle-builder__group-container-header-container-length {}
.rebuy-bundle-builder__group-container-header-divider {}
.rebuy-bundle-builder__group-container-header-expand {}
.rebuy-bundle-builder__group-container-header-products_count {}
.rebuy-bundle-builder__group-container-header-title {}
.rebuy-bundle-builder__group-container-header-title-count {}
.rebuy-bundle-builder__group-container-inner {}
.rebuy-bundle-builder__group-container-progress-bar {}
.rebuy-bundle-builder__group-progress-step-wrapper {}
.rebuy-bundle-builder__progress-step-wrapper {}
.rebuy-bundle-builder__progress-bar-meter {}
.rebuy-bundle-builder__progress-bar-meter-fill {}
.rebuy-bundle-builder__progress-bar-wrapper {}
.rebuy-bundle-builder__progress-step {}
.rebuy-bundle-builder__progress-step-icon {}
.rebuy-bundle-builder__progress-step-icon-type-percentage {}
.rebuy-bundle-builder__progress-step-label {}
.rebuy-bundle-builder__progress-step--0 {}
.rebuy-bundle-builder__progress-step--1 {}
.rebuy-bundle-builder__progress-step--2 {}
.rebuy-bundle-builder__product-holder {}
.rebuy-bundle-builder__product-holder-data {}
.rebuy-bundle-builder__product-holder-info {}
.rebuy-bundle-builder__product-holder-info--left {}
.rebuy-bundle-builder__product-holder-info--right {}
.rebuy-bundle-builder__product-holder-info-delete {}
.rebuy-bundle-builder__product-holder-info-price {}
.rebuy-bundle-builder__product-holder-info-title {}
.rebuy-bundle-builder__product-holder-media {}
.rebuy-bundle-builder__product-holder-template {}
.rebuy-bundle-builder__product-holder-detail {}
.rebuy-bundle-builder__product-holder-detail-title {}
.rebuy-bundle-builder__product-holder-detail-description {}
.rebuy-bundle-builder__product-sign-holder {}
.rebuy-bundle-builder__product-holder-icon {}
.rebuy-button {}
.rebuy-money {}
.rebuy-product-info {}
.rebuy-product-media {}
.rebuy-product-price {}
.rebuy-product-title {}
.sale {}


Bundle Builder Progress Bar Meter

The progress bar in the Bundle Builder gives customers a visual indicator of their bundle completion status. You can style the meter fill, icons, and labels to match your brand and create a more engaging experience.

Where to add CSS Code for Bundle Builder Widgets?

Replace YourColorHex with your desired Color Hex code.

e.g. color: #424242; background: #ffffff;

Bundle Builder Progress Bar Meter Color

Set the fill color of the progress bar that tracks bundle completion.

/* Bundle Builder Progress Bar Color */
.rebuy-bundle-builder__progress-bar-meter-fill {
background: #YourColorHex !important;
}

Bundle Builder Progress Bar Icons

Style the circular icons in the progress bar, including color and shape (rounded or square).

/* Bundle Builder Progress Bar Icons */
.rebuy-bundle-builder__progress-step-icon {
color: #YourColorHex; /* Text color */
border-radius: 0px; /* sharp corners (no rounding) */
background: #YourColorHex;
}

Bundle Builder Progress Bar Labels

Customize the text color of the labels beneath each progress step icon.

/* Bundle Builder Progress Bar Labels */
.rebuy-bundle-builder__progress-step-label {
color: #YourColorHex; /* Text color */
}

Bundle Builder Progress Bar Completed Icon Color

Set the icon color for steps that have been completed in the progress bar, helping visually distinguish finished steps from those still in progress.

.rebuy-bundle-builder__progress-step.complete .rebuy-bundle-builder__progress-step-icon {
color: #YourColorHex; /* Text color */
background: #YourColorHex;
}

Element Selector List

Style It Your Way! Add styling properties to match the exact look and feel you’re after.

.rebuy-bundle-builder__group-container-progress-bar {}
.rebuy-bundle-builder__group-progress-step-wrapper {}
.rebuy-bundle-builder__progress-step-wrapper {}
.rebuy-bundle-builder__progress-step {}
.complete {}
.rebuy-bundle-builder__progress-step--0 {}
.rebuy-bundle-builder__progress-step--1 {}
.rebuy-bundle-builder__progress-step--2 {}
.rebuy-bundle-builder__progress-step--3 {}
.rebuy-bundle-builder__progress-step--4 {}
.rebuy-bundle-builder__progress-step--5 {}
.rebuy-bundle-builder__progress-step--6 {}
.rebuy-bundle-builder__progress-step-icon {}
.rebuy-bundle-builder__progress-step-icon-type-percentage {}
.rebuy-bundle-builder__progress-step-label {}
.rebuy-bundle-builder__progress-bar-wrapper {}
.rebuy-bundle-builder__progress-bar-meter {}
.has-progress {}
.rebuy-bundle-builder__progress-bar-meter-fill {}


Quick View Popup Modal

When the Quick View button is clicked, a modal appears allowing customers to view product details and select options before adding the item to their bundle. Use the selectors below to style the modal layout, product info, and buttons.

Where to add CSS Code for Bundle Builder Widgets?

Bundle Builder Quick View Popup Background Color

Set the background color of the Quick View modal window

/* Bundle Builder Quick View Popup Modal */
#rebuy-modal .rebuy-modal__container {
background: #YourColorHex;
}

Bundle Builder Quick View Title

Style the modal’s header text (e.g. “Choose Your Options”) with custom size, weight, and color.

/* Bundle Builder Quick View Title Header */
#rebuy-modal .rebuy-modal__container-header {
font-size: 20px;
font-weight: bold;
color: #YourColorHex; /* Text color */
}

Bundle Builder Quick View Product Title

Customize the font and color of the product title shown inside the modal.

/* Bundle Builder Quick View Product Title */
.rebuy-modal__product-info .rebuy-modal__product-title {
font-size: 18px;
color: #YourColorHex; /* Text color */
}

Bundle Builder Quick View "Add" & "Dismiss" Button

Control the appearance of both the primary “Add to Bundle” button and the secondary “Dismiss” button within the quick view modal.

/* Bundle Builder Quick View 'Add To Bundle' Button */
.rebuy-modal__container-actions .rebuy-button.primary {
background: #YourColorHex;
color: #YourColorHex; /* Text color */
border: none;
border-radius: 5px;
padding: 10px 16px;
font-weight: bold;
}


/* Bundle Builder Quick View 'Dismiss' Button */
.rebuy-modal__container-actions .rebuy-button.outline {
background: transparent;
color: #YourColorHex; /* Text color */
border: 1px solid #YourColorHex;
border-radius: 5px;
padding: 10px 16px;
}

Bundle Builder Quick View Product Image

Apply styling such as rounded corners to the product image displayed in the modal.

/* Bundle Builder Quick View Product Image */
.rebuy-modal__product-media-image {
border-radius: 5px;
}

Additional Bundle Builder Quick View Elements

Bundle Builder Quick View ALL Sub Images

Style the thumbnail image row shown below the main product image in the Quick View modal

/* Bundle Builder Quick View ALL Sub Images */
.rebuy-modal__product-sub-images {}

/* Bundle Builder Quick View Active Sub Image */
.rebuy-modal__product-sub-image.is-active {}

/* Bundle Builder Quick View Sub Image */
.rebuy-modal__product-sub-image {}

Bundle Builder Quick View Product Price

Customize the font size and color of the product price displayed inside the Quick View popup.

/* Bundle Builder Quick View Product Price */
.rebuy-modal__product-price .rebuy-money {
font-size: 16px;
color: #YourColorHex;
}



'Tab' Layout Elements

This section covers the key CSS selectors used in the Tab layout of the Rebuy Bundle Builder. The Tab layout organizes product options into category tabs, making it easier for customers to browse and build bundles step by step.

Use the selector list below to target specific areas—like the tab navigation, step containers, and scroll buttons—so you can fine-tune the layout’s appearance to match your theme.

Element Selector List

Where to add CSS Code for Bundle Builder Widgets?

Style It Your Way! Add styling properties to match the exact look and feel you’re after.

.rebuy-bundle-builder__scroll-to-button {}
.rebuy-bundle-builder__step-body {}
.rebuy-bundle-builder__step-container {}
.rebuy-bundle-builder__step-container-0 {}
.rebuy-bundle-builder__step-container-1 {}
.rebuy-bundle-builder__step-container-2 {}
.rebuy-bundle-builder__step-container-3 {}
.rebuy-bundle-builder__step-container-4 {}
.rebuy-bundle-builder__step-container-5 {}
.rebuy-bundle-builder__step-container-6 {}
.rebuy-bundle-builder__step-container-7 {}
.rebuy-bundle-builder__step-container--active {}
.rebuy-bundle-builder__step-container--not-active {}
.rebuy-bundle-builder__step-product {}
.rebuy-bundle-builder__step-tab {}
.rebuy-bundle-builder__step-tab-0 {}
.rebuy-bundle-builder__step-tab-1 {}
.rebuy-bundle-builder__step-tab-2 {}
.rebuy-bundle-builder__step-tab-3 {}
.rebuy-bundle-builder__step-tab-4 {}
.rebuy-bundle-builder__step-tab-5 {}
.rebuy-bundle-builder__step-tab-6 {}
.rebuy-bundle-builder__step-tab-7 {}
.rebuy-bundle-builder__step-tab-description {}
.rebuy-bundle-builder__step-tab-title {}
.rebuy-bundle-builder__step-tabs {}
.rebuy-bundle-builder__step-tabs--sticky {}
.rebuy-bundle-builder__step-tabs-wrapper {}
.rebuy-bundle-builder__steps-container {}
.rebuy-carousel__slide {}
.rebuy-money {}
.rebuy-product-actions {}
.rebuy-button {}
.rebuy-select {}
.rebuy-style__hover-transition {}
.rebuy-variant-title {}
.sale {}


NOTICE: 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

Did this answer your question?