How to create different widgets for individual products using product templates in Shopify using the Subscription Widget 2.0
With the Subscription Widget 2.0, you can customize different subscription widgets using Shopify’s templates feature to offer different custom widgets assigned to specific products. For example, you can customize the subscribe widget to match a product that uses specific styling, ie. to highlight a sale or an exclusive item.
This guide explains how to offer different widget using templates in the Shopify theme editor.
- Shopify Checkout Integration
- Migrated Shopify Checkout Integration
Step 1 - Create the product page template
Create the product page template in Shopify for your selected theme:
- Log in to your Shopify admin and select Online Store.
- Click Customize next to the theme you want to create product page templates for.
- Click the page drop-down menu item at the top of the editor and select Products.
- Select Create template.
- Update the name of the template, and click Create template.
Step 2 - Customize the widget
Customize the widget appearance for your new template:
- Ensure that the new product page template is selected from the page drop-down at the top of the editor.
- Select Subscription Widget 2.0 under Template.
- Update the widget styling for the specific template.
- Click Save to save your changes.
Step 3 - Assign the product page template to your product in Shopify
Add the product page template to your product in Shopify so customers can interact with your customized widget:
- Navigate back to your Shopify admin and select Products.
- Select the product that should use the customized widget.
- Click on the drop-down menu under Theme template and select the new product page template.
- Click Save.
Considerations
Consider the following when using the Subscription Widget 2.0:
Consideration |
Notes |
| Custom CSS | Recharge advises against making custom CSS changes to your theme that target the widget while it is part of the Early Adopter Program, as coding changes may occur during this phase. Recharge plans to introduce a solution for custom CSS changes when the widget reaches General Release. |
| Frequency details | To change the language on the widget, you must choose either the JSON option or the “Plan name” option in the Theme Editor, then directly update the plan name in your merchant portal to your desired language. |
| Page builder apps | Page builder apps such as Pagefly and Shogun are not compatible with the Subscription Widget 2.0 out-of-the-box. |
| Shopify themes |
The Subscription Widget 2.0 is compatible with all free Shopify themes. The Widget 2.0 is not compatible with the following paid Shopify themes:
The following themes are partially compatible with the Widget 2.0, though full functionality is not yet supported:
|
| Shopify Markets |
The Subscription Widget 2.0 is compatible with Shopify Markets and can be completely translated. |
| Widget settings in the Recharge merchant portal |
You can configure the Subscription Widget 2.0 and its settings directly in the Shopify Theme Editor. The widget settings available in the Recharge merchant portal only work for merchants using the original version of the widget. |
| Price label | The price label on the product page does not update when switching between one-time and subscription options due to a Shopify limitation. |
Resources
See the following resources for additional Subscription Widget 2.0 information.
