There are a lot of ways for theme developers to build custom user interface on product detail pages for projects integrated with the Shopify Native checkout. Building a custom subscription widget is not so much related to Firmhouse, but rather you need to utilize the standard Liquid tags and development methods that Shopify offers for this.

We will provide some pointers and general directions here, and we'll keep improving this section as we learn about specific implementation struggles that developers may have.

Basic principle: Make sure a Selling Plan is added to the cart

Firmhouse will create Selling Plans in Shopify for the products that you want to sell on subscription. Selling Plans are something native to Shopify. To be able to Checkout a subscription, a Selling Plan for a product needs to be added to the cart.

Thus, your subscription widget should ultimately take care of having a hidden input field or a radio button that sets the name="selling_plan_id" as part of your "add to cart" form. This way the appropriate selling plan gets added to the cart.

Take a look at the following two guides to learn how in Liquid you can fetch the available selling plans on a Product Detail Page, and how you may use the attributes of a selling plan to build a user interface on your product detail pages: