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 customer portal.
  • 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

Name

Class

Description

Widget Container

.rc-container

Contains both the widget and subscription details

Widget

.rc-widget

The widget itself.

Widget Template Container

.rc-template

Contains the specific template

Legacy Radio Template

.rc-*template__legacy*-radio

Legacy radio template container. This is the current default template.

Radio Template

.rc-template__radio

Radio template container

Radio Group Template

.rc-template__radio-group

Radio group template container

Button Group Template

.rc-template__button-group

The button group template container

Checkbox Template

.rc-template__checkbox

Checkbox template container

Option

.rc-option

Will select both onetime and subscribe purchase options

Onetime Option

.rc-option__onetime

Onetime option

Subscribe Option

.rc-option__subsave

Subscribe option

Active Option

.rc-option--active

The currently active option

Radio

.rc-radio

Targets all radios shown

Radio Input

.rc-radio__input

Targets just the radio input

Radio Label Container

.rc-radio__label

Targets the radio label

Option Label Text

.rc-option__text

Text associated with an option

Option Label Price

.rc-option__price

Price associated with an option

Option Label Discount

.rc-option__discount

Discount associated with an option

Selling Plans Container

.rc-selling-plans

Container for selling plan

Selling Plans Label

.rc-selling-plans__label

Label associated with selling plans

Selling Plans dropdown

.rc-selling-plans__dropdown

Dropdown 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