Customizing the subscription widget

Stores using the BigCommerce Checkout Integration do not have access to checkout settings in Recharge, as this is handled directly by BigCommerce. Refer to BigCommerce’s guide on Customizing the style of your checkout.

📘

Platform:

• BigCommerce Checkout Integration

Add CSS to the BigCommerce subscription widget

You can add CSS to a BigCommerce theme by editing your theme files.

1. Navigate to assets/scss/theme.scss in your theme files.
2. Add custom styles to the bottom of theme.scss.

To learn more about editing a BigCommerce theme's CSS, see Theme Assets.

Adjust spacing on subscription selector

The following lists different ways you can adjust spacing for the widget:

• Increase margin-top and margin-bottom of the .rca-subscription-form class to a desired amount to separate the widget from surrounding buttons.
• Add margin-bottom: 10px to the .rca-subscription-form-buttons class to adjust the height of the subscription frequency selector.
• Add margin-left: 0 to the .rca-subscription class to move add-to-cart button left.

Updating the CSS for the widget in this method will provide additional padding around the widget, as seen in the following screenshot: