Shopify Subscriptions: How to Clearly Show Recurring Refill Prices at Checkout

Hey store owners! Let's talk about something that can really trip up your subscription sales: that tricky moment at checkout when the recurring price isn't quite what your customers expect. We recently saw a great discussion in the Shopify community about this, and it's a common pain point for anyone running a subscription model with tiered pricing, especially with product swaps or refill discounts.

The original post came from tessa_4, who runs a fantastic candle subscription service. They offer a 10% discount on the initial 'starter' candle, then switch to a lower, discounted refill price for subsequent orders. The backend (using Recharge) was handling the pricing perfectly, but the Shopify checkout's "Recurring Subtotal" was displaying the initial discounted starter price, not the even lower refill price. As tessa_4 rightly pointed out, this isn't great for conversion rates (CVR) when customers see a higher recurring cost than they anticipate for refills.

The Core Problem: Display vs. Reality

The crux of the issue, as several experts like v.marychenka and Taha_Dev highlighted, is that the "Recurring Subtotal" on Shopify's checkout page pulls its information directly from your subscription app's (in this case, Recharge's) selling plan configuration. A Checkout UI Extension, while powerful, cannot actually change that primary "Recurring Subtotal" number itself. It's a display of the underlying plan's structure.

So, if your Recharge selling plan only specifies one discount (the initial 10% off), that's what Shopify will show as the recurring price, even if Recharge internally processes a different, lower price for subsequent refills. The goal is to make the Shopify checkout reflect that two-tiered pricing strategy.

The "Real" Fix: Two-Tier Pricing in Recharge

The most effective and direct solution, confirmed by the community and successfully implemented by tessa_4, is to configure your selling plan in Recharge with a second, recurring pricing policy. This tells Shopify to display something like "First payment X, then Y every interval" directly on the checkout page, making everything crystal clear.

How to Implement Two-Tier Pricing in Recharge:

1. Access Your Recharge Selling Plans: Log into your Recharge admin and navigate to your selling plans. You'll want to edit the plan(s) associated with your subscription products (like tessa_4's candles).

2. Set Up a Second Pricing Policy: Within the selling plan, look for options to define pricing policies for different cycles. You'll typically set:

   • A "first payment" policy that reflects your initial starter discount (e.g., 10% off the jar candle).
   • A "recurring" or "later cycles" policy that reflects the discounted refill price.

   This tells Recharge how to communicate the pricing structure to Shopify's checkout.

3. Verify Checkout Display: Once you've updated the selling plan in Recharge, head over to your Shopify store and add the subscription product to your cart. Proceed to checkout. You should now see the "Recurring Subtotal" line updated to show both the initial payment and the subsequent recurring payment, like "First payment X, then Y every interval."

   

4. Crucial Final Check: Test Subscription Order: As Taha_Dev wisely suggested, don't just stop at the display! Place a full test subscription order. Then, go into Recharge and look at its first upcoming charge. This confirms that the renewal will indeed bill the correct refill price that checkout now shows. This step is vital to ensure everything's aligned from display to actual billing.

Tessa_4 confirmed that this approach "totally worked" and after running "a bunch of test orders w auto swap to fixed price and dynamic on its own selling plan and all seem to be working!" – which is fantastic news!

Adding Context with Checkout UI Extensions (Shopify Plus Only)

What if you're on Shopify Plus and you want to add even more specific context, or if for some reason the two-tier Recharge setup isn't quite giving you the granularity you need? JohnQQ and Taha_Dev pointed out that while a Checkout UI Extension can't change the main "Recurring Subtotal" number, it can display additional context right alongside it.

This is purely a display enhancement, like a note or callout, but it can be incredibly powerful for CVR by answering customer questions proactively.

Steps for a Contextual Note with Checkout UI Extensions (Shopify Plus):

1. Store Refill Price in Metafields: For each product variant that has a different refill price, create a custom metafield (e.g., custom.refill_price) and store the specific refill price there. This makes the data accessible.

2. Develop a Checkout UI Extension: You'll need to create a custom Checkout UI Extension. This requires some development knowledge, as it involves writing code that integrates with Shopify's checkout extensibility platform.

3. Target the Order Summary: Configure your extension to target a relevant block within the order summary, such as purchase.checkout.line-item.render-after. This allows you to render content directly below each line item in the order summary.

4. Read Selling Plan and Metafield Data: Within your extension's code, you can use the useSubscription hook to read data about the selling plan. You'll also pull the custom.refill_price from the variant's metafield.

5. Display Your Custom Note: Render a small text block or callout that explicitly states the refill price, something like "Then CAD X for refills." This provides immediate clarity to the customer at the point of purchase.

This approach won't alter the primary "Recurring Subtotal," but it directly addresses the customer's potential confusion and can significantly help CVR by providing clear information when they need it most.

Ultimately, the community discussion highlights that for subscription pricing clarity, the best approach is often a combination of robust app configuration (like Recharge's two-tier pricing policies) and, for Plus merchants, leveraging the power of Checkout UI Extensions for enhanced communication. Making sure your customers see exactly what they'll pay, both upfront and recurring, is key to building trust and driving those conversions!