The ReCharge Developer Hub

Welcome to the ReCharge developer hub. You'll find comprehensive guides and documentation to help you start working with ReCharge as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Guides

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.

📘

Note

To render widget content on pages other than the product display page, such as the home page, you may need to specifically add data-productid=”{id}” to the .liquid forms on the page.

Once the widget locates a product ID on the page that matches one in Recharge, it will render content, returning all relevant product subscription information, widget settings, and store settings.

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.

Additionally, the widget will detect a collections page and auto inject a widget for every project found (this functionality is in early Alpha).

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

  • 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

Updated 2 days ago

JavaScript subscription widget


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.


Need Help? Contact Us