Customizing the subscription widget for BigCommerce stores

This article covers how the subscription widget works on BigCommerce, disabling the frontend widget styling, and how to load data from the store CDN for customization.

🚧

Note: To streamline and enhance the platform, Recharge will no longer support BigCommerce after December 31, 2025. Merchants may continue using BigCommerce until the feature reaches end of life in October 2026, however, Support will be limited after December 31, 2025. Merchants using BigCommerce are encouraged to begin migrating to Shopify, which Recharge will continue to support. Learn more in Shopify’s guide on Migrating to Shopify.

📘

Platform:

  • BigCommerce Checkout Integration
  • Recharge Checkout on BigCommerce

Understanding the subscription widget

Recharge adds a script to the BigCommerce Script Manager upon install running the frontend code on your store. One of the features is the subscription widget, which displays on the product page.

This is how the subscription widget works:

  • A BigCommerce modifier is made on the BigCommerce product that represents the subscription information with the options that you’ve configured on the Recharge product. For example, Delivery Every: 30 days, 60 days.
  • The Recharge script will run on the product page, hide the BigCommerce modifier, and inject the Recharge subscription widget

If you’d like to fully customize the subscription widget, you must disable the frontend widget styling on product pages, and style the widget as desired from the default BigCommerce modifier styling.


Disabling the Frontend widget styling

To disable the frontend widget styling, add this script to your BigCommerce Script Manager:

{
            "name": "BC-Recharge Settings Script",
            "description": "BC Recharge Settings Script",
            "html": "<script>let RCA_SETTINGS = {
                pages: {
                    product: {
                        enabled: false
                    }
            }; }</script>",
            "auto_uninstall": true,
            "load_method": "default",
            "location": "head",
            "visibility": "all_pages",
            "kind": "script_tag",
            "enabled": true
        }

Once the widget is disabled, you will be left with a plain BigCommerce Modifier. See the following image for an example.

With this plain modifier, you can fully customize it like any other BigCommerce Modifier.


Load data from the store CDN

To ensure that the verbiage is correct in your modifier values, you can retrieve subscription information from RCA_DATA.RCA_PRODUCT_DATA after the product script loads. This has all the product information you need to create a customized subscription widget.

[
    {
        "id": 141,
        "weight": 2,
        "variants": [
            {
                "id": 105,
                "weight": 2,
                "tax_code": "",
                "tax_class_id": ""
            }
        ],
        "subscriptionModifier": {
            "id": 251,
            "charge_every": 30,
            "frequencies": {
                "358": 30
            }
        },
        "subscription": {
            "discount_type": "percentage",
            "discount_amount": 0,
            "charge_interval_frequency": 30,
            "cutoff_day_of_month": null,
            "cutoff_day_of_week": null,
            "expire_after_specific_number_of_charges": null,
            "modifiable_properties": [],
            "number_charges_until_expiration": null,
            "order_day_of_month": null,
            "order_day_of_week": null,
            "order_interval_frequency_options": [
                30
            ],
            "order_interval_unit": "day",
            "storefront_purchase_options": "subscription_only"
        },
        "tax_code": "",
        "isSubscription": true,
        "isSubscriptionOnly": true,
        "isPrepaid": false
    },
    {
        "id": 142,
        "weight": 0,
        "variants": [
            {
                "id": 106,
                "weight": 0,
                "tax_code": "",
                "tax_class_id": ""
            }
        ],
        "subscriptionModifier": {
            "id": 250,
            "charge_every": 180,
            "frequencies": {
                "356": 30
            }
        },
        "subscription": {
            "discount_type": "percentage",
            "discount_amount": 0,
            "charge_interval_frequency": 180,
            "cutoff_day_of_month": null,
            "cutoff_day_of_week": null,
            "expire_after_specific_number_of_charges": null,
            "modifiable_properties": [],
            "number_charges_until_expiration": null,
            "order_day_of_month": null,
            "order_day_of_week": null,
            "order_interval_frequency_options": [
                30
            ],
            "order_interval_unit": "day",
            "storefront_purchase_options": "subscription_only"
        },
        "tax_code": "",
        "isSubscription": true,
        "isSubscriptionOnly": true,
        "isPrepaid": true
    }
]