Customizing the Bundles widget

The Bundle 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. Adjust the code in the recharge-bundle.liquid file to update these CSS variables. 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- The sole purpose of 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.


Suggested Article

Need Help? Contact Us