How to update the Subscription Widget using CSS

You can apply custom CSS to the Subscription Widget using the widget editor to customize its appearance fully. Recharge injects these styles directly into the widget’s root element, allowing you to see your changes reflected immediately.

This guide explains how to use CSS to update styling for the Subscription Widget.

---

How it works

The Subscription Widget uses a Shadow DOM to isolate its internal styles from the rest of the page. This means you cannot style internal widget elements directly using normal CSS selectors.

Recharge exposes specific components using the part attribute, which enables styling on widget elements. These are part values, and you can target them using custom CSS in the widget editor. See Available CSS classes for a full list of part values you can use.

You can use the ::part() syntax to apply styles to these elements from the widget editor.

Example

To change the color of the Learn More link:

::part(rc-learn-more\_\_trigger) {  
  color: red;  
}

Styling elements outside the Shadow DOM

Some widget elements, like the outer container or shared DOM elements, are not inside the Shadow DOM. You can style these elements using regular CSS selectors without ::part().

Example

.rc-content-wrap {  
  padding: 16px;  
}

---

Edit the widget with custom CSS

You can add custom CSS directly within the widget editor:

1. Click Cross-Sell & Upsell from the merchant portal and select Subscription widget.
2. Click Create widget from template.
   1. Starter plan merchants can choose the Standard widget
   2. Pro and Custom plan merchants can choose the Standard widget or they can A/B test multiple widgets
3. Click the Subscription widget node and select Customize subscription widget.
4. Select Edit styles.
5. Paste your CSS into the Advanced: enter custom CSS textbox.
6. Press Done to save your changes.

👍

Tip:

Recharge hosts Custom CSS in the widget editor, ensuring you can A/B test different widget customizations for each of your A/B test paths.

---

Available CSS classes

Use the CSS classes below to customize the subscription widget:

---

CSS examples

Review the examples below for ideas on how you can customize the appearance of your subscription widget using CSS: