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.
Before you start
- To use the JS widget out of the box, your store must be using a Shopify 1.0 theme. Recharge will not be supporting customizations to the JS widget to work with 2.0 themes.
- You can build your own custom JS 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.
- If you want to use a 2.0 theme out of box, consider using the Shopify 2.0 subscription widget. With the Shopify 2.0 Widget, place the subscription widget on your product page directly through the Online Store editor in Shopify. With this widget, you can make basic customizations directly on the Shopify Theme Editor.
- The Shopify 2.0 subscription widget is less customizable due to it using an app-block and not requiring code.
- 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, 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 |
Updated 2 months ago