Custom subscription widget

There are many ways for theme developers to build custom user interfaces on product detail pages for projects integrated with the Shopify Native checkout. Building a custom subscription widget is not so much related to Firmhouse specifically, but rather requires utilizing the standard Liquid tags and development methods that Shopify offers.

This guide provides pointers and general directions for building custom subscription widgets.

Basic Principle: Make Sure a Selling Plan is Added to the Cart

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

Your subscription widget should ultimately include either a hidden input field or a radio button that sets name="selling_plan_id" as part of your “add to cart” form. This ensures the appropriate selling plan gets added to the cart when customers add products.

Resources for Building Custom Widgets

The following guides explain how to fetch available selling plans on a Product Detail Page using Liquid, and how to use selling plan attributes to build a user interface:

• Adding subscriptions to your theme (Shopify Developer Documentation)
• Adding selling plan options to your Shopify product pages (Firmhouse Developer Documentation)

These resources cover the Liquid variables available for selling plans, how to render selling plan options, and best practices for subscription UI implementation.