The Subscription Widget 2.0 is a modern widget that can easily be customized in the Shopify Theme Editor. Create multiple versions of this widget to use on different product templates.

This guide covers how to access the Subscription Widget 2.0, adding the widget to your storefront, available customization options, and things to consider before implementing this widget.

Before you start

• The Subscription Widget 2.0 is available to stores that meet the following criteria:

  • Uses the Shopify Checkout Integration
    • To confirm your store’s platform, refer to Identifying your store's Recharge checkout platform
  • Utilizes Product Subscription Plans
    • To confirm your store is using Product Subscription Plans, refer to How to confirm your store uses Product Subscription Plans
  • Has a Shopify 2.0 theme published
    • To confirm that you have a published Shopify 2.0 theme, refer to Confirming the version of your Shopify theme
• The Subscription Widget 2.0 is in Open Early Adopter status. As of September 17th, 2024, if you use the Shopify Checkout Integration, Product Subscription Plans, and a 2.0 theme you have access to the Subscription Widget 2.0 app block in your Shopify Theme Editor. If you believe you're eligible and would like the widget enabled, contact the Recharge support team.

Key features

The Subscription Widget 2.0 is an updated version of our app block subscription widget, designed to enhance conversion rates and offer greater customization. This widget is highly flexible, allowing you to create multiple versions of the widget using different templates, which can then be assigned to relevant products. You can preview changes as you customize the widget.

Controlled directly from the Shopify theme editor, the widget can be seamlessly integrated into your current 2.0 theme, ensuring a cohesive look for your store. Tailoring the subscription widget to align with your brand's aesthetics and messaging is crucial for attracting new subscribers and converting visitors into loyal customers.

Add the widget to your storefront

Once the widget has been enabled for your store, add the widget to your storefront: 

1. In the Shopify Admin, click Online Store and select Themes. 
   • We recommend you use an unpublished theme while testing. 
2. Click Customize on the intended theme and select the relevant product template or your default product page. The widget will only preview on products that have a subscription plan in Recharge. 
3. Click on Add block, then Apps, and select Subscription Widget 2.0. 
4. Drag the Subscription Widget 2.0 app block where you want it to appear on the product page. Select Save to confirm the widget's placement on the product page. 
5. Publish the theme you've added the app block on to make the widget live on your storefront. 

Available customizations

The following table highlights the widget settings that you can customize to align the subscription widget to fit your store’s branding.

Edit the Learn more content default text

Recharge doesn't recommend editing the CSS, though you can update the text or images/icons to match your store's branding. Recharge highlights the provided code so you can easily identify where to make changes in the HTML.

Green span sections display icons, which can be replaced with simple HTML. Add a SVG, img, or any image type Shopify supports in the HTML fields. You must replace the span or Recharge's default images will appear here.

The peach and red highlights contain the learn more verbiage which you can update. 

The following code is the default code provided on the Learn more pop up:

<style>
rc-learn-more-modal h1 { font-size: 40px; line-height: 48px; font-weight: 600; text-align: center; padding-bottom: 32px; margin: 0;}rc-learn-more-modal h2 { padding: 0; margin: 0; font-size: 20px; line-height: 28px; font-weight: 600;}rc-learn-more-modal p { margin: 0; padding: 0; font-size: 16px; line-height: 24px;}rc-learn-more-modal .learn-more-content { padding: 0 20px 20px;}rc-learn-more-modal .learn-more-footer button { background-color: var(--rc-widget-brand-color); color: var(--rc-widget-brand-contrast-color); border: none; border-radius: var(--rc-widget-button-radius); padding: 12px; min-width: 335px; font-size: 16px; font-weight: 600; line-height: 24px; cursor: pointer; transition: background-color 0.1s ease;}rc-learn-more-modal .learn-more-footer button:hover { background-color: var(--rc-widget-brand-color-80);}rc-learn-more-modal .learn-more-footer { display: flex; justify-content: center;}rc-learn-more-modal .learn-more-group { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px;}rc-learn-more-modal .learn-more-group-item { display: flex; gap: 32px; align-items: center;}rc-learn-more-modal .learn-more-group-icon-container { display: flex; padding: 32px; background-color: #f6f8f9; border-radius: var(--rc-widget-card-radius);}rc-learn-more-modal svg, rc-learn-more-modal img { height: 40px; width: 40px;}@media (max-width: 560px) { rc-learn-more-modal h1 { font-size: 26px; line-height: 32px; padding-bottom: 16px; }rc-learn-more-modal h2 { font-size: 16px; line-height: 24px;}rc-learn-more-modal p { font-size: 14px; line-height: 20px;}rc-learn-more-modal .learn-more-content { padding: 0;}rc-learn-more-modal svg, rc-learn-more-modal img { height: 32px; width: 32px;}rc-learn-more-modal .learn-more-group-item { gap: 16px;}rc-learn-more-modal .learn-more-group-icon-container { padding: 20px;} }
</style>
<div class="learn-more-content">

<h1 class="learn-more-header">Great reasons to subscribe</h1> 
<div class="learn-more-group"> <div class="learn-more-group-item"> 
<div class="learn-more-group-icon-container"><span rc-calendar-icon></span></div> 
<div> 
<h2 style="margin:0;">Flexible frequency</h2> <p style="margin:0;"> Not sure how much of something you need, or how often? Adjust quantities and frequencies any time. </p>
</div> </div> 
<div class="learn-more-group-item"> 
<div class="learn-more-group-icon-container"> <span rc-bell-icon></span> </div> <div> <h2>Order reminders</h2> 
<p> We'll let you know before each shipment. Delay, reschedule or cancel if you need to - we’ll only bill you when your order ships. </p> 
</div> </div> <div class="learn-more-group-item"> 
<div class="learn-more-group-icon-container"> <span rc-phone-icon></span> </div> 
<div> <h2>You're in control</h2> <p> Add or remove subscriptions, cancel orders, and edit frequencies and quantities through our user-friendly customer portal. </p> </div> </div> </div>

</div><div class="learn-more-footer"><button data-dismiss-modal>Got it</button></div>

Default pop up

Example of pop up with adjustments

Advanced use cases

The following list describes common use cases when implementing the Subscription Widget 2.0:

• Change the text to highlight different product or subscription benefits based on the product (ie. skincare products may require different information than a chocolate bar).
• Various color schemes to suit different pages and products. 
• Creating two of the same product and assigning them different widgets, then create a marketing campaign to see which performs better. This allows you to A/B test different scenarios. 
• Configure separate widgets for when your product has plans with no discount and plans with discounts.

Considerations

Review the following considerations before using the Subscription Widget 2.0: