Changing your Shopify theme
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.
- Shopify Checkout Integration
Understanding the widget options
Stores on the Shopify Checkout Integration work with two widgets, the Shopify Subscription Widget 1.0 or the JS widget, depending on your theme and specific store needs.
Shopify Subscription Widget 1.0
The Shopify Subscription Widget 1.0 works out of the box with Online Store 2.0 themes and supports multi-currency markets. With the Shopify Subscription Widget 1.0, place the subscription widget on your product page directly through the Online Store editor in Shopify.
The Shopify Subscription Widget 1.0 is less customizable due to it using an app-block and not requiring code.
JS widget
To use the JS widget out of the box, your store must be using a Shopify 1.0 theme. The JS widget is more customizable as you can build your own custom JS widget that works on any page with both Shopify's 1.0 and 2.0 themes. Recharge does not support customizing the JS widget to work with 2.0 themes.
Note: Customizations to your store’s theme are 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.
Changing your 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:
- Log in to your Shopify admin and click Online Store, then select Themes.
- In the Theme library section, click the Add theme dropdown.
- 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.
- This example uses a theme added from the Theme Store. Click Try theme once you’ve found the new theme for your store.
- Once you add your theme to Shopify, you can customize it to your liking.
- In the Theme library section of your Shopify admin, click Customize next to your new theme.
- Once you’re satisfied with your changes, return to Theme library, Click Actions, and select Preview the theme.
- 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:
- Log in to your Shopify admin and click Online Store, then select Themes.
- Click Actions, then select Duplicate
- Click Actions on the duplicated theme and select Download theme file to save your previous theme as a backup.
Changing your theme with the Shopify Subscription Widget 1.0
There are two actions you must make when changing themes using the Shopify Subscription Widget 1.0:
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 Shopify Subscription Widget 1.0 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 Shopify Subscription Widget 1.0, 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 JS widget
Recharge’s ScriptTag automatically injects the JS widget when you change your theme. All stores using the JS 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 JS widget:
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 JS subscription widget, follow the steps under Option 1 in Adding and adjusting the Manage Subscriptions' link to the customer account in Shopify.
JS widget injects itself into a 2.0 theme
Typically, stores using 1.0 themes are the only stores that should use the JS widget, although there are instances such as custom configurations, where the JS widget is required regardless of theme version.
Recharge’s JS 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:
- 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 widget customizations for more information on making advanced customizations to your subscription widget to work with your updated theme.
