Adding CSS to the subscription widget in your Shopify theme

This article covers how to add custom styling to the subscription widget.

📘

Platform

• Shopify Checkout Integration

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

🚧

Note:

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;
}