Customizing the Bundles widget
The Bundles widget can be customized to match your storefront’s brand and style. This guide outlines how to customize the widget’s look and feel, using Shopify’s theme editor and custom CSS code.
Basic customizations
Standard style customizations, like color, are done through the Shopify theme editor by selecting Customize bundle layout on the Bundle page in the merchant portal.
Advanced customizations
Further customization to the widget can be done using CSS coding. CSS customizations are outside the Recharge scope of support. Work with a Recharge partner if you need assistance.
The Bundles widget uses CSS variables to centralize style settings. Custom CSS can be added to your theme assets or by building a custom HTML section in the product template. A full list of CSS variables that can be used to customize is below.
/* General variables */
.rb-app {
--rb-app-bg: #ffffff;
--rb-brand-color: #000;
--rb-body-color: #000;
/* Layout */
--rb-page-width: 1220px;
--rb-page-pady: 0;
--rb-page-padx: 15px;
--rb-base-spacing: 15px;
/* Buttons */
--rb-btn-color: #fff;
--rb-btn-radius: 4px;
--rb-btn-padx: 15px;
--rb-btn-pady: calc(var(--rb-btn-padx) / 2);
--rb-btn-bg: var(--rb-brand-color);
--rb-btn-bg-hover: var(--rb-brand-color);
--rb-btn-color-hover: var(--rb-btn-color);
--rb-heading-color: var(--rb-body-color);
--rb-heading-weight: 700;
/* Box builder */
--rb-progress-bar-color: var(--rb-brand-color);
--rb-progress-bar-guide: var(--rb-brand-color-40);
--rb-progress-bar-radius: var(--rb-item-radius);
--rb-alerts-bg: var(--rb-body-color);
--rb-alerts-color: var(--rb-app-bg);
--rb-item-width: 100%;
--rb-item-radius: 4px;
--rb-items-gap: calc(var(--rb-base-spacing) * 2);
--rb-item-aspect-ratio: 100%;
/* Form elements */
--rb-item-input-bg: var(--rb-app-bg);
--rb-item-input-border: var(--rb-body-color-30);
--rb-item-input-radius: var(--rb-item-radius);
--rb-disabled-bg: var(--rb-body-color-10);
--rb-disabled-color: var(--rb-body-color-70);
--rb-select-bg: var(--rb-app-bg);
--rb-select-border-color: var(--rb-body-color-30);
--rb-select-radius: var(--rb-item-radius);
--rb-border-color: var(--rb-body-color);
}
/* Multi-step layout variables */
.rb-app {
/* Navigation */
--rb-nav-bg: var(--rb-body-color-10);
--rb-nav-color: var(--rb-body-color);
--rb-nav-step-number-bg: var(--rb-app-bg);
--rb-nav-step-number-color: var(--rb-body-color);
--rb-nav-step-number-bg-complete: var(--rb-body-color);
--rb-nav-step-number-color-complete: var(--rb-app-bg);
--rb-nav-btn-background: var(--rb-btn-bg);
--rb-nav-btn-color: var(--rb-btn-color);
--rb-nav-steps-width: calc(var(--rb-base-spacing) * 2);
--rb-nav-steps-gap: calc(var(--rb-base-spacing) * 1.5);
/* Step headers */
--rb-step-header-width: 700px;
/* Options step */
--rb-option-width: 260px;
--rb-options-gap: calc(var(--rb-base-spacing) * 2);
--rb-option-radius: var(--rb-item-radius);
--rb-option-bg: var(--rb-body-color-10);
--rb-option-border: var(--rb-body-color-10);
--rb-option-bg-selected: var(--rb-body-color-10);
--rb-option-border-selected: var(--rb-brand-color);
--rb-option-img-ratio: 100%;
/* Review step */
--rb-order-imgs-width: 100px;
}
Most elements in the widget include a class name that starts with .rb-. These classes were designed specifically to make it easy for you to customize the look and feel of the widget.
Make sure to target classes starting with rb when customizing the widget using CSS. Avoid targeting HTML elements directly, or any other classes.
While HTML elements and class names might change in the future, the .rb- classes will always be respected.
Updated 5 months ago