定期購買アプリの標準ウィジェット（パターン1／パターン2）を使わず、テーマ側で独自のUIを構築したい場合の考え方と、押さえるべき必須ポイントが分かります。
定期購買アプリでは、パターン1、パターン2の二種類のウィジェットを提供していますが、
「サイトのトンマナに合わせたい」「より分かりやすいUIにしたい」というニーズがあります。
▼パターン1のウィジェット
▼パターン2のウィジェット
標準ウィジェットを超える独自実装は、テーマのLiquid＋HTML/CSS/JSによるカスタマイズとなり、ストア様ご自身での対応（または制作会社様への依頼）が前提となります。実装の詳細はShopifyの仕様に準拠するため、本記事末尾のリファレンスを参照ください。
標準ウィジェットのノーコード調整（ラベル名・色など）で足りる場合は、そちらをご検討ください。参考：ウィジェットの色変更設定
product.selling_plan_groups を使って、プラングループ・プラン名・割引などを表示します。使用できるオブジェクトの詳細はShopifyのLiquidリファレンス（末尾）をご確認ください。
プラングループ名・プラン名・説明・割引などは、selling_plan_groups 配下のオブジェクトから取得します。
最重要カート追加のリクエストに、id（バリアントID）・quantity・selling_plan（プランID）の3つを含めてください。selling_plan が抜けると、定期購入ではなく通常購入としてカートに追加されます。
独自ウィジェットで「定期を選んだのに通常購入になってしまう」不具合は、カート追加時に selling_plan（プランID）が送られていないことがほとんどです。選択されたプランIDがリクエストに含まれているかを必ずご確認ください。
selling_plan の送り方・値（プランID）の仕様は、ShopifyのCart APIリファレンスに記載があります。
「特定のプランだけフロントに出したくない」という場合は、テーマ側の実装で出し分けることができます。たとえばプラン名やグループ名の先頭に特定の文字列（例：_非表示）を付けておき、その文字列を含むプランは描画しないように組んでおくと、コード側の条件だけで表示・非表示を切り替えられます。※これはテーマ実装での一例です。命名ルールや判定方法は自由に設計してください。
独自実装で使用する主なオブジェクトです。各仕様・最新情報はShopifyの公式リファレンスをご確認ください。
テーマのLiquid仕様・オブジェクトの詳細はShopify提供のため、不明点はShopifyへお問い合わせください。
標準ウィジェットで対応できる範囲を超えるカスタマイズは、ストア様側での実装が前提となります。ご対応が難しい場合は、弊社で実装を承ることも可能です（有償）。