Customizing the subscription widget

You can customize the subscription widget for your BigCommerce Checkout Integration store by disabling the default frontend styling and using BigCommerce modifier customizations.

How the subscription widget works

When you install Recharge for your BigCommerce store, Recharge adds a script to the BigCommerce Script Manager. This script runs the frontend code necessary for integrating Recharge into your storefront, including the subscription widget, which displays on product pages.

The subscription widget works by utilizing BigCommerce modifiers. A modifier is made for each product when you add BigCommerce products to Recharge to sell as subscriptions. The modifier uses the subscription rules you configure in Recharge to display subscription type, order schedule, optional discount, and more.

To display the subscription widget, the script added during installation runs on the page, hides the BigCommerce modifier, and injects the Recharge subscription widget on the product page.

The Recharge script will run, hide the BigCommerce modifier and then inject the Recharge subscription widget on the product page.

Step 1 - Disable the frontend widget styling

If you’d like to fully customize the subscription widget, you must disable the frontend widget styling on product pages. Add the following script to your BigCommerce Script Manager to disable the frontend widget styling:

 {
            "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
        }

See Adding and Editing Scripts from BigCommerce's Help Center for more information on adding scripts to Script Manager.

With the frontend widget styling disabled, you will be left with a plain BigCommerce modifier. The following example is an example of a Recharge subscription widget:

The following example is the default BigCommerce styling with the frontend styling disabled:

Step 2 - Load information from store CDN

Before customizing your modifier, we recommend loading information from the store CDN to ensure the verbiage is correct in your modifier values. After the product script loads, you can do this by retrieving subscription information from RCA_DATA.RCA_PRODUCT_DATA.

[
    {
        "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
    }
]

For more information on using the Recharge subscription widget CDN, see Storefront.

Step 3 - Customize your modifier

After disabling the frontend widget styling and loading the store information CDN, you can customize your modifier in BigCommerce.

See BigCommerce's Theme Development resources for information on customizing your BigCommerce modifiers using CSS.


Need Help? Contact Us