Customizing the widget

You can change the look and feel of the JS subscription widget via CSS rules. This article outlines methods for adding CSS to the widget, the selectable classes and an example for changing the look of the widget.

Considerations

We recommend being mindful of the following best practices when using CSS to customize the widget:

  • Before targeting the widget with CSS to customize it, we recommend using the built-in customization options within the Recharge merchant portal. For more details on the built-in customization options, see Modifying the subscription widget.
  • Only target classes listed in this guide with CSS rules. Do not use DOM selectors to style elements (ie. div, label). Recharge may change which selectors are used, so this is the recommended method.
  • We do not recommend using JavaScript to change the look or behavior of the widget. You can do this, but Recharge cannot assist with troubleshooting any issues that arise with your theme.
  • Although specificity is generally better to override styles, you may use !important statements when needed.

Classes

NameClassDescription
Widget Container.rc-containerContains both the widget and subscription details
Widget.rc-widgetThe widget itself.
Widget Template Container.rc-templateContains the specific template
Legacy Radio Template.rc-*template__legacy*-radioLegacy radio template container. This is the current default template.
Radio Template.rc-template__radioRadio template container
Radio Group Template.rc-template__radio-groupRadio group template container
Button Group Template.rc-template__button-groupThe button group template container
Checkbox Template.rc-template__checkboxCheckbox template container
Option.rc-optionWill select both onetime and subscribe purchase options
Onetime Option.rc-option__onetimeOnetime option
Subscribe Option.rc-option__subsaveSubscribe option
Active Option.rc-option--activeThe currently active option
Radio.rc-radioTargets all radios shown
Radio Input.rc-radio__inputTargets just the radio input
Radio Label Container.rc-radio__labelTargets the radio label
Option Label Text.rc-option__textText associated with an option
Option Label Price.rc-option__pricePrice associated with an option
Option Label Discount.rc-option__discountDiscount associated with an option
Selling Plans Container.rc-selling-plansContainer for selling plan
Selling Plans Label.rc-selling-plans__labelLabel associated with selling plans
Selling Plans dropdown.rc-selling-plans__dropdownDropdown for selling plans

DOM structure

The following is an example of where the JS widget is located within the DOM tree.

<div class="rc-container">
  <div class="rc-widget">
    <div class="rc-template">
      <div class="rc-template__legacy-radio"> // this can be any of the different templates
        {...specific template...}
      </div>
    </div>
  </div>
  <!-- <div>subscription details docs TBD</div> -->
</div>

Example CSS

The following is an example using Sass to target and style the widget. To convert to CSS, combine the nested selectors (ie .rc-container .rc-widget .rc-radio__input).


:root {
  --rc-midnight: #191d48;
  --rc-cobalt: #3901f1;
  --rc-paper: #fffbf6;
  --rc-jade: #3c716a;
  --rc-rose: #ffa9bd;
  --rc-magenta: #fd2974;
  --rc-aqua: #99e1d9;
  --rc-iris: #8263e3;
}

.rc-container {
  .rc-widget {
    border: 1px solid var(--rc-jade);
    border-radius: 20px;
    background-color: var(--rc-paper);
    color: var(--rc-midnight);
    overflow: hidden;

    .rc-radio__input {
      border: 0px;
      clip: rect(0px, 0px, 0px, 0px);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0px;
      overflow: hidden;
      white-space: nowrap;
      position: absolute;
    }

    .rc-option {
      color: var(--rc-midnight);
      padding: 8px;
    }

    .rc-option--active {
      color: var(--rc-rose);
      background-color: var(--rc-midnight);
    }

    .rc-selling-plans {
      padding-left: 8px;
    }

    .rc-selling-plans__dropdown {
      color: var(--rc-midnight);
      background-color: var(--rc-rose);
      border-color: var(--rc-jade);
    }
  }
}

Example result

571571

Need Help? Contact Us