Sell subscription as an add-on to existing product

Shopify Apps
1

Hello!

I am looking to add an optional subscription to a product. For example: customers can purchase a video by itself or they can purchase the video with a subscription to a hosted homepage for the video too. So essentially I want the subscription to be an added option that re-charges the customer every 12 months but the payment for the video itself is done upfront as a 1-time fee.

My understanding is that I need to use a Shopify App to do this - does anyone have any good suggestions on how to achieve this?

Website: www.trykindred.com

Product Page: https://www.trykindred.com/products/one-kindred-documentary-video

Theme: Dawn 2.0

Thank you!

2

Hi @mattmark , you need one-time purchase and pre-paid subscription option. I would recommend Recharge (cheaper option) or Skio.
You have both of those options on Recharge, but you can’t create both of the options for one product. So would need to create one product for one time purchase and another one for subscription.
Skio is more advanced, and more expansive, you could always organize demo session with them and see what is a better option for you. :slightly_smiling_face:

1 Like
3

Hi Marina, could you guide me on how this would be set up with Recharge? I have the same requirement as the original poster, but I don’t think Recharge fits the requirements

4

Hi @erikvm , create two separate products, one for one-time, another for pre-paid subscription.
On your product page, you need to do some custom coding in order to display both of these products as variants (I suppose that’s what you’d like).
I can’t tell you the exact solution, because that depends on your theme and code structure. This is time consuming.
When you activate recharge for a specific product, Recharge widget is generated on your product page and since you’re gonna have two different products on one product page, you’ll have to generate another widget based on selected variant (in your case, product). Here is an example on how to generate new widget and remove previous:

window.ReChargeWidget.createWidget({ productId: b, injectionParent: '.shopify-product-form' });
const [widget0, widget1] = document.querySelectorAll('.rc_container_wrapper');
widget0.remove();

Anyway, this is just a part. If you’re not a developer - my advice is to hire one.

2 Likes
5

Thanks for the reply. I am the developer. However, where exactly does this widget logic take place?

6

Product section, where the product form is placed. :slightly_smiling_face:

7

Sorry, maybe I’m being dumb, but on the widget (when I’m in the “customize theme” preview), there is no code editor or anything to put custom javascript for the widget.