Add CSS to the subscription widget in Shopify theme
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
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;
}
Updated 6 months ago