Here is a step-by-step guide to customize Recurpay widget translations based on the storefront language using Shopify's Shopify.locale object. This allows you to show translated subscription text automatically for different languages.
Step 1. Open the Recurpay theme editor
Open the Recurpay dashboard and navigate to the following URL:
https://{{your_store_recurpay_url}}/themes/editorThis will open the Recurpay theme editor where the widget script can be modified.
2. Open the widget.js file
Inside the theme editor, locate and open:
widget.js
This file controls subscription widget behavior and translations.
3. Locate where Recurpay loads widget settings
Search for this line in the file:
recurpay.settings = response.settings;
👉 Add your translation overrides immediately after this line.
4. Detect the storefront language using Shopify.locale
Shopify exposes the current storefront language using global object:
Shopify.locale
Example values:
en(English)es(Spanish)fr(French)de(German)
5. Add hard-coded translation overrides (simple approach)
Copy and paste this after:
recurpay.settings = response.settings;
Tip: Log all existing translation keys before editing
To view all available translation keys and their current default values, log them in the console:
console.log("Recurpay Translations:", recurpay.settings.translations);This helps you understand what text can be customized before overriding anything.
Example translation override code
// Spanish translations
if (Shopify.locale === "es") {
recurpay.settings.translations.premium_subscription_label = "Suscríbete y ahorra";
recurpay.settings.translations.premium_onetime_label = "Compra única";
recurpay.settings.translations.premium_subscription_button_text = "Suscribirse ahora";
}
// French translations
if (Shopify.locale === "fr") {
recurpay.settings.translations.premium_subscription_label = "Abonnez-vous et économisez";
recurpay.settings.translations.premium_onetime_label = "Achat unique";
recurpay.settings.translations.premium_subscription_button_text = "S'abonner maintenant";
}
// German translations
if (Shopify.locale === "de") {
recurpay.settings.translations.premium_subscription_label = "Abonnieren und sparen";
recurpay.settings.translations.premium_onetime_label = "Einmalkauf";
recurpay.settings.translations.premium_subscription_button_text = "Jetzt abonnieren";
}
6. Sample translation keys you can customize (with default values)
You can override any of the following keys inside recurpay.settings.translations:
premium_frequency_dropdown_label: "Deliver Every"
premium_one_time_discount_label: "[[DISCOUNT_PERCENTAGE]]% ↓"
premium_one_time_saving_label: "Save [[SAVING_AMOUNT]]"
premium_one_time_saving_msg: "Save more with subscriptions"
premium_onetime_label: "One-Time Purchase"
premium_subscription_button_text: "Subscribe Now"
premium_subscription_discount_label: "[[SAVING_AMOUNT]]"
premium_subscription_label: "Subscribe Now and Save"
premium_subscription_label_description: "Never run out of supplies. Cancel anytime"
premium_subscription_saving_label: "Savings"
premium_subscription_saving_msg: "You have made the right choice to save more"
Keep dynamic placeholders unchanged
Some translation values include placeholders that must not be removed or renamed, such as:
[[SAVED_AMOUNT]] [[SAVING_AMOUNT]] [[DISCOUNT_PERCENTAGE]] [[AMOUNT]] [[COMPARE_AMOUNT]]
8. How this works in the storefront
The widget will automatically show translated text based on the customer’s storefront language.
Language | Result |
English ( | Default Recurpay text |
Spanish ( | Spanish widget labels |
French ( | French widget labels |
German ( | German widget labels |
9. Recommended testing steps
Open a product page
Switch Shopify storefront language
Confirm widget text updates
Verify cart & checkout behavior
Ensure placeholders render correctly
Facing any issue with setting this up? Click the green chat button on Recurpay dashboard and we will get in touch with you or write us at help@recurpay.com