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.
Platforms:
- Recharge Checkout on Shopify
- Shopify Checkout Integration
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.
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.
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. Review the following code for a full list of CSS variables that can be used to customize bundles.
/* 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;
}
Updated 8 months ago