You can edit your store’s Shopify theme to customize the store's content, layout, typography, and colors.

This article covers how to identify which widget your store is using, steps to take when changing your store’s Shopify theme, and additional steps to ensure your widget is working as expected after changing themes.

Understanding the widget options

There are three widget options available to stores on the Shopify Checkout Integration:

Subscription Widget

Currently in the Early Adopter Program, the Subscription Widget uses Recharge's flow canvas to create and customize the widget, which you add to your Shopify theme using an app block. This option provides easy to use customization options, and integrates with Online Store 2.0 themes seamlessly.

Legacy Subscription Widget

The Legacy Subscription Widget works out of the box with Online Store 2.0 themes and supports multi-currency markets. With the Legacy Subscription Widget, place the subscription widget on your product page directly through the Online Store editor in Shopify.

The Legacy Subscription Widget is less customizable due to it using an app-block and not requiring code.

Legacy Javascript Widget

To use the Legacy Javascript Widget out of the box, your store must be using a Shopify 1.0 theme. The Legacy Javascript Widget is more customizable as you can build your own custom Legacy Javascript Widget that works on any page with both Shopify's 1.0 and 2.0 themes. Recharge does not support customizing the Legacy Javascript Widget to work with 2.0 themes.

How to install a new Shopify theme

Make sure to document any code customizations made to your existing theme so that you can replicate these changes when your new theme is live. Backup and duplicate your theme before proceeding. See Supported Shopify themes for a list of supported themes through Recharge.

To change your store's theme in Shopify:

1. Log in to your Shopify admin and click Online Store, then select Themes.
   
2. In the Theme library section, click the Add theme dropdown.
   
3. There are three ways you can add a theme:
   • Visit Theme Store: Browse Shopify's free and paid themes to use in your store. 
   • Upload zip file: Upload a zip file if you’ve downloaded your theme from a third-party vendor.
   • Connect from GitHub: Connect from GitHub if you’ve downloaded your theme from a third-party vendor.
4. This example uses a theme added from the Theme Store. Click Try theme once you’ve found the new theme for your store.
   
5. Once you add your theme to Shopify, you can customize it to your liking.
6. In the Theme library section of your Shopify admin, click Customize next to your new theme.
   
7. Once you’re satisfied with your changes, return to Theme library, Click Actions, and select Preview the theme.
8. In the Theme library section, click Publish once you are ready to go live, then select Publish again.
   

Additional steps may be required depending on the widget and theme your store uses. 

Duplicate and backup your theme

Duplicate and backup your theme to make sure no customizations are lost when switching themes. 

To duplicate and backup your current theme:

1. Log in to your Shopify admin and click Online Store, then select Themes.
   
2. Click Actions, then select Duplicate
3. Click Actions on the duplicated theme and select Download theme file to save your previous theme as a backup.

Changing your theme with the Subscription Widget

Recharge displays the Subscription Widget on your Shopify theme through an app block you add to your theme. The widget appears on all matching product pages unless you add trigger conditions to limit it to specific pages.

The setup process for changing your theme depends on your product page templates and trigger conditions.

If your new theme uses the same product page templates as your existing theme, or you don’t need trigger conditions:

1. Add the Subscription Widget app block to the new Shopify theme.
2. Publish the new theme in Shopify.

If your new theme uses different product page templates and you use trigger conditions:

1. Add the Subscription Widget app block to the new Shopify theme.
2. Create the missing product page templates from the new, unpublished theme in your existing live theme. This ensures the templates appear as trigger condition options in Recharge’s widget builder.
   • For example, if your draft theme includes a product page template named Page Template A, but your live theme does not, you need to create Page Template A as a product page template in your live theme.
3. Update the widget’s trigger conditions in Recharge to include your new product page templates.
4. Save your changes in Recharge.
5. Publish the new theme in Shopify.

Changing your theme with the Legacy Subscription Widget

There are two actions you must make when changing themes using the Legacy Subscription Widget:

• Add the app block widget to your product templates
• Add the Manage Subscriptions link

Add the app block widget to your product templates

When changing themes, you must add the Subscription Widget app block to your product pages again, to display the subscription widget on your storefront. 

Follow the steps outlined in Install the Legacy Subscription Widget to re-add the widget to your product page. 

Add the Manage Subscriptions link

When changing themes, the new theme does not automatically have the Manage Subscriptions link installed. 

To add the Manage Subscriptions link for the Legacy Subscription Widget, follow the steps under Option 2 in Adding and adjusting the Manage Subscriptions' link to the customer account in Shopify.

Changing your theme with the Legacy Javascript Widget

Recharge’s ScriptTag automatically injects the Legacy Javascript Widget when you change your theme. All stores using the Legacy Javascript Widget have this ScriptTag unless a member of your team requested it to be removed. 

There are two actions you must make when changing themes using the Legacy Javascript Widget: 

• Add the Manage Subscriptions link
• Legacy Javascript Widget injects itself into a 2.0 theme

Add the Manage Subscriptions link

When changing themes, the new theme does not automatically have the Manage Subscriptions link installed. 

Follow the steps under Option 1 in Adding and adjusting the Manage Subscriptions link to the customer account in Shopify to add the Manage Subscriptions link for the JS subscription widget.

Legacy Javascript Widget injects itself into a 2.0 theme

Typically, stores using 1.0 themes are the only stores that should use the Legacy Javascript Widget, although there are instances such as custom configurations, where the Legacy Javascript Widget is required regardless of theme version. 

Recharge’s Legacy Javascript Widget injects itself in all themes using Recharge’s ScriptTag, even if your store uses a 2.0 theme. This can cause the widget to be injected into the wrong form, resulting in the widget working incorrectly, or errors when attempting to add a subscription item to the cart. 

Resources

• Check out the following common troubleshooting guides if you are experiencing issues with the updated theme:
  • Subscription widget is not appearing on the product page
  • The updated product price is not reflected on the subscription widget
• Merchants using the Shopify Checkout Integration can refer to "Variant can only be purchased with a selling plan" error
• Contact Recharge Support if you experience other issues after updating your theme. 
• Refer to Advanced customizations for the widget for more information on making advanced customizations to your subscription widget to work with your updated theme.