Highlighting subscription information before customers check out empowers customers to make informed purchases, and prevents an influx of questions to your support team.
This guide provides different methods, from code updates to out-of-the-box solutions, that make it easy for you to outline subscription information for your customers.
- Recharge Checkout on Shopify
- Shopify Checkout Integration
Before you start
- You may need to work with a developer to implement one of the methods listed in this article. Refer to the Agency Directory for partner information and recommendations.
- See Optimizing your website for subscriptions for additional suggestions on improving the user experience for your customers.
Providing customers with additional information helps to build trust and credibility. Many merchants consider using the product details page or a separate subscription landing page to:
- Provide customers with relevant information and Improve information accessibility
- Showcase original content to provide more insights into your brand or subscription offering
- Ensure compliance and display any auto-renewal and cancelation management policies on a subscription landing page
Hydrant, for example, has created a subscription landing page that showcases branded visuals, explaining why customers should subscribe. Oatly, another brand using Recharge, created a landing page that displays their unique product.
Method 1 - Subscription landing page
A subscription landing page typically conveys product data for each product and outlines any need-to-know subscription information. With a subscription landing page you can:
- Highlight all the key perks a customer receives when they subscribe (ie. free shipping, discounted product prices, loyalty rewards)
- Showcase your brand’s unique approach to subscriptions
- Provide information to your customers
- Answer frequently asked questions
Subscription landing pages are custom built and may require knowledge of Ajax. There are a few ways you can include a subscription landing page on your storefront, depending on your development resources and design needs.
Option 1: Create a webpage on your storefront
Use Shopify’s rich text editor to create a new webpage on your storefront, and highlight your subscription offering for potential customers.
You can display a list of your products with links to the relevant product pages so customers can check out, or use Ajax so customers can add a product to their cart from the landing page.
Option 2: Develop a custom landing page
Work with a developer to develop a custom landing page in the Shopify theme files using custom liquid code.
Your developer must use Ajax if you would like customers to add a product to their cart from the landing page.
Option 3: Use a third-party app
Leverage a page-builder app to achieve a customized layout without requiring custom code.
- Merchants using the Recharge Checkout on Shopify can refer to Using a page-builder app for a list of available page builder apps.
- Merchants using the Shopify Checkout Integration must work with a developer to integrate a page-builder app.
Method 2 - The product details page
The subscription widget modal on the product details page is a great place to showcase relevant subscription information when customers are trying to learn more about your products.
Rasa Coffee, for example, uses the modal to highlight the benefits subscribers receive, including discounts and free shipping:
You can use out-of-the-box features or basic liquid code to update the product details page with additional subscription information.
Option 1: Update the Recharge subscription widget
You can update the messaging that appears with the subscription widget to outline the benefits of your subscription program.
Customize the Subscription details link verbiage and How it works verbiage in the subscription details popup section:
- Navigate to your Recharge merchant portal.
- Select Storefront from the navigation menu.
- Select Subscription Widget to update the widget settings.
- Locate the Subscription details popup section.
- Update the “Subscription details link verbiage” and “How it works verbiage” to highlight the benefits of your subscription program.
- Select Save to save your changes.
Updates to the subscription widget messaging automatically apply on any subscription product details page. These updates help keep your customers informed and educated before they complete any purchases.
Option 2: Edit the Shopify liquid files
You can update your Shopify liquid files and add custom code to the product form template and showcase a more customized layout. This option requires basic Shopify liquid knowledge and varies depending on the theme and design requirements.
- Update the Shopify liquid files directly in Shopify:
- Select Online Store from the Sales Channel navigation in your Shopify admin. It is recommended that you duplicate your theme before making code changes to prevent unexpected issues.
- Select Actions and Edit code.
- Locate the liquid file containing the product information. This file varies depending on your theme. For example, use the `main-product.liquid` file if you use the Dawn theme for your storefront.
- Add a ‘div’ element that includes verbiage highlighting the value of the subscription program. Add any CSS styling to compliment your theme and brand.
Changes made to the Shopify theme code apply to all of your product pages.
Didn’t find what you’re looking for?Contact us