Add CSS to the subscription widget in Shopify theme

You can change the look and feel of the subscription widget by adding CSS rules to your Shopify theme. This article will explain how to add custom styling to the widget.

1. Edit your Shopify theme

Navigate to your Shopify store and in the theme editor, open the theme code

2. Adding custom styles to CSS file

Click on the Assets folder and select theme.css.liquid. This is where you'll add custom CSS. Then paste custom styles at the bottom of the CSS file

Custom CSS Examples

The following are examples of CSS rules that accomplish various changes to the subscription widget.

🚧

Note

You should add the !important attribute at the end of CSS rules to override Recharge's default styling. This is demonstrated in the examples below.

Change color of subscription selection area

div.rc_block__type--active {
    background-color: #F8F8F8 !important;
}

Change price color and size

.price-item {
    color: red !important;
    font-size: 20px !important;
}