Adding CSS to the subscription widget in your Shopify theme

Change the look and feel of the subscription widget by adding CSS rules to your Shopify theme. This article covers how to add custom styling to the subscription widget.

Add custom styles to CSS file

Add custom styles to your theme's CSS file:

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

  2. Click on the Assets folder and select theme.css.liquid.

  3. Paste custom styles at the bottom of the CSS file.

Custom CSS examples



Add the !important attribute at the end of CSS rules to override Recharge's default styling.

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

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;

Need Help? Contact Us