Legacy Javascript Widget

In this section, you'll find information about how the Legacy Javascript Widget works, how to change the widget's appearance, and other advanced features like rendering the widget on any page.

📘

Platform:

• Shopify Checkout Integration
• Migrated Shopify Checkout Integration

Before you start

• You must use a Shopify 1.0 theme to use the Legacy Javascript Widget. Recharge does not support widget customizations with 2.0 themes.
  • You can build your a custom widget that works on any page and with both Shopify's 1.0 and 2.0 themes. Building a custom widget allows you to make more in-depth customizations.
• Use the Subscription Widget if you use a 2.0 theme.
• This feature is not supported by Recharge as per the design and integration policy since it requires custom coding on your end. This documentation is meant to be used as a reference in order for you, your team, or a recommended third-party developer to carry out.

Installation

When you install Recharge, Recharge automatically inserts a Shopify ScriptTag into your store that makes the widget available on every page via CDN. There is no additional installation needed to access the widget code client-side.

Functionality

The widget automatically attempts to inject content anywhere it can detect a data-productid=”{id}” that corresponds to a product in Recharge. On supported themes, this works automatically.

As the user navigates the page, the widget will watch for variant changes, price changes, etc. The widget will update in real time to reflect these changes.

The widget will also inject a Manage Subscription button on the login page, which redirects the user to the Customer Portal.

Create a custom widget

You can generate your own widget with a custom product in a custom location using our widget command methods. See Advanced widget commands for information on creating, destroying and previewing widgets using its JavaScript interface.