API ReferenceTheme Engine ReferenceJavaScript SDK ReferenceRecharge Help CenterContact Us

Modifying the subscription widget text

Translate the subscription widget to a different language, or use verbiage that aligns with your brand.

Suggest Edits

The subscription widget is the visual representation of your store’s recurring subscription offerings. It displays on all pages that have a recurring product (including one-time products with subscription options), allowing your customers to choose the subscription option on that product page. This guide covers how you can translate or update the text displayed on the widget.

📘

Platform:

  • BigCommerce Checkout Integration

Update the subscription widget text

Create a RCA_LOCALES object with a script. This object contains key-value pairs that correspond to the widget text and will update the text shown to customers.

The following steps let you update the widget subscription text:

  1. Navigate to Storefront, then select Script Manager.
  2. Create a new script and select All Pages as the location with Essential as the category.
  3. Select the option to load the script in the Header.

Paste the following code in the Script field and adjust the values of each label with your preferred text.

<script>
let RCA_LOCALES = {
    lang: "en",
    locales: {
        en: {
            "accounts": {
                "manage_subscriptions_label": "Manage Subscriptions"
            },
            "products": {
                "one_time_purchase_label": "One-Time Purchase",
                "subscription_label": "Subscription",
                "subscribe_and_save_label": "Subscribe & Save",
                "subscribe_and_save_extended_label": "on every recurring order",
                "subscribe_and_save_frequency_label": "Delivery"
            },
            "cart": {
                "cart_sub_save_frequency_text": "Subscribe & Save: Every",
                "cart_sub_frequency_text": "Subscription: Every"
            }
        }
    }
}
</script>

Add content to subscription widget

🚧

Note:

Localization of the storefront as a whole can be done by manipulating the BigCommerce Stencil en.json file. See Translation Keys for more information.

You can add content to the subscription widget with a script. The following script is an example of changing the widget to fit your needs. This script adds subtext and a strikethrough price to the widget. Add it in the Scripts Manager in the Footer of Product pages.

<script>
function insertCustomStyles(){
    const styles = `
        #recharge-subscription .rca-subscription-form__button.rca-custom-selector-opened {
            align-items: start;
            height: 100% !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        #rca-linetrought-price {
            margin-right: 5px;
            opacity: 0.5;
            text-decoration: line-through;
        }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);
}

function widgetCustomText(){
    const subscriptionButton = document.querySelector('.rca-subscription-form__button--subscription');
    const oneTimeButton = document.querySelector('.rca-subscription-form__button--otp');
    const targetContainer = document.querySelector('.rca-subscription-form-buttons-subscription-text');
    const productID = parseInt(document.querySelector('[data-entity-id]').dataset.entityId);
    const discountAmount = RCA_DATA.getProductByBCProductID( productID ).subscriptions[0].discount_amount;

    const widgetCustomSettings = {
        showLineTroughtPrice : true,
        text: `Save ${discountAmount}% now when you subscribe to repeat deliveries of this product. No fees, edit or cancel anytime.`
    }

    const textContainer = document.createElement('span');
    textContainer.innerHTML = widgetCustomSettings.text;
    textContainer.style.display = 'block';
    textContainer.style.fontSize = '12px';
    textContainer.style.width = '14s0%';
    textContainer.style.marginTop = '4px';
    textContainer.id = 'rca-sub-text-subscription';


   
    /**
     * Add the custom elements when clik on the subscription price
     */
    subscriptionButton.addEventListener('click', function(e){

        targetContainer.parentNode.classList.add('rca-custom-selector-opened');
        targetContainer.appendChild(textContainer);

        if( widgetCustomSettings.showLineTroughtPrice ){
            const oneTimePrice = document.querySelector('.rca-subscription-form__button--otp .rca-subscription-form__button-price').innerText;
            const lineTroughContainer = document.createElement('span');
            lineTroughContainer.id = 'rca-linetrought-price';
            lineTroughContainer.innerText = oneTimePrice;

            const subscriptionTarget = document.querySelector('.rca-custom-selector-opened .rca-subscription-form__button-price');
            subscriptionTarget.prepend(lineTroughContainer);
        }
    }); 
    
    oneTimeButton.addEventListener('click', function(e){
        //Reset the adapter to default
        const subText = document.querySelector('#rca-sub-text-subscription');
        const duplicatePrice = document.querySelector('#rca-linetrought-price');
        if( subText && duplicatePrice ){
            duplicatePrice.remove();
            subText.remove();
        }
    });
}

// Wait for RCA_DATA to be defined
let checkExist = setInterval(function () {
    const targetElement = document.querySelector('.rca-subscription-form__button--subscription');
    if (typeof RCA_DATA !== 'undefined' && RCA_DATA && targetElement) {
        clearInterval(checkExist);
        insertCustomStyles();
        widgetCustomText();
    }
}, 20);
// Stop checking for RCA_DATA. It either loaded or clearly is not here.
setTimeout(clearInterval, 10000, checkExist)
</script>

The following image displays how the widget appears after adding the script with subtext and a strikethrough price

Updated 5 days ago

Need Help? Contact Us