Customizing the Bundles widget

This guide outlines how to customize the widget’s look and feel, using Shopify’s theme editor and custom CSS code.

📘
Platforms:

Shopify Checkout Integration

Migrated Shopify Checkout Integration

Basic customizations

Standard style customizations, such as color, text, and button options, are made through the Shopify theme editor using the Bundles widget app block.

In the merchant portal select Products and click Bundles.
Select Storefront settings.
Click Customize your bundles product page to open the Shopify theme editor.
Click on the product page display to open the Bundles widget app block.

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 are designed to make it easy for you to customize the widget's look and feel. Make sure to target classes starting with <code>rb</code> 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 <code>.rb-</code> 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;
}