JavaScript subscription widget

The subscription widget is how customers choose a Recharge subscription and delivery frequency in a store. In this section you'll find information about how the widget works under the hood, how to change the widget's appearance, and other advanced features like rendering the widget on any page.

🚧

Note

Customizations contained in these guides are outside of our scope of Recharge support. We recommend you work with a developer to implement any advanced functionality.

Installation

When you install Recharge, we automatically insert 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 will redirect 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.

Limitations

The widget will work with support themes only. For other themes, you may need to reach out to a developer who can customize your theme and make it compatible with the widget.

Supported Shopify Themes

Supported Themes

Alchemy
Artisan
Atlantic
Avenue
Blockshop
Boost
Boundless
Broadcast
Brooklyn
California
Canopy
Capital
Cascade
Colors
Context
Debut
District
Editions
Editorial
Emerge
Empire

Envy
Express
Expression
Fashionopolism
Flow
Focal
Galleria
Grid
Handy
Icon
Impulse
Ira
Kagami
Kingdom
Label
Launch
Loft
Lorenza
Maker
Masonry
Minimal

Mobilia
Modular
Motion
Mr Parker
Narrative
Pacific
Palo Alto
Parallax
Pipeline
Prestige
Providence
Reach
Responsive
Retina
Showcase
ShowTime
Simple
Split
Startup
Story
Streamline

Sunrise
Supply
Symmetry
Testament
Trademark
Vantage
Venture
Venue
Vogue
Warehouse


Need Help? Contact Us